https://akkermann.ru/wp-content/themes/akkermann/js/script.js?89

1var tl = [],
2    controller,
3    scrollbar,
4    scene = [],
5    container = $('.main-layout-container'),
6    sections = container.find('section'),
7    scrollHandler,
8    mainLayout,
9    mainLayoutNavContainer,
10    mainLayoutNavInner,
11    mainLayoutNav,
12    mobileBreakPoint = 700,
13    touchBreakPoint = 1280;
14
15function createMainLayout() {
16    if (!mainLayout) {
17        scrollHandler = document.querySelector('#scroll-handler'),
18            mainLayout = document.querySelector('#main-layout'),
19            mainLayoutNavContainer = document.createElement('div'),
20            mainLayoutNavInner = document.createElement('div'),
21            mainLayoutNav = document.createElement('ul');
22
23        mainLayoutNavContainer.className = 'main-layout-nav-container';
24        mainLayoutNavInner.className = 'main-layout-nav-inner';
25        mainLayoutNav.className = 'main-layout-nav';
26        mainLayout.appendChild(mainLayoutNavContainer);
27        mainLayoutNavContainer.appendChild(mainLayoutNavInner);
28        mainLayoutNavInner.appendChild(mainLayoutNav);
29
30        var firstInnerSlider = sections[0].getElementsByClassName('inner-slider');
31        if (firstInnerSlider.length) {
32            var slideHandlerItem = document.createElement('div');
33            slideHandlerItem.id = 'shi-0';
34            slideHandlerItem.className = 'first-inner-handler-item';
35            scrollHandler.appendChild(slideHandlerItem);
36        }
37
38        for (let i = 1; i <= sections.length; i++) {
39            if (i < sections.length) {
40                var slideHandlerItem = document.createElement('div');
41                var innerSlider = sections[i].getElementsByClassName('inner-slider');
42                slideHandlerItem.id = 'shi-' + i;
43                slideHandlerItem.className = 'scroll-handler-item';
44                if (innerSlider.length)
45                    slideHandlerItem.classList.add('with-inner');
46                scrollHandler.appendChild(slideHandlerItem);
47            }
48
49            if (sections.length > i && i >= 1) {
50                var mainLayoutNavItem = document.createElement('li'),
51                    mainLayoutNavButton = document.createElement('button'),
52                    mainLayoutNavButtonText = document.createTextNode(sections[i].getElementsByClassName('main-blocks-title')[0].textContent);
53
54                mainLayoutNav.appendChild(mainLayoutNavItem);
55                mainLayoutNavItem.appendChild(mainLayoutNavButton);
56                mainLayoutNavButton.appendChild(mainLayoutNavButtonText);
57            }
58        }
59
60        mainLayoutNavInner.classList.add('dark');
61
62        var slideSpacer = document.createElement('div');
63        slideSpacer.className = 'scroll-spacer';
64        scrollHandler.appendChild(slideSpacer);
65
66        if (container.find('section.dark').length) {
67            var mainLayoutNavLight = mainLayoutNavInner.cloneNode(true);
68            mainLayoutNavLight.classList.remove('dark');
69            mainLayoutNavLight.classList.add('light');
70            mainLayoutNavContainer.appendChild(mainLayoutNavLight);
71        }
72    }
73}
74
75function setMainLayoutWidth() {
76    $(mainLayoutNavContainer).find('.' + mainLayoutNav.className).css('width', $(mainLayoutNavContainer).innerWidth());
77}
78
79function setMainLayout() {
80
81    if (window.innerWidth > touchBreakPoint && !controller) {
82        controller = new ScrollMagic.Controller({
83            refreshInterval: 0
84        });
85
86        var firstInnerSlider = $(sections[0]).find('.inner-slider');
87        if (firstInnerSlider.length) {
88            tl[0] = new TimelineMax();
89            tl[0].to(firstInnerSlider, 1, {
90                left: "100%",
91                xPercent: -100,
92                ease: "sine.out"
93            });
94            scene[0] = new ScrollMagic.Scene({
95                    triggerElement: '#shi-0',
96                    triggerHook: 'onLeave',
97                    duration: '500%'
98                })
99                .setTween(tl[0])
100                .addTo(controller);
101        }
102
103        for (let i = 1; i < sections.length; i++) {
104            var innerSlider = $(sections[i]).find('.inner-slider'),
105                duration = '500%';
106            tl[i] = new TimelineMax();
107
108            tl[i].to(container, 1, {
109                x: '-' + i + '00%',
110                ease: "sine.inOut"
111            });
112            if (innerSlider.length && innerSlider.outerWidth() > innerSlider.parent().width()) {
113                var toX = '-' + (innerSlider.outerWidth() - innerSlider.parent().width()) + 'px';
114                duration = '1000%';
115                tl[i].to(innerSlider, 1, {
116                    left: "100%",
117                    x: toX,
118                    ease: "sine.inOut"
119                });
120            }
121
122            scene[i] = new ScrollMagic.Scene({
123                    triggerElement: '#shi-' + i,
124                    triggerHook: 'onLeave',
125                    duration: duration
126                })
127                .setTween(tl[i])
128                .addTo(controller);
129        }
130
131        scrollbar = Scrollbar.init(scrollHandler, {
132            delegateTo: mainLayout
133        });
134
135        Scrollbar.detachStyle();
136
137        scrollbar.addListener((status) => {

138            controller.update();
139            scene.forEach(element => {
140                element.refresh();
141            });
142            highlightNav();
143            contrastNav();
144        })
145        scrollbar.update();
146    } else if (controller && window.innerWidth < touchBreakPoint) {
147        controller.destroy(true);
148        controller = null;
149        tl.forEach(element => {
150            element.clear();
151        });
152        Scrollbar.destroyAll();
153        scrollbar = null;
154    }
155
156    hashToSlide()
157}
158
159function highlightNav() {
160    sections.each(function() {
161        var sectionOffset = $(this).offset().left - 100;
162        if (sectionOffset < 0 && sectionOffset > -$(this).outerWidth()) {
163            $(mainLayoutNavContainer).find('.active').removeClass('active');
164            $(mainLayoutNavContainer).find('li:nth-child(' + $(this).index() + ')').addClass('active');
165        }
166    });
167}
168
169function contrastNav() {
170    var intro = $('.main-intro');
171    if (intro.length) {
172        var nav = $(mainLayoutNavContainer),
173            introWidth = intro.outerWidth(),
174            correction = parseInt(nav.css('left')) + parseInt(nav.css('right')),
175            size = intro.offset().left + introWidth,
176            lightSize = size - correction / 2,
177            darkSize = introWidth - size - correction / 2;
178        if (darkSize > introWidth - correction) darkSize = introWidth - correction;
179        $('.main-layout-nav-inner.light').css('width', lightSize);
180        $('.main-layout-nav-inner.dark').css('width', darkSize);
181    }
182}
183
184function setSubNavPadding() {
185    var subnav = $('.main-header-subnav'),
186        breakpoint = subnav.parent().parent().children(':first-child'),
187        pos = breakpoint.position().left + parseInt(breakpoint.css('margin-left'));
188    subnav.css('padding-left', pos);
189    $('.main-header-subnav ul.children').css('left', pos + 260);
190}
191
192function setIntroHeight() {
193    var intro = $('.main-intro-container'),
194        header = $('header');
195    if ($(window).outerWidth() <= 700) {
196        intro.css('height', $(window).innerHeight() - header.outerHeight());
197    } else {
198        intro.css('height', '');
199    }
200}
201
202function pad(str, max) {
203    str = str.toString();
204    return str.length < max ? pad("0" + str, max) : str;
205}
206
207$(document).ready(function() {
208
209    $('.main-header-nav-handler').on('click', function(event) {
210        event.preventDefault();
211        $('body').toggleClass('main-header-nav-visible');
212    });
213
214    $('.main-layout-nav button').on('click', function(event) {
215        event.preventDefault();
216        var navIndex = $(this).parent().index(),
217            scrollTo = $(scrollHandler).find('#shi-' + (navIndex + 1)),
218            scrollY = scrollTo.next().offset().top + scrollbar.scrollTop + 1;
219        //scrollY = navIndex == 0 ? 0 : scrollTo.next().offset().top + scrollbar.scrollTop + 1;
220
221        //if (scrollTo.hasClass('with-inner')) scrollY = scrollY - (scrollTo.outerHeight() / 2 * 1.12);
222        if (scrollTo.hasClass('with-inner')) scrollY = scrollY - (scrollTo.outerHeight() / 2);
223        scrollbar.scrollTo(0, scrollY, 1000);
224    }).hover(
225        function() {
226            $(mainLayoutNavContainer).find('li:nth-child(' + ($(this).parent().index() + 1) + ') button').addClass('hover');
227        },
228        function() {
229            $(mainLayoutNavContainer).find('li:nth-child(' + ($(this).parent().index() + 1) + ') button').removeClass('hover');
230        }
231    );
232
233    $('.main-header-nav .main-header-nav-item').on('click', function(event) {
234        container = $(this).parent();
235        if (container.has('ul.main-header-subnav').length && window.innerWidth < touchBreakPoint) {
236            event.preventDefault();
237            container.toggleClass('enroll');
238        }
239    });
240
241    $('.main-intro-next-link').on('click', function(event) {
242        event.preventDefault();
243
244        var correction = $('header').outerHeight(),
245            target = $.attr(this, 'href');
246
247        $('html, body').animate({
248            scrollTop: $(target).offset().top - correction
249        }, 500);
250    });
251});
252
253function hashToSlide() {
254    $('.main-layout-nav li').eq(Math.abs(parseInt(window.location.hash.substring(window.location.hash.lastIndexOf('-')))) - 1).find('button').click();
255}
256
257window.addEventListener('load', setSubNavPadding);
258window.addEventListener('resize', setSubNavPadding);
259
260window.addEventListener('hashchange', hashToSlide);
261
262window.addEventListener('load', function() {
263    $('body').addClass('loaded')
264});
265
266setTimeout(function() {
267    $('body').addClass('loaded')
268}, 5000);