https://cdn.husq.ru/static/ac167/landing-banners.js

1(function($) {
2
3    var $body;
4    var $window;
5    var windowPos = 0;
6    var articles = 'article';
7    var $articles;
8    var ticking = false;
9    var requestId;
10
11
12    function scrollToCurrent() {
13
14        if (!ticking) {
15            setTimeout(function() {
16                console.log('scrollToCurrent');
17                $('html, body').stop().animate({
18                    scrollTop: $("article.active").offset().top
19                }, 500);
20                ticking = false;
21            }, 2500);
22        }
23
24        ticking = true;
25
26    }
27
28
29
30    function initialiseParallax() {
31
32        var windowW = window.innerWidth || $(window).width();
33		var windowH = window.innerHeight || $(window).height();
34        if (windowW > 479 && windowW > windowH) {
35
36
37            var $articles = $('article', '#landingBanners');
38
39            $articles.each(function(index) {
40                $(this).css({
41                    'height': $(window).height()
42                })
43            });
44
45
46            function drawbanners(article) {
47
48                var articleOffset = $(article).offset();
49                var scrollDifference = windowPos - articleOffset.top;
50
51                var $entryContent = $(article).children('.entry-content');
52
53                var $banner1 = $('.banner.banner--1', article);
54                var $banner2 = $('.banner.banner--2', article);
55                var $banner3 = $('.banner.banner--3', article);
56                var $banner4 = $('.banner.banner--4', article);
57                var $banner5 = $('.banner.banner--5', article);
58                var $banner6 = $('.banner.banner--6', article);
59                var $banner7 = $('.banner.banner--7', article);
60                var $banner8 = $('.banner.banner--8', article);
61
62
63                var bannerOffset1 = (scrollDifference * 1.8) * -1;
64                var bannerOffset2 = (scrollDifference * 2) * 1;
65                var bannerOffset3 = (scrollDifference * 1.1) * -1;
66                var bannerOffset4 = (scrollDifference * 2) * 1;
67                var bannerOffset5 = (scrollDifference * 1.2) * -1;
68                var bannerOffset6 = (scrollDifference * 1.6) * -1;
69                var bannerOffset7 = (scrollDifference * 1.2) * -1;
70                var bannerOffset8 = (scrollDifference * 2) * 1;
71				
72				
73                $banner1.css({
74                    transform: 'translate3d(0px, ' + bannerOffset1 + 'px, 11px)'
75                });
76                $banner2.css({
77                    transform: 'translate3d(0px, ' + bannerOffset2 + 'px, 12px)'
78                });
79                $banner3.css({
80                    transform: 'translate3d(0px, ' + bannerOffset3 + 'px, 13px)'
81                });
82                $banner4.css({
83                    transform: 'translate3d(0px, ' + bannerOffset4 + 'px, 14px)'
84                });
85                $banner5.css({
86                    transform: 'translate3d(0px, ' + bannerOffset5 + 'px, 15px)'
87                });
88                $banner6.css({
89                    transform: 'translate3d(0px, ' + bannerOffset6 + 'px, 16px)'
90                });
91                $banner7.css({
92                    transform: 'translate3d(0px, ' + bannerOffset7 + 'px, 17px)'
93                });
94                $banner8.css({
95                    transform: 'translate3d(0px, ' + bannerOffset8 + 'px, 18px)'
96                });
97
98                requestId = requestAnimationFrame(function() {
99                    drawbanners(article);
100                });
101
102            }
103			
104			if ($('html').hasClass('no-touch')){
105
106				$articles.each(function() {
107					drawbanners(this);
108				});
109			
110			}
111			
112        } else {
113
114            var $articles = $('article', '#landingBanners');
115
116            $articles.each(function(index) {
117                $(this).css({
118                    'height': ''
119                })
120            });
121
122            var $banner = $('#landingBanners .banner');
123			
124            $banner.css({
125                transform: 'none'
126            });
127            cancelAnimationFrame(requestId);
128        }
129    }
130
131
132    function scroll() {
133        windowPos = $(window).scrollTop();
134    }
135
136    $(document).ready(function() {
137        $body = $(document.body);
138        $window = $(window);
139        $articles = $(articles);
140
141        $window.on('scroll touchmove', scroll);
142
143
144            initialiseParallax();
145
146
147        $(window).resize(function() {
148                initialiseParallax();
149
150        })
151
152    });
153	
154	var windowW = window.innerWidth || $(window).width();
155
156    if (windowW > 479) {
157		
158		$('.article-nav ul li a').click(function(e) {
159			e.preventDefault();
160			var targ = $(this).attr('href');
161			var posTop = $(targ).offset().top;
162			if (targ=="#Slide1") {
163				var posTop = 0;
164			}
165			$('html,body').animate({
166				'scrollTop': posTop
167			}, 1000);
168		});
169
170		var waypoints = $('article').waypoint(function(direction) {
171			if (direction === 'down') {
172				var panel;

173				panel = this.element.id;
174				$('article').removeClass('active');
175				$('#'+ panel).addClass('active');
176				$('.article-nav ul li.active').removeClass('active');
177				$(".article-nav ul li[data-target ='"+panel+"']").addClass('active');
178			}
179		}, {
180			offset: 100
181		})
182		var waypoints = $('article').waypoint(function(direction) {
183			if (direction === 'up') {
184				var panel;
185				panel = this.element.id;
186				$('article').removeClass('active');
187				$('#'+ panel).addClass('active');
188				$('.article-nav ul li.active').removeClass('active');
189				$(".article-nav ul li[data-target ='"+panel+"']").addClass('active');
190			}
191		}, {
192			offset: -100
193		})
194	}
195
196})(jQuery);