first commit
This commit is contained in:
numerimondes
842
assets/js/main.js
Normal file
842
assets/js/main.js
Normal file
@@ -0,0 +1,842 @@
|
||||
(function ($) {
|
||||
"use strict";
|
||||
|
||||
$(window).on('load', function () {
|
||||
preloader();
|
||||
wowAnimation();
|
||||
|
||||
});
|
||||
|
||||
/*------------------------------------------
|
||||
= preloader
|
||||
-------------------------------------------*/
|
||||
function preloader() {
|
||||
$('#preloader').fadeOut('slow',function(){
|
||||
$(this).remove();
|
||||
});
|
||||
}
|
||||
|
||||
//gasp
|
||||
gsap.config({
|
||||
nullTargetWarn: false,
|
||||
});
|
||||
|
||||
/*------------------------------------------
|
||||
= back to top
|
||||
-------------------------------------------*/
|
||||
$(window).scroll(function () {
|
||||
if ($(this).scrollTop() > 500) {
|
||||
$('.xb-backtotop').addClass('active');
|
||||
} else {
|
||||
$('.xb-backtotop').removeClass('active');
|
||||
}
|
||||
});
|
||||
$(function () {
|
||||
$(".scroll").on('click', function () {
|
||||
$("html,body").animate({ scrollTop: 0 }, "slow");
|
||||
return false
|
||||
});
|
||||
});
|
||||
|
||||
/*------------------------------------------
|
||||
= sticky header
|
||||
-------------------------------------------*/
|
||||
function stickyHeader() {
|
||||
var scrollDirection = "";
|
||||
var lastScrollPosition = 0;
|
||||
|
||||
// Clone and make header sticky if the element with class 'xb-header' exists
|
||||
if ($('.xb-header').length) {
|
||||
$('.xb-header').addClass('original').clone(true).insertAfter('.xb-header').addClass('xb-header-area-sticky xb-sticky-stt').removeClass('original');
|
||||
}
|
||||
|
||||
// Handle scroll events
|
||||
$(window).on("scroll", function () {
|
||||
var currentScrollPosition = $(window).scrollTop();
|
||||
|
||||
// Determine scroll direction
|
||||
scrollDirection = currentScrollPosition < lastScrollPosition ? "up" : "down";
|
||||
lastScrollPosition = currentScrollPosition;
|
||||
|
||||
// Check if element with ID 'xb-header-area' has class 'is-sticky'
|
||||
if ($("#xb-header-area").hasClass("is-sticky")) {
|
||||
// Add or remove classes based on scroll position for sticky header and mobile header
|
||||
if (lastScrollPosition > 100) {
|
||||
$(".xb-header-area-sticky.xb-sticky-stb").addClass("xb-header-fixed");
|
||||
} else {
|
||||
$(".xb-header-area-sticky.xb-sticky-stb").removeClass("xb-header-fixed");
|
||||
}
|
||||
|
||||
// Add or remove classes for sticky header based on scroll direction
|
||||
if (scrollDirection === "up" && lastScrollPosition > 100) {
|
||||
$(".xb-header-area-sticky.xb-sticky-stt").addClass("xb-header-fixed");
|
||||
} else {
|
||||
$(".xb-header-area-sticky.xb-sticky-stt").removeClass("xb-header-fixed");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
stickyHeader();
|
||||
|
||||
/*------------------------------------------
|
||||
= header search
|
||||
-------------------------------------------*/
|
||||
$(".header-search-btn").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
$(".header-search-form-wrapper").addClass("open");
|
||||
$('.header-search-form-wrapper input[type="search"]').focus();
|
||||
$('.body-overlay').addClass('active');
|
||||
});
|
||||
$(".xb-search-close").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
$(".header-search-form-wrapper").removeClass("open");
|
||||
$("body").removeClass("active");
|
||||
$('.body-overlay').removeClass('active');
|
||||
});
|
||||
|
||||
/*------------------------------------------
|
||||
= sidebar
|
||||
-------------------------------------------*/
|
||||
$('.sidebar-menu-close, .body-overlay').on('click', function () {
|
||||
$('.offcanvas-sidebar').removeClass('active');
|
||||
$('.body-overlay').removeClass('active');
|
||||
});
|
||||
|
||||
$('.offcanvas-sidebar-btn').on('click', function () {
|
||||
$('.offcanvas-sidebar').addClass('active');
|
||||
$('.body-overlay').addClass('active');
|
||||
});
|
||||
$('.body-overlay').on('click', function () {
|
||||
$(this).removeClass('active');
|
||||
$(".header-search-form-wrapper").removeClass("open");
|
||||
});
|
||||
|
||||
|
||||
/*------------------------------------------
|
||||
= mobile menu
|
||||
-------------------------------------------*/
|
||||
$('.xb-nav-hidden li.menu-item-has-children > a').append('<span class="xb-menu-toggle"></span>');
|
||||
$('.xb-header-menu li.menu-item-has-children, .xb-menu-primary li.menu-item-has-children').append('<span class="xb-menu-toggle"></span>');
|
||||
$('.xb-menu-toggle').on('click', function () {
|
||||
if (!$(this).hasClass('active')) {
|
||||
$(this).closest('ul').find('.xb-menu-toggle.active').toggleClass('active');
|
||||
$(this).closest('ul').find('.sub-menu.active').toggleClass('active').slideToggle();
|
||||
}
|
||||
$(this).toggleClass('active');
|
||||
$(this).closest('.menu-item').find('> .sub-menu').toggleClass('active');
|
||||
$(this).closest('.menu-item').find('> .sub-menu').slideToggle();
|
||||
});
|
||||
|
||||
$('.xb-nav-hidden li.menu-item-has-children > a').click(function (e) {
|
||||
var target = $(e.target);
|
||||
if ($(this).attr('href') === '#' && !(target.is('.xb-menu-toggle'))) {
|
||||
e.stopPropagation();
|
||||
if (!$(this).find('.xb-menu-toggle').hasClass('active')) {
|
||||
$(this).closest('ul').find('.xb-menu-toggle.active').toggleClass('active');
|
||||
$(this).closest('ul').find('.sub-menu.active').toggleClass('active').slideToggle();
|
||||
}
|
||||
$(this).find('.xb-menu-toggle').toggleClass('active');
|
||||
$(this).closest('.menu-item').find('> .sub-menu').toggleClass('active');
|
||||
$(this).closest('.menu-item').find('> .sub-menu').slideToggle();
|
||||
}
|
||||
});
|
||||
$(".xb-nav-mobile").on('click', function () {
|
||||
$(this).toggleClass('active');
|
||||
$('.xb-header-menu').toggleClass('active');
|
||||
});
|
||||
|
||||
$(".xb-menu-close, .xb-header-menu-backdrop").on('click', function () {
|
||||
$(this).removeClass('active');
|
||||
$('.xb-header-menu').removeClass('active');
|
||||
});
|
||||
|
||||
/*------------------------------------------
|
||||
= nice select
|
||||
-------------------------------------------*/
|
||||
$('select').niceSelect();
|
||||
|
||||
/*------------------------------------------
|
||||
= data background and bg color
|
||||
-------------------------------------------*/
|
||||
$("[data-background]").each(function () {
|
||||
$(this).css("background-image", "url(" + $(this).attr("data-background") + ") ")
|
||||
})
|
||||
$("[data-bg-color]").each(function () {
|
||||
$(this).css("background-color", $(this).attr("data-bg-color"));
|
||||
|
||||
});
|
||||
|
||||
/*------------------------------------------
|
||||
= aos animation
|
||||
-------------------------------------------*/
|
||||
function wowAnimation() {
|
||||
var wow = new WOW({
|
||||
boxClass: 'wow',
|
||||
animateClass: 'animated',
|
||||
offset: 0,
|
||||
mobile: true,
|
||||
live: true
|
||||
});
|
||||
wow.init();
|
||||
}
|
||||
|
||||
/*------------------------------------------
|
||||
= counter
|
||||
-------------------------------------------*/
|
||||
if ($(".xbo").length) {
|
||||
$('.xbo').appear();
|
||||
$(document.body).on('appear', '.xbo', function (e) {
|
||||
var odo = $(".xbo");
|
||||
odo.each(function () {
|
||||
var countNumber = $(this).attr("data-count");
|
||||
$(this).html(countNumber);
|
||||
});
|
||||
window.xboOptions = {
|
||||
format: 'd',
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
if ($(".xbo_trigger").length) {
|
||||
var odo = $(".xbo_trigger");
|
||||
odo.each(function () {
|
||||
var countNumber = $(this).attr("data-count");
|
||||
var odometerInstance = new Odometer({
|
||||
el: this,
|
||||
value: 0,
|
||||
format: 'd',
|
||||
});
|
||||
odometerInstance.render();
|
||||
odometerInstance.update(countNumber);
|
||||
});
|
||||
$('.xbo_trigger').appear();
|
||||
$(document.body).on('appear', '.xboh', function (e) {
|
||||
});
|
||||
}
|
||||
|
||||
/*------------------------------------------
|
||||
= isotop
|
||||
-------------------------------------------*/
|
||||
$('.grid').imagesLoaded(function () {
|
||||
var $grid = $('.grid').isotope({
|
||||
itemSelector: '.grid-item',
|
||||
percentPosition: true,
|
||||
masonry: {
|
||||
// use outer width of grid-sizer for columnWidth
|
||||
columnWidth: '.grid-item',
|
||||
}
|
||||
});
|
||||
|
||||
// filter items on button click
|
||||
$('.career-menu').on('click', 'button', function () {
|
||||
var filterValue = $(this).attr('data-filter');
|
||||
$grid.isotope({ filter: filterValue });
|
||||
});
|
||||
});
|
||||
|
||||
//for menu active class
|
||||
$('.career-menu button').on('click', function (event) {
|
||||
$(this).siblings('.active').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
/*------------------------------------------
|
||||
= Background Parallaxie - Start
|
||||
-------------------------------------------*/
|
||||
$(document).ready(function () {
|
||||
$('.parallaxie').parallaxie({
|
||||
speed: 0.5,
|
||||
offset: 0,
|
||||
});
|
||||
});
|
||||
|
||||
/*------------------------------------------
|
||||
= smooth scroll
|
||||
-------------------------------------------*/
|
||||
const lenis = new Lenis({
|
||||
duration: .8,
|
||||
smoothWheel: true,
|
||||
});
|
||||
|
||||
function raf(time) {
|
||||
lenis.raf(time);
|
||||
requestAnimationFrame(raf);
|
||||
}
|
||||
requestAnimationFrame(raf);
|
||||
|
||||
|
||||
|
||||
/*------------------------------------------
|
||||
= testimonial slide
|
||||
-------------------------------------------*/
|
||||
var slider = new Swiper(".xb-testimonial-slider", {
|
||||
loop: true,
|
||||
speed: 400,
|
||||
spaceBetween: 30,
|
||||
slidesPerView: 5,
|
||||
centeredSlides: false,
|
||||
autoplay: {
|
||||
enabled: true,
|
||||
delay: 6000
|
||||
},
|
||||
breakpoints: {
|
||||
'1700': {
|
||||
slidesPerView: 5,
|
||||
},
|
||||
'1600': {
|
||||
slidesPerView: 4,
|
||||
},
|
||||
'1024': {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
'768': {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
'576': {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
'0': {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
/*------------------------------------------
|
||||
= testimonial slide
|
||||
-------------------------------------------*/
|
||||
var slider = new Swiper(".ac-testimonial-slider", {
|
||||
loop: true,
|
||||
speed: 400,
|
||||
spaceBetween: 30,
|
||||
slidesPerView: 3,
|
||||
centeredSlides: false,
|
||||
autoplay: {
|
||||
enabled: true,
|
||||
delay: 6000
|
||||
},
|
||||
breakpoints: {
|
||||
'1600': {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
'1200': {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
'1024': {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
'768': {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
'576': {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
'0': {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
/*------------------------------------------
|
||||
= blog slide
|
||||
-------------------------------------------*/
|
||||
var slider = new Swiper(".blog-slider", {
|
||||
loop: true,
|
||||
speed: 400,
|
||||
spaceBetween: 30,
|
||||
slidesPerView: 1,
|
||||
centeredSlides: false,
|
||||
autoplay: {
|
||||
enabled: true,
|
||||
delay: 6000
|
||||
},
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
breakpoints: {
|
||||
'1600': {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
'1024': {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
'768': {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
'576': {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
'0': {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
/*------------------------------------------
|
||||
= ai-testimonial slide
|
||||
-------------------------------------------*/
|
||||
var swiper = new Swiper(".ai-testimonial-slider-nav", {
|
||||
loop: true,
|
||||
spaceBetween: 0,
|
||||
slidesPerView: 1,
|
||||
freeMode: true,
|
||||
effect: "fade",
|
||||
watchSlidesProgress: true,
|
||||
allowTouchMove: true,
|
||||
breakpoints: {
|
||||
'992': {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
'768': {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
'576': {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
'0': {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
var swiper2 = new Swiper(".ai-testimonial-slider-img", {
|
||||
loop: true,
|
||||
spaceBetween: 0,
|
||||
slidesPerView: 1,
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
autoplay: {
|
||||
enabled: true,
|
||||
delay: 6000
|
||||
},
|
||||
thumbs: {
|
||||
swiper: swiper,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
/*------------------------------------------
|
||||
= inhover active
|
||||
-------------------------------------------*/
|
||||
$(".xb-mouseenter").on('mouseenter', function () {
|
||||
$(".xb-mouseenter").removeClass("active");
|
||||
$(this).addClass("active");
|
||||
});
|
||||
$(".xb-mouseenter2").on('mouseenter', function () {
|
||||
$(".xb-mouseenter2").removeClass("active");
|
||||
$(this).addClass("active");
|
||||
});
|
||||
|
||||
/*------------------------------------------
|
||||
= click button active
|
||||
-------------------------------------------*/
|
||||
$(function () {
|
||||
$('.category li').on('click', function () {
|
||||
var active = $('.category li.active');
|
||||
active.removeClass('active');
|
||||
$(this).addClass('active');
|
||||
});
|
||||
});
|
||||
|
||||
/*------------------------------------------
|
||||
= magnificPopup
|
||||
-------------------------------------------*/
|
||||
$('.popup-image').magnificPopup({
|
||||
type: 'image',
|
||||
gallery: {
|
||||
enabled: true
|
||||
}
|
||||
});
|
||||
$('.popup-video').magnificPopup({
|
||||
type: 'iframe',
|
||||
mainClass: 'mfp-zoom-in',
|
||||
});
|
||||
|
||||
/*------------------------------------------
|
||||
= Accordion Box
|
||||
-------------------------------------------*/
|
||||
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_body").is(":visible")) {
|
||||
$(this).removeClass("active");
|
||||
$(this).next(".acc_body").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_body").slideUp(300);
|
||||
target.addClass("active-block");
|
||||
$(this).next(".acc_body").slideDown(300);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*------------------------------------------
|
||||
= marquee
|
||||
-------------------------------------------*/
|
||||
$('.marquee-left').marquee({
|
||||
speed: 20,
|
||||
gap: 0,
|
||||
delayBeforeStart: 0,
|
||||
direction: 'left',
|
||||
duplicated: true,
|
||||
pauseOnHover: false,
|
||||
startVisible: true,
|
||||
});
|
||||
$('.marquee-right').marquee({
|
||||
speed: 20,
|
||||
gap: 0,
|
||||
delayBeforeStart: 0,
|
||||
direction: 'right',
|
||||
duplicated: true,
|
||||
pauseOnHover: false,
|
||||
startVisible: true,
|
||||
});
|
||||
|
||||
/*------------------------------------------
|
||||
= Language Select
|
||||
-------------------------------------------*/
|
||||
const locales = ["en-GB","ar-SA","zh-CN","de-DE","es-ES","fr-FR","hi-IN","it-IT","in-ID","ja-JP","ko-KR","nl-NL","no-NO","pl-PL","pt-BR","sv-SE","fi-FI","th-TH","tr-TR","uk-UA","vi-VN","ru-RU","he-IL"];
|
||||
|
||||
function getFlagSrc(countryCode) {
|
||||
return /^[A-Z]{2}$/.test(countryCode)
|
||||
? `https://flagsapi.com/${countryCode.toUpperCase()}/shiny/64.png`
|
||||
: "";
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
function setSelectedLocale(locale) {
|
||||
const intlLocale = new Intl.Locale(locale);
|
||||
|
||||
const $dropdownContent = $("#language_dropdown > ul");
|
||||
$dropdownContent.empty();
|
||||
|
||||
const otherLocales = locales.filter(loc => loc !== locale);
|
||||
$.each(otherLocales, function (index, otherLocale) {
|
||||
const otherIntlLocale = new Intl.Locale(otherLocale);
|
||||
const otherLangName = new Intl.DisplayNames([otherLocale], { type: "language" }).of(otherIntlLocale.language);
|
||||
|
||||
const $listEl = $("<li>").html(`${otherLangName} <img src="${getFlagSrc(otherIntlLocale.region)}" />`);
|
||||
$listEl.val(otherLocale);
|
||||
|
||||
$listEl.on("mousedown", function () {
|
||||
setSelectedLocale(otherLocale);
|
||||
});
|
||||
|
||||
$dropdownContent.append($listEl);
|
||||
});
|
||||
|
||||
$("#language_active_btn").html(`<span><img src="${getFlagSrc(intlLocale.region)}" /></span> <i class="fa-solid fa-angle-down"></i>`);
|
||||
}
|
||||
|
||||
setSelectedLocale(locales[0]);
|
||||
|
||||
const browserLang = new Intl.Locale(navigator.language).language;
|
||||
$.each(locales, function (index, locale) {
|
||||
const localeLang = new Intl.Locale(locale).language;
|
||||
if (localeLang === browserLang) {
|
||||
setSelectedLocale(locale);
|
||||
return false; // Break loop
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/*------------------------------------------
|
||||
= process trigger
|
||||
-------------------------------------------*/
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const xbProcessItem = document.querySelectorAll(".xb-process-item");
|
||||
const processStep = document.querySelectorAll(".xb-process-step");
|
||||
|
||||
const options = {
|
||||
root: null,
|
||||
threshold: 0.5
|
||||
};
|
||||
|
||||
let observer = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
let index = Array.from(xbProcessItem).indexOf(entry.target);
|
||||
|
||||
xbProcessItem.forEach(item => item.classList.remove('active'));
|
||||
processStep.forEach(item => item.classList.remove('active'));
|
||||
|
||||
xbProcessItem[index].classList.add('active');
|
||||
processStep[index].classList.add('active');
|
||||
}
|
||||
});
|
||||
}, options);
|
||||
|
||||
xbProcessItem.forEach(item => {
|
||||
observer.observe(item);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
/*------------------------------------------
|
||||
= pricing Toggle btn
|
||||
-------------------------------------------*/
|
||||
function priceToggle(){
|
||||
const toggleBtn = document.getElementById('price-toggle-btn');
|
||||
const time = document.getElementById('time');
|
||||
const dollarPrice = document.getElementById('dollar-price');
|
||||
|
||||
if (!toggleBtn || !time || !dollarPrice) return;
|
||||
|
||||
toggleBtn.addEventListener('click', function () {
|
||||
const isActive = this.classList.toggle('active');
|
||||
|
||||
if (isActive) {
|
||||
dollarPrice.innerText = dollarPrice.dataset.priceYear || '';
|
||||
time.innerText = time.dataset.timeYear || '';
|
||||
} else {
|
||||
dollarPrice.innerText = dollarPrice.dataset.priceMonth || '';
|
||||
time.innerText = time.dataset.timeMonth || '';
|
||||
}
|
||||
});
|
||||
}
|
||||
priceToggle();
|
||||
|
||||
/*------------------------------------------
|
||||
= Text reveal With Scroll
|
||||
-------------------------------------------*/
|
||||
if($('.xb-text-reveal').length) {
|
||||
var textheading = $(".xb-text-reveal");
|
||||
|
||||
if(textheading.length == 0) return; gsap.registerPlugin(SplitText); textheading.each(function(index, el) {
|
||||
|
||||
el.split = new SplitText(el, {
|
||||
type: "lines,words,chars",
|
||||
linesClass: "split-line"
|
||||
});
|
||||
|
||||
if( $(el).hasClass('xb-text-reveal') ){
|
||||
gsap.set(el.split.chars, {
|
||||
opacity: .3,
|
||||
x: "-7",
|
||||
});
|
||||
}
|
||||
el.anim = gsap.to(el.split.chars, {
|
||||
scrollTrigger: {
|
||||
trigger: el,
|
||||
start: "top 92%",
|
||||
end: "top 60%",
|
||||
markers: false,
|
||||
scrub: 1,
|
||||
},
|
||||
|
||||
x: "0",
|
||||
y: "0",
|
||||
opacity: 1,
|
||||
duration: .7,
|
||||
stagger: 0.2,
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
/*------------------------------------------
|
||||
= project section animation
|
||||
-------------------------------------------*/
|
||||
function ptojectScale(){
|
||||
let tl = gsap.timeline();
|
||||
let pr = gsap.matchMedia();
|
||||
pr.add("(min-width: 767px)", () => {
|
||||
let otherSections = document.querySelectorAll('.des-portfolio-panel')
|
||||
otherSections.forEach((section, index) => {
|
||||
gsap.set(otherSections, {
|
||||
scale: 1,
|
||||
});
|
||||
tl.to(section, {
|
||||
scale: .8,
|
||||
scrollTrigger: {
|
||||
trigger: section,
|
||||
pin: section,
|
||||
scrub: 1,
|
||||
start: 'top 0',
|
||||
end: "bottom 60%",
|
||||
endTrigger: '.des-portfolio-wrap',
|
||||
pinSpacing: false,
|
||||
markers: false,
|
||||
},
|
||||
})
|
||||
})
|
||||
});
|
||||
}
|
||||
ptojectScale();
|
||||
|
||||
/*------------------------------------------
|
||||
= auto tab class change animation
|
||||
-------------------------------------------*/
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
let tabs = document.querySelectorAll('.xb-video-nav .nav-link');
|
||||
if (!tabs.length) return;
|
||||
|
||||
let index = 0;
|
||||
let intervalTime = 3000;
|
||||
|
||||
setInterval(() => {
|
||||
index = (index + 1) % tabs.length;
|
||||
|
||||
if (typeof bootstrap !== "undefined" && bootstrap.Tab) {
|
||||
let nextTab = new bootstrap.Tab(tabs[index]);
|
||||
nextTab.show();
|
||||
}
|
||||
}, intervalTime);
|
||||
});
|
||||
|
||||
|
||||
/*------------------------------------------
|
||||
= hover class active and change elements
|
||||
-------------------------------------------*/
|
||||
function brand_animation() {
|
||||
var element = $(".ai-brand-list .current");
|
||||
|
||||
function activeBrandList(e) {
|
||||
if (!e || !e.length) return;
|
||||
|
||||
e.closest("li").removeClass("mleave").addClass("current");
|
||||
e.closest("li").siblings().removeClass("current").addClass("mleave");
|
||||
}
|
||||
|
||||
$(".ai-brand-list li").on("mouseenter", function () {
|
||||
var e = $(this);
|
||||
var index = e.index();
|
||||
|
||||
activeBrandList(e);
|
||||
$(".ai-brand-logo li").removeClass("active").eq(index).addClass("active");
|
||||
});
|
||||
|
||||
$(".ai-brand-list").on("mouseleave", function () {
|
||||
element = $(".ai-brand-list .current");
|
||||
var index = element.index();
|
||||
|
||||
activeBrandList(element);
|
||||
$(".ai-brand-logo li").removeClass("active").eq(index).addClass("active");
|
||||
element.closest("li").siblings().removeClass("mleave");
|
||||
});
|
||||
|
||||
$(".ai-brand-list li").on("click", function () {
|
||||
$(".ai-brand-list li").removeClass("current");
|
||||
$(this).addClass("current");
|
||||
|
||||
var index = $(this).index();
|
||||
$(".ai-brand-logo li").removeClass("active").eq(index).addClass("active");
|
||||
});
|
||||
|
||||
activeBrandList(element);
|
||||
}
|
||||
brand_animation();
|
||||
|
||||
|
||||
/*------------------------------------------
|
||||
= hover class active and change elements
|
||||
-------------------------------------------*/
|
||||
function download_book_animation() {
|
||||
var element = $(".ai-download-book-list .current");
|
||||
|
||||
function activeBookList(e) {
|
||||
if (!e || !e.length) return;
|
||||
|
||||
e.removeClass("mleave").addClass("current");
|
||||
e.siblings().removeClass("current").addClass("mleave");
|
||||
}
|
||||
|
||||
$(".ai-download-book-list .list").on("mouseenter", function () {
|
||||
var e = $(this);
|
||||
var index = e.index();
|
||||
|
||||
activeBookList(e);
|
||||
$(".ai-download-book .book-item").removeClass("active").eq(index).addClass("active");
|
||||
});
|
||||
|
||||
$(".ai-download-book-list").on("mouseleave", function () {
|
||||
element = $(".ai-download-book-list .current");
|
||||
var index = element.index();
|
||||
|
||||
activeBookList(element);
|
||||
$(".ai-download-book .book-item").removeClass("active").eq(index).addClass("active");
|
||||
element.siblings().removeClass("mleave");
|
||||
});
|
||||
|
||||
$(".ai-download-book-list .list").on("click", function () {
|
||||
$(".ai-download-book-list .list").removeClass("current");
|
||||
$(this).addClass("current");
|
||||
|
||||
var index = $(this).index();
|
||||
$(".ai-download-book .book-item").removeClass("active").eq(index).addClass("active");
|
||||
});
|
||||
|
||||
activeBookList(element);
|
||||
}
|
||||
|
||||
download_book_animation();
|
||||
|
||||
|
||||
/*------------------------------------------
|
||||
= project sticky
|
||||
-------------------------------------------*/
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const items = document.querySelectorAll(".xb-project-item");
|
||||
const paginations = document.querySelectorAll(".xb-project-pagination li");
|
||||
|
||||
if (!items.length || !paginations.length) return;
|
||||
|
||||
items.forEach((item) => {
|
||||
item.style.transition = "opacity 0.6s ease";
|
||||
item.style.opacity = "1";
|
||||
});
|
||||
|
||||
function updateActive() {
|
||||
let indexToActivate = 0;
|
||||
let triggerLine = window.innerHeight * 0.3;
|
||||
|
||||
items.forEach((item, index) => {
|
||||
const rect = item.getBoundingClientRect();
|
||||
if (rect.top <= triggerLine) {
|
||||
indexToActivate = index;
|
||||
}
|
||||
});
|
||||
|
||||
// pagination update
|
||||
paginations.forEach((el) => el.classList.remove("active"));
|
||||
if (paginations[indexToActivate]) {
|
||||
paginations[indexToActivate].classList.add("active");
|
||||
}
|
||||
|
||||
// fade effect
|
||||
items.forEach((item, i) => {
|
||||
if (i === indexToActivate) {
|
||||
item.style.opacity = "1";
|
||||
} else if (i < indexToActivate) {
|
||||
item.style.opacity = "0.3";
|
||||
} else {
|
||||
item.style.opacity = "1";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener("scroll", updateActive);
|
||||
updateActive();
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
})(jQuery);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user