Initialize website project structure
This commit is contained in:
@@ -0,0 +1,431 @@
|
||||
(function ($) {
|
||||
"use strict";
|
||||
|
||||
var $window = $(window);
|
||||
var $body = $('body');
|
||||
|
||||
/* Preloader Effect */
|
||||
$window.on('load', function(){
|
||||
$(".preloader").fadeOut(600);
|
||||
});
|
||||
|
||||
/* Sticky Header */
|
||||
if($('.active-sticky-header').length){
|
||||
$window.on('resize', function(){
|
||||
setHeaderHeight();
|
||||
});
|
||||
|
||||
function setHeaderHeight(){
|
||||
$("header.active-sticky-header").css("height", $('header.active-sticky-header .header-sticky').outerHeight());
|
||||
}
|
||||
|
||||
$window.on("scroll", function() {
|
||||
var fromTop = $(window).scrollTop();
|
||||
setHeaderHeight();
|
||||
var headerHeight = $('header.active-sticky-header .header-sticky').outerHeight()
|
||||
$("header.active-sticky-header .header-sticky").toggleClass("hide", (fromTop > headerHeight + 100));
|
||||
$("header.active-sticky-header .header-sticky").toggleClass("active", (fromTop > 600));
|
||||
});
|
||||
}
|
||||
|
||||
/* Slick Menu JS */
|
||||
$('#menu').slicknav({
|
||||
label : '',
|
||||
prependTo : '.responsive-menu'
|
||||
});
|
||||
|
||||
if($("a[href='#top']").length){
|
||||
$(document).on("click", "a[href='#top']", function() {
|
||||
$("html, body").animate({ scrollTop: 0 }, "slow");
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
/* testimonial Slider JS */
|
||||
if ($('.testimonial-slider').length) {
|
||||
const testimonial_slider = new Swiper('.testimonial-slider .swiper', {
|
||||
slidesPerView : 1,
|
||||
speed: 1000,
|
||||
spaceBetween: 30,
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 5000,
|
||||
},
|
||||
pagination: {
|
||||
el: '.testimonial-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
breakpoints: {
|
||||
768:{
|
||||
slidesPerView: 2,
|
||||
},
|
||||
991:{
|
||||
slidesPerView: 2,
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if ($('.testimonial-slider-silver').length) {
|
||||
const testimonial_slider_silver = new Swiper('.testimonial-slider-silver .swiper', {
|
||||
slidesPerView : 1,
|
||||
speed: 1000,
|
||||
spaceBetween: 30,
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 5000,
|
||||
},
|
||||
pagination: {
|
||||
el: '.testimonial-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.testimonial-button-next-silver',
|
||||
prevEl: '.testimonial-button-prev-silver',
|
||||
},
|
||||
breakpoints: {
|
||||
768:{
|
||||
slidesPerView: 1,
|
||||
},
|
||||
991:{
|
||||
slidesPerView: 1,
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* Skill Bar */
|
||||
if ($('.skills-progress-bar').length) {
|
||||
$('.skills-progress-bar').waypoint(function() {
|
||||
$('.skillbar').each(function() {
|
||||
$(this).find('.count-bar').animate({
|
||||
width:$(this).attr('data-percent')
|
||||
},2000);
|
||||
});
|
||||
},{
|
||||
offset: '70%'
|
||||
});
|
||||
}
|
||||
|
||||
/* Youtube Background Video JS */
|
||||
if ($('#herovideo').length) {
|
||||
var myPlayer = $("#herovideo").YTPlayer();
|
||||
}
|
||||
|
||||
/* Init Counter */
|
||||
if ($('.counter').length) {
|
||||
$('.counter').counterUp({ delay: 6, time: 3000 });
|
||||
}
|
||||
|
||||
/* Image Reveal Animation */
|
||||
if ($('.reveal').length) {
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
let revealContainers = document.querySelectorAll(".reveal");
|
||||
revealContainers.forEach((container) => {
|
||||
let image = container.querySelector("img");
|
||||
let tl = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: container,
|
||||
toggleActions: "play none none none"
|
||||
}
|
||||
});
|
||||
tl.set(container, {
|
||||
autoAlpha: 1
|
||||
});
|
||||
tl.from(container, 1, {
|
||||
xPercent: -100,
|
||||
ease: Power2.out
|
||||
});
|
||||
tl.from(image, 1, {
|
||||
xPercent: 100,
|
||||
scale: 1,
|
||||
delay: -1,
|
||||
ease: Power2.out
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* Text Effect Animation */
|
||||
function initHeadingAnimation() {
|
||||
|
||||
if($('.text-effect').length) {
|
||||
var textheading = $(".text-effect");
|
||||
|
||||
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('text-effect') ){
|
||||
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,
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
if ($('.text-anime-style-1').length) {
|
||||
let staggerAmount = 0.05,
|
||||
translateXValue = 0,
|
||||
delayValue = 0.5,
|
||||
animatedTextElements = document.querySelectorAll('.text-anime-style-1');
|
||||
|
||||
animatedTextElements.forEach((element) => {
|
||||
let animationSplitText = new SplitText(element, { type: "chars, words" });
|
||||
gsap.from(animationSplitText.words, {
|
||||
duration: 1,
|
||||
delay: delayValue,
|
||||
x: 20,
|
||||
autoAlpha: 0,
|
||||
stagger: staggerAmount,
|
||||
scrollTrigger: { trigger: element, start: "top 85%" },
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if ($('.text-anime-style-2').length) {
|
||||
let staggerAmount = 0.03,
|
||||
translateXValue = 20,
|
||||
delayValue = 0.1,
|
||||
easeType = "power2.out",
|
||||
animatedTextElements = document.querySelectorAll('.text-anime-style-2');
|
||||
|
||||
animatedTextElements.forEach((element) => {
|
||||
let animationSplitText = new SplitText(element, { type: "chars, words" });
|
||||
gsap.from(animationSplitText.chars, {
|
||||
duration: 1,
|
||||
delay: delayValue,
|
||||
x: translateXValue,
|
||||
autoAlpha: 0,
|
||||
stagger: staggerAmount,
|
||||
ease: easeType,
|
||||
scrollTrigger: { trigger: element, start: "top 85%"},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if ($('.text-anime-style-3').length) {
|
||||
let animatedTextElements = document.querySelectorAll('.text-anime-style-3');
|
||||
|
||||
animatedTextElements.forEach((element) => {
|
||||
//Reset if needed
|
||||
if (element.animation) {
|
||||
element.animation.progress(1).kill();
|
||||
element.split.revert();
|
||||
}
|
||||
|
||||
element.split = new SplitText(element, {
|
||||
type: "lines,words,chars",
|
||||
linesClass: "split-line",
|
||||
});
|
||||
gsap.set(element, { perspective: 400 });
|
||||
|
||||
gsap.set(element.split.chars, {
|
||||
opacity: 0,
|
||||
x: "50",
|
||||
});
|
||||
|
||||
element.animation = gsap.to(element.split.chars, {
|
||||
scrollTrigger: { trigger: element, start: "top 90%" },
|
||||
x: "0",
|
||||
y: "0",
|
||||
rotateX: "0",
|
||||
opacity: 1,
|
||||
duration: 1,
|
||||
ease: Back.easeOut,
|
||||
stagger: 0.02,
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (document.fonts && document.fonts.ready) {
|
||||
document.fonts.ready.then(() => {
|
||||
initHeadingAnimation();
|
||||
});
|
||||
} else {
|
||||
window.addEventListener("load", initHeadingAnimation);
|
||||
}
|
||||
|
||||
/* Parallaxie js */
|
||||
var $parallaxie = $('.parallaxie');
|
||||
if($parallaxie.length && ($window.width() > 1024))
|
||||
{
|
||||
if ($window.width() > 768) {
|
||||
$parallaxie.parallaxie({
|
||||
speed: 0.55,
|
||||
offset: 0,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/* Zoom Gallery screenshot */
|
||||
$('.gallery-items').magnificPopup({
|
||||
delegate: 'a',
|
||||
type: 'image',
|
||||
closeOnContentClick: false,
|
||||
closeBtnInside: false,
|
||||
mainClass: 'mfp-with-zoom',
|
||||
image: {
|
||||
verticalFit: true,
|
||||
},
|
||||
gallery: {
|
||||
enabled: true
|
||||
},
|
||||
zoom: {
|
||||
enabled: true,
|
||||
duration: 300, // don't foget to change the duration also in CSS
|
||||
opener: function(element) {
|
||||
return element.find('img');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/* Contact form validation */
|
||||
var $contactform = $("#contactForm");
|
||||
$contactform.validator({focus: false}).on("submit", function (event) {
|
||||
if (!event.isDefaultPrevented()) {
|
||||
event.preventDefault();
|
||||
submitForm();
|
||||
}
|
||||
});
|
||||
|
||||
function submitForm(){
|
||||
/* Ajax call to submit form */
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "form-process.php",
|
||||
data: $contactform.serialize(),
|
||||
success : function(text){
|
||||
if (text === "success"){
|
||||
formSuccess();
|
||||
} else {
|
||||
submitMSG(false,text);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function formSuccess(){
|
||||
$contactform[0].reset();
|
||||
submitMSG(true, "Message Sent Successfully!")
|
||||
}
|
||||
|
||||
function submitMSG(valid, msg){
|
||||
if(valid){
|
||||
var msgClasses = "h4 text-success";
|
||||
} else {
|
||||
var msgClasses = "h4 text-danger";
|
||||
}
|
||||
$("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
|
||||
}
|
||||
/* Contact form validation end */
|
||||
|
||||
/* Animated Wow Js */
|
||||
new WOW().init();
|
||||
|
||||
/* Popup Video */
|
||||
if ($('.popup-video').length) {
|
||||
$('.popup-video').magnificPopup({
|
||||
type: 'iframe',
|
||||
mainClass: 'mfp-fade',
|
||||
removalDelay: 160,
|
||||
preloader: false,
|
||||
fixedContentPos: true
|
||||
});
|
||||
}
|
||||
|
||||
/* Projects Item (filtering) Start */
|
||||
$window.on( "load", function(){
|
||||
if( $(".project-item-list").length ) {
|
||||
|
||||
/* Init Isotope */
|
||||
var $menuitem = $(".project-item-list").isotope({
|
||||
itemSelector: ".project-item-box",
|
||||
layoutMode: "masonry",
|
||||
masonry: {
|
||||
// use outer width of grid-sizer for columnWidth
|
||||
columnWidth: 1,
|
||||
}
|
||||
});
|
||||
|
||||
/* Filter items on click */
|
||||
var $menudisesnav = $(".project-nav li a");
|
||||
$menudisesnav.on('click', function (e) {
|
||||
|
||||
var filterValue = $(this).attr('data-filter');
|
||||
$menuitem.isotope({
|
||||
filter: filterValue
|
||||
});
|
||||
|
||||
$menudisesnav.removeClass("active-btn");
|
||||
$(this).addClass("active-btn");
|
||||
e.preventDefault();
|
||||
});
|
||||
$menuitem.isotope({ filter: ".first" });
|
||||
}
|
||||
});
|
||||
/* Projects Item (filtering) End */
|
||||
|
||||
/* Service Item List Start */
|
||||
var $services_item_list = $('.services-item-list');
|
||||
if ($services_item_list.length) {
|
||||
var $service_item = $services_item_list.find('.service-item');
|
||||
|
||||
if ($service_item.length) {
|
||||
$service_item.on({
|
||||
mouseenter: function () {
|
||||
if (!$(this).hasClass('active')) {
|
||||
$service_item.removeClass('active');
|
||||
$(this).addClass('active');
|
||||
}
|
||||
},
|
||||
mouseleave: function () {
|
||||
// Optional: Add logic for mouse leave if needed
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
/* Service Item List End */
|
||||
|
||||
/* Service Item List gold Start */
|
||||
var $services_item_list_gold = $('.services-item-list-gold');
|
||||
if ($services_item_list_gold.length) {
|
||||
var $service_item_gold = $services_item_list_gold.find('.service-item-gold');
|
||||
|
||||
if ($service_item_gold.length) {
|
||||
$service_item_gold.on({
|
||||
mouseenter: function () {
|
||||
if (!$(this).hasClass('active')) {
|
||||
$service_item_gold.removeClass('active');
|
||||
$(this).addClass('active');
|
||||
}
|
||||
},
|
||||
mouseleave: function () {
|
||||
// Optional: Add logic for mouse leave if needed
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
/* Service Item List gold End */
|
||||
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user