https://musicautor.org/js/home-animation.js

1$(document).ready(function() {
2    
3    var interval;
4    $('.subheader-full .slide-trigger, .subheader-full .switch').click(function(e) {
5        if($(this).find('.more').is(':visible') && $(window).width() > 768) {
6            e.preventDefault();
7        }
8        
9        if($(window).width() > 768) {
10            var side = $(this).attr('data-side');
11
12            if(side == 'left') {
13                var oppositeSide = 'right';
14            } else if(side == 'right') {
15                var oppositeSide = 'left';
16            }
17
18            if($(this).hasClass('switch')) {
19                resetState(oppositeSide);
20            }
21
22            if($('.subheader-full .open').length && !$('.subheader-full .'+side+'-col.open').length) {
23                clearInterval(interval);
24                $('.subheader-full .categories .home-icon').removeClass('showed');
25            }
26
27            $('.subheader-full .' + side + '-col').addClass('open');
28            $('.subheader-full .' + oppositeSide + '-col').addClass('collapse');
29            $('.subheader-full .middle-col').addClass(oppositeSide);
30
31            $('.subheader-full .'+side+'-col .categories .home-icon').show();
32            interval = setInterval(function() {
33                var item = $('.subheader-full .'+side+'-col .categories .home-icon').not('.showed').first();
34                if(!item.length) {
35                    clearInterval(interval);
36                    if(side == 'left') {
37                        $('.subheader-full .left-col .btn').show().stop(true, false).animate({
38                            right: -70
39                        }, 300, 'easeOutExpo');
40                    } else if(side == 'right') {
41                        $('.subheader-full .right-col .btn').show().stop(true, false).animate({
42                            left: -70
43                        }, 300, 'easeOutExpo');
44                    }
45                } else {
46                    $('.subheader-full .'+side+'-col .categories .home-icon').not('.showed').first().addClass('showed');
47                }
48            }, 100);
49        }
50    });
51
52    $('.subheader-full .middle-col .logo').click(function(e) {
53        e.preventDefault();
54        
55        clearInterval(interval);
56        $('.subheader-full .categories .home-icon').fadeOut(function() {
57            $(this).removeClass('showed');
58        });
59        
60        $('.subheader-full .left-col, .subheader-full .right-col').removeClass('open').removeClass('collapse');
61        $('.subheader-full .middle-col').removeClass('left').removeClass('right');
62        
63         $('.subheader-full .left-col .btn').stop(true, false).animate({
64             right: -270
65         }, 100, 'easeOutExpo', function() {
66             setTimeout(function() {
67                 $('.subheader-full .left-col .btn').hide();
68             }, 200);
69         });
70         $('.subheader-full .right-col .btn').stop(true, false).animate({
71             left: -330
72         }, 100, 'easeOutExpo', function() {
73             setTimeout(function() {
74                 $('.subheader-full .right-col .btn').hide();
75             }, 200);
76         });
77    });
78    
79    function resetState(side) {
80
81        if(side == 'left') {
82            var oppositeSide = 'right';
83            var switchBtnResetPos = -330;
84        } else if(side == 'right') {
85            var oppositeSide = 'left';
86            var switchBtnResetPos = -270;
87        }
88        
89        clearInterval(interval);
90        $('.subheader-full .'+side+'-col .categories .home-icon').fadeOut(function() {
91            $(this).removeClass('showed');
92        });
93        
94        $('.subheader-full .'+side+'-col').removeClass('open');
95        $('.subheader-full .'+oppositeSide+'-col').removeClass('collapse');
96        $('.subheader-full .middle-col').removeClass(oppositeSide);
97        
98        var animOptions = {};
99        animOptions[oppositeSide] = switchBtnResetPos;
100        
101         $('.subheader-full .'+side+'-col .btn').stop(true, false).animate(animOptions, 100, 'easeOutExpo', 
102         function() {
103             setTimeout(function() {
104                 $('.subheader-full .'+side+'-col .btn').hide();
105             }, 200);
106         });
107    }
108    var homeAnim = getCookie('home-animation');
109    
110    if(!homeAnim) {
111        $('.subheader-full .middle-col .logo').animate({
112            opacity: 1
113        }, 1000, function() {
114            $('.subheader-full .middle-col .logo').animate({
115                top: 0
116            }, 800, 'easeOutExpo', function() {
117                $('header').animate({
118                    top: 0
119                }, 600);
120                $('.subheader-full .middle-col .table').animate({
121                    opacity: 1
122                }, 600, function() {
123                    $('.subheader-full .overlay').fadeOut(function() {
124                        $('.subheader-full .middle-col').addClass('white');
125                        $('.subheader-full .middle-col .partners, .subheader-full .middle-col .scroll').animate({
126                            opacity: 1
127                        }, 1000);
128                    });
129                    $('.subheader-full .middle-col').css('box-shadow', '0 0 20px 10px rgba(0,0,0,0.2)');
130

131                    setCookie('home-animation', 'true', 1);
132                });
133            });
134        });
135    } else {
136        $('.subheader-full .middle-col').addClass('white');
137        $('.subheader-full .middle-col .logo').css({opacity: 1});
138        $('.subheader-full .middle-col .logo').css({top: 0});
139        $('header').css({top: 0});
140        $('.subheader-full .middle-col .table').css({opacity: 1});
141        $('.subheader-full .overlay').hide();
142        $('.subheader-full .middle-col .partners, .subheader-full .middle-col .scroll').css({opacity: 1});
143        $('.subheader-full .middle-col').css('box-shadow', '0 0 20px 10px rgba(0,0,0,0.2)');
144    }
145    
146    $.each($('.subheader-full .home-icon'), function(k, item) {
147        var textWidth = parseInt($(item).find('span').width());
148        $(item).find('span').css({left: ((40 - textWidth) / 2)});
149    });
150
151});