/* JS Document */ /****************************** [Table of Contents] 1. Vars and Inits 2. Set Header 3. Init Hero Slider 4. Init SVG 5. Initialize Hamburger 6. Initialize Testimonials Slider 7. Initialize Parallax ******************************/ $(document).ready(function() { "use strict"; /* 1. Vars and Inits */ // AOS ANIMATIONS // AOS.init(); var hamb = $('.hamburger'); var header = $('.header'); var hambActive = false; var menuActive = false; var ctrl = new ScrollMagic.Controller(); setHeader(); $(window).on('resize', function() { setHeader(); }); $(document).on('scroll', function() { setHeader(); }); initHeroSlider(); initSvg(); initHamburger(); initTestimonialsSlider(); initParallax(); /* 2. Set Header */ function setHeader() { if(window.innerWidth < 992) { if($(window).scrollTop() > 100) { header.addClass('scrolled'); } else { header.removeClass('scrolled'); } } else { if($(window).scrollTop() > 100) { header.addClass('scrolled'); } else { header.removeClass('scrolled'); } } if(window.innerWidth > 991 && menuActive) { closeMenu(); } } /* 3. Init Hero Slider */ function initHeroSlider() { if($('.hero_slider').length) { var owl = $('.hero_slider'); owl.owlCarousel( { items:1, loop:true, smartSpeed:800, autoplay:true, nav:false, dots:false }); // add animate.css class(es) to the elements to be animated function setAnimation ( _elem, _InOut ) { // Store all animationend event name in a string. // cf animate.css documentation var animationEndEvent = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; _elem.each ( function () { var $elem = $(this); var $animationType = 'animated ' + $elem.data( 'animation-' + _InOut ); $elem.addClass($animationType).one(animationEndEvent, function () { $elem.removeClass($animationType); // remove animate.css Class at the end of the animations }); }); } // Fired before current slide change owl.on('change.owl.carousel', function(event) { var $currentItem = $('.owl-item', owl).eq(event.item.index); var $elemsToanim = $currentItem.find("[data-animation-out]"); setAnimation ($elemsToanim, 'out'); }); // Fired after current slide has been changed owl.on('changed.owl.carousel', function(event) { var $currentItem = $('.owl-item', owl).eq(event.item.index); var $elemsToanim = $currentItem.find("[data-animation-in]"); setAnimation ($elemsToanim, 'in'); }) // Handle Custom Navigation if($('.hero_slider_left').length) { var owlPrev = $('.hero_slider_left'); owlPrev.on('click', function() { owl.trigger('prev.owl.carousel'); }); } if($('.hero_slider_right').length) { var owlNext = $('.hero_slider_right'); owlNext.on('click', function() { owl.trigger('next.owl.carousel'); }); } } } /* 4. Init SVG */ function initSvg() { jQuery('img.svg').each(function() { var $img = jQuery(this); var imgID = $img.attr('id'); var imgClass = $img.attr('class'); var imgURL = $img.attr('src'); jQuery.get(imgURL, function(data) { // Get the SVG tag, ignore the rest var $svg = jQuery(data).find('svg'); // Add replaced image's ID to the new SVG if(typeof imgID !== 'undefined') { $svg = $svg.attr('id', imgID); } // Add replaced image's classes to the new SVG if(typeof imgClass !== 'undefined') { $svg = $svg.attr('class', imgClass+' replaced-svg'); } // Remove any invalid XML tags as per http://validator.w3.org $svg = $svg.removeAttr('xmlns:a'); // Replace image with new SVG $img.replaceWith($svg); }, 'xml'); }); } /* 5. Initialize Hamburger */ function initHamburger() { if($('.hamburger_container').length) { var hamb = $('.hamburger_container'); hamb.on('click', function(event) { event.stopPropagation(); if(!menuActive) { openMenu(); $(document).one('click', function cls(e) { if($(e.target).hasClass('menu_mm')) { $(document).one('click', cls); } else { closeMenu(); } }); } else { $('.menu_container').removeClass('active'); menuActive = false; } }); } } function openMenu() { var fs = $('.menu_container'); fs.addClass('active'); hambActive = true; menuActive = true; } function closeMenu() { var fs = $('.menu_container'); fs.removeClass('active'); hambActive = false; menuActive = false; } /* 6. Initialize Testimonials Slider */ function initTestimonialsSlider() { if($('.testimonials_slider').length) { var owl1 = $('.testimonials_slider'); owl1.owlCarousel( { items:1, loop:true, nav:false, autoplay:true, autoplayTimeout:5000, smartSpeed:1000 }); } } /* 7. Initialize Parallax */ function initParallax() { // Add parallax effect to home slider if($('.slider_prlx').length) { var homeBcg = $('.slider_prlx'); var homeBcgScene = new ScrollMagic.Scene({ triggerElement: homeBcg, triggerHook: 1, duration: "100%" }) .setTween(TweenMax.to(homeBcg, 1, {y: '15%', ease:Power0.easeNone})) .addTo(ctrl); } // Add parallax effect to every element with class prlx // Add class prlx_parent to the parent of the element if($('.prlx_parent').length && $('.prlx').length) { var elements = $('.prlx_parent'); elements.each(function() { var ele = this; var bcg = $(ele).find('.prlx'); var slideParallaxScene = new ScrollMagic.Scene({ triggerElement: ele, triggerHook: 1, duration: "200%" }) .setTween(TweenMax.from(bcg, 1, {y: '-30%', ease:Power0.easeNone})) .addTo(ctrl); }); } } });