CapsTech/assets/js/theme.js

/*
=========================================================
- Table of Contents
=========================================================
- On Window Load
    - Preloader
- On Dom Element Load
    - Bootstrap Essentail
    - Wow Js Init
    - Adjust Header Menu On Scroll Down
    - Smooth Scrolling Effect
    - Hero Parallax (Default Home)
    - Typed Js
    - Hero Mockup Slider
    - Dark Hero Mockup Slider
    - Hero Tab Slider
    - Tab Slider
    - Tab Pricing Table
=========================================================
*/
// On Window Load
$(window).load(function() {
    "use strict";
    // Preloader
    $('.preloader-area').fadeOut();
    $('.preloader-area').delay(350).fadeOut('slow');
    $('body').delay(550);
});

// On Dom Load
(function($) {
    "use strict";
    // Bootstrap Essentail
    $(".embed-responsive iframe").addClass("embed-responsive-item");
    $(".carousel-inner .item:first-child").addClass("active");
    $('[data-toggle="tooltip"]').tooltip();

    // Wow js init
    var wow = new WOW({
        boxClass: 'wow', // animated element css class (default is wow)
        animateClass: 'animated', // animation css class (default is animated)
        offset: 0, // distance to the element when triggering the animation (default is 0)
        mobile: true, // trigger animations on mobile devices (default is true)
        live: true, // act on asynchronously loaded content (default is true)
        callback: function(box) {
            // the callback is fired every time an animation is started
            // the argument that is passed in is the DOM node being animated
        },
        scrollContainer: null // optional scroll container selector, otherwise use window
    });
    wow.init();

    // Adjust Header Menu On Scroll Down
    $(window).scroll(function() {
        var wScroll = $(this).scrollTop();
        var wh = $(window).height();
        if (wScroll > 200) {
            $(".navbar-default").addClass('navbar-dark');
            // $(".scroll-vertical-menu ").css('position','fixed');
            $(".nav-scroll").addClass('navbar-fixed-top');
        } else {
            $(".navbar-default").removeClass('navbar-dark');
            $(".nav-scroll").removeClass('navbar-fixed-top');
        }

        heroParallax();
    });

    // Hide Menu on clike (For Mobile Devices)
    $('.navbar-nav li a').on('click', function() {
        $('.navbar-collapse').removeClass('collapse in').addClass('collapse');
    });
    
    // Smooth Scrolling Effect
    $('.smoothscroll').on('click', function(e) {
        e.preventDefault();
        var target = this.hash;
        var navHeight = $('.navbar-default').height();

        $('html, body').stop().animate({
            'scrollTop': $(target).offset().top - navHeight
        }, 1200);
    });

    // Hero Parallax
    function heroParallax() {
        var scrollPosition = $(window).scrollTop();
        $('.ball').css('left', (-30 - (scrollPosition * .6)) + 'px');
        $('.plant').css('right', (70 - (scrollPosition * .6)) + 'px');
        $('.paper').css('bottom', (-65 - (scrollPosition * .6)) + 'px');
        $('.coffee').css('left', (-190 - (scrollPosition * .6)) + 'px');
        $('.mockup-slider').css('bottom', (200 - (scrollPosition * .6)) + 'px');
    }

    // Typed Js
    $(".lead").typed({
        strings: ["", "Protection"],
        typeSpeed: 100,
    });
    $(".lead-text").typed({
        strings: ["", "For All that You drive or Drives you"],
        typeSpeed: 100,
        startDelay: 1200
    });

    // Hero Mockup Slider
    function mockup_carousel() {
        var owl = $("#mockup-slide");
        owl.owlCarousel({
            loop: true,
            margin: 10,
            responsiveClass: true,
            navigation: true,
            items: 1,
            animateOut: 'fadeOut',
            addClassActive: true,
            dots: false,
            autoplay: true,
            autoplayTimeout: 5000,
            mouseDrag: true,
            touchDrag: true,
            pullDrag: true,
            responsive: {}
        });
    }
    mockup_carousel();

    // Dark Hero Mockup Slider
    function dark_mockup_carousel() {
        var owl = $("#dark-mockup-slide");
        owl.owlCarousel({
            loop: true,
            margin: 10,
            responsiveClass: true,
            navigation: true,
            items: 1,
            animateIn: 'slideInDown',
            animateOut: 'slideOutRight',
            addClassActive: true,
            dots: true,
            autoplay: true,
            autoplayTimeout: 5000,
            mouseDrag: false,
            touchDrag: false,
            pullDrag: false,
            responsive: {}
        });
    }
    dark_mockup_carousel();

    // Hero Tab Slider
    function tab_carousel() {
        var owl = $("#tab-slide");
        owl.owlCarousel({
            loop: true,
            margin: 10,
            responsiveClass: true,
            navigation: true,
            items: 1,
            animateIn: 'slideInDown',
            animateOut: 'slideOutRight',
            addClassActive: true,
            dots: true,
            autoplay: true,
            autoplayTimeout: 5000,
            mouseDrag: false,
            touchDrag: true,
            pullDrag: false,
            responsive: {}
        });
    }
    tab_carousel();


    // Tab Slider
    $('.single-feature-item').on('click', function() {
        $('.single-feature-item').removeClass('active');
        $(this).addClass('active');
        var val = $(this).attr('data-value');
        $('.single-feature-slide img').removeClass('active wow animated fadeIn');
        $('.single-feature-slide').find('img#' + val).addClass('active wow animated fadeIn');
    });

    // Tab Pricing Table
    $('.pricing-pill li').on('click', function() {
        $('.pricing-pill li').removeClass('active');
        $('.pricing-table li').removeClass('active');
        $(this).addClass('active');
        var pricing = $(this).attr('data-value');
        $('.pricing-table li#' + pricing).addClass('active');
    });

    ;

}(jQuery));