/* ----------------------------------------------------------------
[ Custom settings ]
01. ScrollIt
02. Preloader
03. Navbar scrolling background
04. Close navbar-collapse when a clicked
05. Sections background image from data background
06. Slider-Fade owlCarousel
07. Works owlCarousel
08. Services owlCarousel
09. Gallery owlCarousel
10. Blog owlCarousel
11. Team owlCarousel
12. Clients owlCarousel
13. Testimonials owlCarousel
14. MagnificPopup
15. Accordion
16. Isotope Active Masonry Gallery
17. Animations
18. YouTubePopUp
19. Parallaxie
20. Tooltip
21. Wow Animated
22. Splitting Text
23. Reveal Effect
24. Scroll back to top
25. Contact Form
26. Skills circle
------------------------------------------------------------------- */
jQuery( document ).ready( function( $ ) {
'use strict';
var wind = $(window);
// ScrollIt
$.scrollIt({
upKey: 38, // key code to navigate to the next section
downKey: 40, // key code to navigate to the previous section
easing: 'swing', // the easing function for animation
scrollTime: 600, // how long (in ms) the animation takes
activeClass: 'active', // class given to the active nav element
onPageChange: null, // function(pageIndex) that is called when page is changed
topOffset: -70 // offste (in px) for fixed top navigation
});
// Preloader
$("#preloader").fadeOut(500);
$(".preloader-bg").delay(500).fadeOut(500);
var wind = $(window);
// Navbar scrolling background
wind.on("scroll", function () {
var bodyScroll = wind.scrollTop(),
navbar = $(".navbar"),
logo = $(".navbar .logo1> img");
if (bodyScroll > 100) {
navbar.addClass("nav-scroll");
logo.attr('src', 'https://shthemes.net/demosd/acens/wp-content/uploads/2024/03/logo-dark.png');
} else {
navbar.removeClass("nav-scroll");
logo.attr('src', 'https://shthemes.net/demosd/acens/wp-content/uploads/2024/03/logo-light.png');
}
});
wind.on("scroll", function () {
var bodyScroll = wind.scrollTop(),
navbar = $(".navbar"),
logo = $(".dark .navbar .logo1> img");
if (bodyScroll > 100) {
navbar.addClass("nav-scroll");
logo.attr('src', 'https://shthemes.net/demosd/acens/wp-content/uploads/2024/03/logo-light.png');
} else {
navbar.removeClass("nav-scroll");
logo.attr('src', 'https://shthemes.net/demosd/acens/wp-content/uploads/2024/03/logo-light.png');
}
});
// Close navbar-collapse when a clicked
$(".navbar-nav .dropdown-item a").on('click', function () {
$(".navbar-collapse").removeClass("show");
});
// Close mobile menu "on click"
$(function(){
var navMain = $(".scroll-init");
navMain.on("click", "a", null, function () {
navMain.collapse('hide');
});
});
// Sections background image from data background
var pageSection = $(".bg-img, section");
pageSection.each(function (indx) {
if ($(this).attr("data-background")) {
$(this).css("background-image", "url(" + $(this).data("background") + ")");
}
});
// Slider-Fade owlCarousel
var owl = $('.header .owl-carousel');
$('.slider-fade .owl-carousel').owlCarousel({
items: 1,
loop: true,
dots: true,
margin: 0,
mouseDrag: true,
autoplay: true,
autoplayTimeout: 5000,
animateOut: 'fadeOut',
autoplayHoverPause: true,
nav: true,
navText: ['<i class="fa-solid fa-angle-left"></i>', '<i class="fa-solid fa-angle-right"></i>'],
responsiveClass: true,
responsive: {
0: {
nav: false
},
600: {
nav: false
},
1000: {
nav: true
}
}
});
owl.on('changed.owl.carousel', function (event) {
var item = event.item.index - 2; // Position of the current item
$('h6').removeClass('animated fadeInUp');
$('h1').removeClass('animated fadeInUp');
$('p').removeClass('animated fadeInUp');
$('.btn-1').removeClass('animated fadeInUp');
$('.btn-2').removeClass('animated fadeInUp');
$('.owl-item').not('.cloned').eq(item).find('h6').addClass('animated fadeInUp');
$('.owl-item').not('.cloned').eq(item).find('h1').addClass('animated fadeInUp');
$('.owl-item').not('.cloned').eq(item).find('p').addClass('animated fadeInUp');
$('.owl-item').not('.cloned').eq(item).find('.btn-1').addClass('animated fadeInUp');
$('.owl-item').not('.cloned').eq(item).find('.btn-2').addClass('animated fadeInUp');
});
// Works owlCarousel
$('.works .owl-carousel').owlCarousel({
loop: true,
margin: 30,
mouseDrag: true,
autoplay: true,
autoplayTimeout: 5000,
dots: true,
autoplayHoverPause: true,
nav: false,
navText: ['<i class="fa-solid fa-angle-left"></i>', '<i class="fa-solid fa-angle-right"></i>'],
responsiveClass: true,
responsive: {
0: {
items: 1,
dots: true
},
600: {
items: 2
},
1000: {
items: 3
}
}
});
// Services owlCarousel
$('.services .owl-carousel').owlCarousel({
loop: true,
margin: 30,
mouseDrag: true,
autoplay: false,
autoplayTimeout: 5000,
dots: true,
autoplayHoverPause: true,
nav: false,
navText: ['<i class="fa-solid fa-angle-left"></i>', '<i class="fa-solid fa-angle-right"></i>'],
responsiveClass: true,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3
}
}
});
// Gallery owlCarousel
$('.gallery .owl-carousel').owlCarousel({
loop: true
, margin: 0
, mouseDrag: true
, autoplay: true
, autoplayTimeout: 4000
, dots: false
, nav: false
, navText: ['<i class="fa-solid fa-angle-left"></i>', '<i class="fa-solid fa-angle-right"></i>']
, responsiveClass: true
, responsive: {
0: {
items: 3
, }
, 600: {
items: 4
}
, 1000: {
items: 5
}
}
});
// Blog owlCarousel
$('.blog-home .owl-carousel').owlCarousel({
loop: true
, margin: 30
, mouseDrag: true
, autoplay: false
, autoplayTimeout: 5000
, dots: true
, nav: false
, navText: ['<i class="fa-solid fa-angle-left"></i>', '<i class="fa-solid fa-angle-right"></i>']
, autoplayHoverPause:true
, responsiveClass: true
, responsive: {
0: {
items: 1,
dots: true
, }
, 600: {
items: 2,
dots: true
}
, 1000: {
items: 3
}
}
});
// Blog 2 owlCarousel
$('.blog2 .owl-carousel').owlCarousel({
loop: true
, margin: 30
, mouseDrag: true
, autoplay: false
, autoplayTimeout: 5000
, dots: true
, nav: false
, navText: ['<i class="fa-solid fa-angle-left"></i>', '<i class="fa-solid fa-angle-right"></i>']
, autoplayHoverPause:true
, responsiveClass: true
, responsive: {
0: {
items: 1,
dots: true
, }
, 600: {
items: 2,
dots: true
}
, 1000: {
items: 3
}
}
});
// Team owlCarousel
$('.team .owl-carousel').owlCarousel({
loop: true
, margin: 30
, mouseDrag: true
, autoplay: false
, autoplayTimeout: 5000
, dots: true
, nav: false
, navText: ['<i class="fa-solid fa-angle-left"></i>', '<i class="fa-solid fa-angle-right"></i>']
, autoplayHoverPause:true
, responsiveClass: true
, responsive: {
0: {
items: 1,
nav: false
, }
, 600: {
items: 2,
nav: false
}
, 1000: {
items: 3
}
}
});
// Clients owlCarousel
$('.clients .owl-carousel').owlCarousel({
loop: true
, margin: 30
, mouseDrag: true
, autoplay: true
, autoplayTimeout: 5000
, dots: false
, nav: false
, navText: ['<i class="fa-solid fa-angle-left"></i>', '<i class="fa-solid fa-angle-right"></i>']
, responsiveClass: true
, responsive: {
0: {
margin: 15
, items: 2
}
, 600: {
items: 3
}
, 1000: {
items: 5
}
}
});
// Testimonials owlCarousel
$('.testimonials .owl-carousel').owlCarousel({
loop:true,
margin: 30,
mouseDrag:true,
autoplay: false,
autoplayTimeout: 7000,
dots: true,
nav: false,
navText: ['<i class="fa-solid fa-angle-left"></i>', '<i class="fa-solid fa-angle-right"></i>'],
responsiveClass:true,
responsive:{
0:{
items: 1,
},
600:{
items: 1,
},
1000:{
items: 2,
}
}
});
// Magnific Popup
$(".img-zoom").magnificPopup({
type: "image",
closeOnContentClick: !0,
mainClass: "mfp-fade",
gallery: {
enabled: !0,
navigateByImgClick: !0,
preload: [0, 1]
}
})
$('.magnific-youtube, .magnific-vimeo, .magnific-custom').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 300,
preloader: false,
fixedContentPos: false
});
// Accordion
if ($(".accordion-box").length) {
$(".accordion-box").on("click", ".acc-btn", function () {
var outerBox = $(this).parents(".accordion-box");
var target = $(this).parents(".accordion");
if ($(this).next(".acc-content").is(":visible")) {
//return false;
$(this).removeClass("active");
$(this).next(".acc-content").slideUp(300);
$(outerBox).children(".accordion").removeClass("active-block");
} else {
$(outerBox).find(".accordion .acc-btn").removeClass("active");
$(this).addClass("active");
$(outerBox).children(".accordion").removeClass("active-block");
$(outerBox).find(".accordion").children(".acc-content").slideUp(300);
target.addClass("active-block");
$(this).next(".acc-content").slideDown(300);
}
});
}
// Isotope Active Masonry Gallery
$('.gallery-items').imagesLoaded(function () {
// Add isotope on click filter function
$('.gallery-filter li').on('click', function () {
$(".gallery-filter li").removeClass("active");
$(this).addClass("active");
var selector = $(this).attr('data-filter');
$(".gallery-items").isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
return false;
});
$(".gallery-items").isotope({
itemSelector: '.single-item',
layoutMode: 'masonry',
});
});
// Animations
var contentWayPoint = function () {
var i = 0;
$('.animate-box').waypoint(function (direction) {
if (direction === 'down' && !$(this.element).hasClass('animated')) {
i++;
$(this.element).addClass('item-animate');
setTimeout(function () {
$('body .animate-box.item-animate').each(function (k) {
var el = $(this);
setTimeout(function () {
var effect = el.data('animate-effect');
if (effect === 'fadeIn') {
el.addClass('fadeIn animated');
} else if (effect === 'fadeInLeft') {
el.addClass('fadeInLeft animated');
} else if (effect === 'fadeInRight') {
el.addClass('fadeInRight animated');
} else {
el.addClass('fadeInUp animated');
}
el.removeClass('item-animate');
}, k * 200, 'easeInOutExpo');
});
}, 100);
}
}, {
offset: '85%'
});
};
$(function () {
contentWayPoint();
});
// YouTubePopUp
$("a.vid").YouTubePopUp();
// Parallaxie
$('.parallaxie').parallaxie({
speed: 0.2,
size: "cover"
});
// Tooltip
$('[data-tooltip-tit]').hover(function () {
$('<div class="div-tooltip-tit"></div>').text($(this).attr('data-tooltip-tit')).appendTo('body').fadeIn('slow');
}, function () {
$('.div-tooltip-tit').remove();
}).mousemove(function (e) {
$('.div-tooltip-tit').css({ top: e.pageY + 10, left: e.pageX + 20 })
});
$('[data-tooltip-sub]').hover(function () {
$('<div class="div-tooltip-sub"></div>').text($(this).attr('data-tooltip-sub')).appendTo('body').fadeIn('slow');
}, function () {
$('.div-tooltip-sub').remove();
}).mousemove(function (e) {
$('.div-tooltip-sub').css({ top: e.pageY + 60, left: e.pageX + 20 })
});
// Wow Animated
var wow = new WOW({
animateClass: 'animated',
offset: 100
});
wow.init();
// Splitting Text
$(window).on("load", function () {
Splitting();
});
// Reveal Effect
var scroll = window.requestAnimationFrame
||
// IE Fallback
function (callback) {
window.setTimeout(callback, 3000)
};
var elementsToShow = document.querySelectorAll('.reveal-effect');
function loop() {
Array.prototype.forEach.call(elementsToShow, function (element) {
if (isElementInViewport(element)) {
element.classList.add('animated');
}
});
scroll(loop);
}
// Call the loop for the first time
loop();
// Helper function from: http://stackoverflow.com/a/7557433/274826
function isElementInViewport(el) {
// special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
return (
(rect.top <= 0
&& rect.bottom >= 0)
|| (rect.bottom >= (window.innerHeight || document.documentElement.clientHeight)
&& rect.top <= (window.innerHeight || document.documentElement.clientHeight))
|| (rect.top >= 0
&& rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))
);
}
// Scroll back to top
var progressPath = document.querySelector('.progress-wrap path');
var pathLength = progressPath.getTotalLength();
progressPath.style.transition = progressPath.style.WebkitTransition = 'none';
progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;
progressPath.style.strokeDashoffset = pathLength;
progressPath.getBoundingClientRect();
progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear';
var updateProgress = function () {
var scroll = $(window).scrollTop();
var height = $(document).height() - $(window).height();
var progress = pathLength - (scroll * pathLength / height);
progressPath.style.strokeDashoffset = progress;
}
updateProgress();
$(window).scroll(updateProgress);
var offset = 150;
var duration = 550;
jQuery(window).on('scroll', function () {
if (jQuery(this).scrollTop() > offset) {
jQuery('.progress-wrap').addClass('active-progress');
} else {
jQuery('.progress-wrap').removeClass('active-progress');
}
});
jQuery('.progress-wrap').on('click', function (event) {
event.preventDefault();
jQuery('html, body').animate({
scrollTop: 0
}, duration);
return false;
})
// Skills circle
var c4 = $('.skills-circle .skill');
var myVal = $(this).attr('data-value');
$(".skills-circle .skill").each(function () {
c4.circleProgress({
startAngle: -Math.PI / 2 * 1,
value: myVal,
thickness: 4,
size: 140,
fill: { color: "#ff5e57" }
});
});
wind.on('scroll', function () {
$(".skill-progress .progres").each(function () {
var bottom_of_object =
$(this).offset().top + $(this).outerHeight();
var bottom_of_window =
$(window).scrollTop() + $(window).height();
var myVal = $(this).attr('data-value');
if (bottom_of_window > bottom_of_object) {
$(this).css({
width: myVal
});
}
});
});
} );