/home/bdqbpbxa/demo-subdomains/settlepay.goodface.com.ua/js/script.js
// Here will be custom scripts
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
function blockBody() {
if ($("html").hasClass("no-scroll")) {
let scrollTop = $("html").attr("data-scroll");
$("html").removeClass("no-scroll");
$("html").attr("style", "");
$("html").css("right", 0 + "px");
$(".header").css("right", 0 + "px");
$(".preloader").css("padding-right", 0 + "px");
$(document).scrollTop(scrollTop);
} else {
let scrollTop = $(document).scrollTop();
$("html").addClass("no-scroll");
$("html").css({
top: "-" + scrollTop + "px",
});
$("html").css("right", scrollbarWidth + "px");
$(".header").css("right", scrollbarWidth + "px");
$(".preloader").css("padding-right", scrollbarWidth + "px");
$("html").attr("data-scroll", scrollTop);
}
}
// Animation scroll
$(window).ready(function () {
if (!$(".line-around").length) return;
let line = $(".line-around");
line.each(function () {
let path = $(this).find("svg path");
let lineLength = path.get(0).getTotalLength();
$(this).addClass("animation");
$(this).attr("data-length", lineLength);
path.attr("stroke-dasharray", `0, ${lineLength}`);
});
});
function animation(scrollTop) {
$(".animation")
.not(".animated")
.each(function () {
let offsetTop = $(this).offset().top - 50;
let windowHeight = window.innerHeight;
if ($(this).hasClass("line-around") && scrollTop + windowHeight > offsetTop) {
$(this).addClass("animated");
let path = $(this).find("path");
let lineLength = $(this).attr("data-length");
path.attr("stroke-dasharray", `${lineLength}, ${lineLength}`);
} else if (scrollTop + windowHeight > offsetTop) {
$(this).addClass("animated");
}
});
}
$(window).scroll(function () {
var scrollTop = $(this).scrollTop();
animation(scrollTop);
});
// Anchor scroll animation
$(".link-scroll").on("click", function (event) {
event.preventDefault();
if ($(this).closest(".mob-menu-block").length) {
blockBody();
$(this).closest(".mob-menu-block").removeClass("active");
$(".header__menu-open").removeClass("active");
$(".header").removeClass("light");
}
var id = $(this).attr("href");
var top = $(id).offset().top - 72;
$("body,html").animate(
{
scrollTop: top,
},
1000
);
});
// Settings for header
let scrollNumber = 0;
$(window).on("scroll", function () {
const header = $(".header-content");
let scroll = $(this).scrollTop();
if (scroll <= 0 && $(".dark-bg").hasClass("active")) {
header.removeClass("hide");
return;
}
if (scroll <= scrollNumber || scroll <= 0) {
header.removeClass("hide");
} else if (scroll > scrollNumber) {
header.addClass("hide");
}
scrollNumber = scroll;
});
$(window).on("load", function () {
if (isPc) {
$(".home-main-card, .footer-main-card").each(function () {
let innerWidth = $(this).find(".--arrow-button span").innerWidth();
$(this).attr("data-width", innerWidth + 8);
$(this).find("span").css("width", 0);
});
}
});
$(".home-main-card, .footer-main-card").on("mouseenter", function () {
let innerWidth = $(this).attr("data-width");
$(this).find("span").css("width", innerWidth);
});
$(".home-main-card, .footer-main-card").on("mouseleave", function () {
$(this).find("span").css("width", 0);
});
function initCardsSlider() {
let succesStorySliderContainers = $(".scrollcards");
succesStorySliderContainers.each(function () {
let succesStorySliderContainer = $(this);
let swiperWrapper = succesStorySliderContainer.find(".swiper-wrapper");
let slidesCount = swiperWrapper.children().length;
let succesStorySlider = new Swiper(succesStorySliderContainer.find(".slider")[0], {
slidesPerView: 1,
spaceBetween: 8,
autoHeight: true,
initialSlide: slidesCount <= 3 ? 1 : 1,
speed: 700,
loop: true,
loopedSlides: slidesCount <= 3 ? 1 : 2,
navigation: {
prevEl: succesStorySliderContainer.find(".nav-pag .prev")[0],
nextEl: succesStorySliderContainer.find(".nav-pag .next")[0],
},
pagination: {
el: succesStorySliderContainer.find(".pagination")[0],
type: "bullets",
clickable: true,
},
on: {
slideChange: function () {
let realIndex = this.realIndex;
this.pagination.update();
this.pagination.bullets[realIndex % slidesCount]?.classList?.add(
"swiper-pagination-bullet-active"
);
},
},
breakpoints: {
1024: {
spaceBetween: 40,
autoHeight: false,
},
},
});
});
}
$(window).on("load", initCardsSlider);
function animateStickySliderSection() {
if (!$(".scrolling-card-wrapper").length) return;
const textCards = gsap.utils.toArray(".scrolling-card-wrapper");
// if (isPc) {
// startPos = "top center";
// endPos = "bottom center";
// } else {
// startPos = "top 60%";
// endPos = "bottom center";
// }
textCards.forEach((card) => {
gsap.to(card, {
scrollTrigger: {
invalidateOnRefresh: true,
start: "top center",
end: "bottom center",
trigger: card,
onUpdate: (self) => {
let el = $(self.trigger);
let menu = el.closest(".scrolling-cards-wrapper");
menu.find(".-active").removeClass("-active");
el.addClass("-active");
ScrollTrigger.refresh(true);
},
},
});
});
}
function setStickyProgressbarPosition() {
let windowHeight = window.innerHeight;
let headerHeight = $(".header").innerHeight();
let progressBar = $(".sticky-progress__progress");
if (!progressBar.length) return;
let topPosition = (windowHeight + headerHeight) / 2 - progressBar.innerHeight() / 2 + 20;
progressBar.css("top", topPosition);
}
$(window).on("scroll", setStickySliderProgress);
$(window).on("load", animateStickySliderSection);
$(window).on("load resize", setStickyProgressbarPosition);
$(window).on("resize", function () {
ScrollTrigger?.refresh();
});
function setStickySliderProgress() {
let parent = $(".scrolling-cards-wrapper");
if (!parent.length) return;
let activeIndex = $(".scrolling-card-wrapper.-active").index();
let progressbarContainer = $(".sticky-progress__progress");
let allSlidesCount = $(".scrolling-card-wrapper").length;
let displayedactiveIndex, displayedAllSlidesCount;
let windowCenter = window.innerHeight / 2;
let progress = parent.offset().top - windowCenter - window.scrollY;
let calcProgress;
if (progress < 0 && Math.abs(progress) < parent.innerHeight()) {
let onePercent = parent.innerHeight() / 100;
calcProgress =
Math.abs(progress / onePercent) + 10 > 100 ? 100 : Math.abs(progress / onePercent) + 10;
}
if (allSlidesCount > 10) {
displayedAllSlidesCount = allSlidesCount;
} else {
displayedAllSlidesCount = "0" + allSlidesCount;
}
if (activeIndex + 1 > 10) {
displayedactiveIndex = activeIndex + 1;
} else {
let preparedIndex = activeIndex + 1;
displayedactiveIndex = `0` + preparedIndex;
}
progressbarContainer.find(".start").html(displayedactiveIndex);
progressbarContainer.find(".end").html(displayedAllSlidesCount);
progressbarContainer.find(".progress-active").css({
height: `${calcProgress}%`,
});
}