(function ($) { "use strict"; // meanmenu $('#mobile-menu').meanmenu({ meanMenuContainer: '.mobile-menu', meanScreenWidth: "992" }); // info-bar $('.info-bar').on('click', function () { $('.extra-info').addClass('info-open'); }) $('.close-icon').on('click', function () { $('.extra-info').removeClass('info-open'); }) // data - background $("[data-background]").each(function () { $(this).css("background-image", "url(" + $(this).attr("data-background") + ")") }) // data - color $("[data-bg-color]").each(function () { $(this).css("background", $(this).attr("data-bg-color")) }) // sticky var wind = $(window); var sticky = $('#sticky-headers'); wind.on('scroll', function () { var scroll = wind.scrollTop(); if (scroll < 100) { sticky.removeClass('sticky'); } else { sticky.addClass('sticky'); } }); // active $('.service-box').on('mouseenter', function () { $(this).addClass('active').parent().siblings().find('.service-box').removeClass('active'); }) // mainSlider function mainSlider() { var BasicSlider = $('.slider-active'); BasicSlider.on('init', function (e, slick) { var $firstAnimatingElements = $('.single-slider:first-child').find('[data-animation]'); doAnimations($firstAnimatingElements); }); BasicSlider.on('beforeChange', function (e, slick, currentSlide, nextSlide) { var $animatingElements = $('.single-slider[data-slick-index="' + nextSlide + '"]').find('[data-animation]'); doAnimations($animatingElements); }); BasicSlider.slick({ autoplay: false, autoplaySpeed: 10000, dots: false, fade: true, arrows: true, prevArrow: '', nextArrow: '', responsive: [ { breakpoint: 1200, settings: { slidesToShow: 1, slidesToScroll: 1, arrows: false, } }, { breakpoint: 991, settings: { slidesToShow: 1, slidesToScroll: 1, arrows: false, } }, { breakpoint: 767, settings: { slidesToShow: 1, slidesToScroll: 1, arrows: false, } } ] }); function doAnimations(elements) { var animationEndEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; elements.each(function () { var $this = $(this); var $animationDelay = $this.data('delay'); var $animationType = 'animated ' + $this.data('animation'); $this.css({ 'animation-delay': $animationDelay, '-webkit-animation-delay': $animationDelay }); $this.addClass($animationType).one(animationEndEvents, function () { $this.removeClass($animationType); }); }); } } mainSlider(); // blog - active $('.postbox__gallery').slick({ dots: false, arrows: true, infinite: true, speed: 300, prevArrow: '', nextArrow: '', slidesToShow: 1, slidesToScroll: 1, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 1, slidesToScroll: 1, infinite: true, } }, { breakpoint: 991, settings: { slidesToShow: 1, slidesToScroll: 1 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] }); // case-active $('.case-active').slick({ dots: false, arrows: true, infinite: true, speed: 300, prevArrow: '', nextArrow: '', slidesToScroll: 1, centerMode: true, centerPadding: '500px', slidesToShow: 1, responsive: [ { breakpoint: 1500, settings: { slidesToShow: 1, slidesToScroll: 1, centerPadding: '300px', } }, { breakpoint: 1200, settings: { slidesToShow: 1, slidesToScroll: 1, centerPadding: '250px', } }, { breakpoint: 992, settings: { slidesToShow: 1, slidesToScroll: 1, centerPadding: '100px', } }, { breakpoint: 767, settings: { slidesToShow: 1, slidesToScroll: 1, centerPadding: '0px', arrows: false, } }, { breakpoint: 550, settings: { slidesToShow: 1, slidesToScroll: 1, centerPadding: '0px', arrows: false, } } ] }); // case-active $('.case-02-active').slick({ dots: false, arrows: false, infinite: true, autoplay:true, speed: 300, prevArrow: '', nextArrow: '', slidesToShow: 4, slidesToScroll: 1, responsive: [ { breakpoint: 1500, settings: { slidesToShow: 3, slidesToScroll: 1, } }, { breakpoint: 1200, settings: { slidesToShow: 2, slidesToScroll: 1, } }, { breakpoint: 992, settings: { slidesToShow: 2, slidesToScroll: 1, } }, { breakpoint: 767, settings: { slidesToShow: 2, slidesToScroll: 1 } }, { breakpoint: 550, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] }); // brand-active $('.brand-active').slick({ dots: false, arrows: false, infinite: true, autoplay:true, speed: 300, prevArrow: '', nextArrow: '', slidesToShow: 5, slidesToScroll: 1, responsive: [ { breakpoint: 1200, settings: { slidesToShow: 5, slidesToScroll: 1, } }, { breakpoint: 992, settings: { slidesToShow: 4, slidesToScroll: 1, } }, { breakpoint: 767, settings: { slidesToShow: 2, slidesToScroll: 1 } }, { breakpoint: 550, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] }); /* counter */ $('.counter').counterUp({ delay: 10, time: 1000 }); /* magnificPopup video view */ $('.popup-video').magnificPopup({ type: 'iframe' }); /* magnificPopup img view */ $('.popup-image').magnificPopup({ type: 'image', gallery: { enabled: true } }); $('#portfolio-grid').imagesLoaded(function () { // init Isotope var $grid = $('#portfolio-grid').isotope({ itemSelector: '.grid-item', percentPosition: true, masonry: { // use outer width of grid-sizer for columnWidth columnWidth: 1 } }); // filter items on button click $('.portfolio-menu').on('click', 'button', function () { var filterValue = $(this).attr('data-filter'); $grid.isotope({ filter: filterValue }); }); }); //for menu active class $('.portfolio-menu button').on('click', function (event) { $(this).siblings('.active').removeClass('active'); $(this).addClass('active'); event.preventDefault(); }); // scrollToTop $.scrollUp({ scrollName: 'scrollUp', // Element ID topDistance: '300', // Distance from top before showing element (px) topSpeed: 300, // Speed back to top (ms) animation: 'fade', // Fade, slide, none animationInSpeed: 200, // Animation in speed (ms) animationOutSpeed: 200, // Animation out speed (ms) scrollText: '', // Text for element activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF' }); // WOW active new WOW().init(); // map function basicmap() { // Basic options for a simple Google Map // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions var mapOptions = { // How zoomed in you want the map to start at (always required) zoom: 11, scrollwheel: false, // The latitude and longitude to center the map (always required) center: new google.maps.LatLng(40.6700, -73.9400), // New York // This is where you would paste any style found on Snazzy Maps. styles: [{ "featureType": "all", "elementType": "geometry.fill", "stylers": [{ "weight": "2.00" }] }, { "featureType": "all", "elementType": "geometry.stroke", "stylers": [{ "color": "#9c9c9c" }] }, { "featureType": "all", "elementType": "labels.text", "stylers": [{ "visibility": "on" }] }, { "featureType": "landscape", "elementType": "all", "stylers": [{ "color": "#f2f2f2" }] }, { "featureType": "landscape", "elementType": "geometry.fill", "stylers": [{ "color": "#ffffff" }] }, { "featureType": "landscape.man_made", "elementType": "geometry.fill", "stylers": [{ "color": "#ffffff" }] }, { "featureType": "poi", "elementType": "all", "stylers": [{ "visibility": "off" }] }, { "featureType": "road", "elementType": "all", "stylers": [{ "saturation": -100 }, { "lightness": 45 }] }, { "featureType": "road", "elementType": "geometry.fill", "stylers": [{ "color": "#eeeeee" }] }, { "featureType": "road", "elementType": "labels.text.fill", "stylers": [{ "color": "#7b7b7b" }] }, { "featureType": "road", "elementType": "labels.text.stroke", "stylers": [{ "color": "#ffffff" }] }, { "featureType": "road.highway", "elementType": "all", "stylers": [{ "visibility": "simplified" }] }, { "featureType": "road.arterial", "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] }, { "featureType": "transit", "elementType": "all", "stylers": [{ "visibility": "off" }] }, { "featureType": "water", "elementType": "all", "stylers": [{ "color": "#46bcec" }, { "visibility": "on" }] }, { "featureType": "water", "elementType": "geometry.fill", "stylers": [{ "color": "#c8d7d4" }] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [{ "color": "#070707" }] }, { "featureType": "water", "elementType": "labels.text.stroke", "stylers": [{ "color": "#ffffff" }] }] }; // Get the HTML DOM element that will contain your map // We are using a div with id="map" seen below in the var mapElement = document.getElementById('contact-map'); // Create the Google Map using our element and options defined above var map = new google.maps.Map(mapElement, mapOptions); // Let's also add a marker while we're at it var marker = new google.maps.Marker({ position: new google.maps.LatLng(40.6700, -73.9400), map: map, title: 'Cryptox' }); } if ($('#contact-map').length != 0) { google.maps.event.addDomListener(window, 'load', basicmap); } if (typeof ($.fn.knob) != 'undefined') { $('.knob').each(function () { var $this = $(this), knobVal = $this.attr('data-rel'); $this.knob({ 'draw': function () { $(this.i).val(this.cv + '%') } }); $this.appear(function () { $({ value: 0 }).animate({ value: knobVal }, { duration: 2000, easing: 'swing', step: function () { $this.val(Math.ceil(this.value)).trigger('change'); } }); }, { accX: 0, accY: -150 }); }); } })(jQuery);