https://selampay.web.app/js/scripts.js

1/*-----------------------------------------------------------------------------------
2
3     Theme Name: SELAMPAY WEBSITE
4    Theme URI: http://
5    Description: The Multi-Purpose Onepage Template
6    Author: El Moustapha SIDI BOUYA
7    Version: 1.0
8
9-----------------------------------------------------------------------------------*/
10
11
12$(function() {
13
14    "use strict";
15
16    var wind = $(window);
17
18
19
20    // scrollIt
21    $.scrollIt({
22      upKey: 38,                // key code to navigate to the next section
23      downKey: 40,              // key code to navigate to the previous section
24      easing: 'swing',          // the easing function for animation
25      scrollTime: 600,          // how long (in ms) the animation takes
26      activeClass: 'active',    // class given to the active nav element
27      onPageChange: null,       // function(pageIndex) that is called when page is changed
28      topOffset: -80            // offste (in px) for fixed top navigation
29    });
30
31
32
33    // navbar scrolling background
34    wind.on("scroll",function () {
35
36        var bodyScroll = wind.scrollTop(),
37            navbar = $(".navbar"),
38            navbloglogo = $(".blog-nav .logo> img"),
39            logo = $(".navbar .logo> img");
40
41        if(bodyScroll > 100){
42
43            navbar.addClass("nav-scroll");
44            logo.attr('src', 'img/logo/logo-d.png');
45
46        }else{
47
48            navbar.removeClass("nav-scroll");
49            logo.attr('src', 'img/logo/logo-l.png');
50            navbloglogo.attr('src', 'img/logo/logo-d.png');
51        }
52    });
53
54    // close navbar-collapse when a  clicked
55    $(".navbar-nav a").on('click', function () {
56        $(".navbar-collapse").removeClass("show");
57    });
58
59
60
61    // progress bar
62    wind.on('scroll', function () {
63        $(".skills-progress span").each(function () {
64            var bottom_of_object = 
65            $(this).offset().top + $(this).outerHeight();
66            var bottom_of_window = 
67            $(window).scrollTop() + $(window).height();
68            var myVal = $(this).attr('data-value');
69            if(bottom_of_window > bottom_of_object) {
70                $(this).css({
71                  width : myVal
72                });
73            }
74        });
75    });
76
77
78
79    // sections background image from data background
80    var pageSection = $(".bg-img, section");
81    pageSection.each(function(indx){
82        
83        if ($(this).attr("data-background")){
84            $(this).css("background-image", "url(" + $(this).data("background") + ")");
85        }
86    });
87
88
89    // === owl-carousel === //
90
91    // Testimonials owlCarousel
92    $('.testimonails .owl-carousel').owlCarousel({
93        items:1,
94        loop:true,
95        margin: 15,
96        mouseDrag:false,
97        autoplay:true,
98        smartSpeed:500
99    });
100
101    // Team owlCarousel
102    $('.team .owl-carousel').owlCarousel({
103        loop:true,
104        margin: 30,
105        mouseDrag:false,
106        autoplay:true,
107        smartSpeed:500,
108        responsiveClass:true,
109        responsive:{
110            0:{
111                items:1
112            },
113            700:{
114                items:2
115            },
116            1000:{
117                items:4
118            }
119        }
120    });
121
122    $('.clients .owl-carousel').owlCarousel({
123        loop:true,
124        margin: 30,
125        mouseDrag:false,
126        autoplay:true,
127        smartSpeed:500,
128        responsiveClass:true,
129        responsive:{
130            0:{
131                items:1
132            },
133            700:{
134                items:2
135            },
136            1000:{
137                items:4
138            }
139        }
140    });
141
142
143    // Blog owlCarousel
144    $('.blog .owl-carousel').owlCarousel({
145        loop:true,
146        margin: 30,
147        mouseDrag:false,
148        autoplay:true,
149        smartSpeed:500,
150        responsiveClass:true,
151        responsive:{
152            0:{
153                items:1
154            },
155            700:{
156                items:2
157            },
158            1000:{
159                items:3
160            }
161        }
162    });

163
164
165    // magnificPopup
166    $('.gallery').magnificPopup({
167        delegate: '.popimg',
168        type: 'image',
169        gallery: {
170            enabled: true
171        }
172    });
173
174    // YouTubePopUp
175    $("a.vid").YouTubePopUp();
176
177
178    // countUp
179    $('.numbers .count').countUp({
180        delay: 10,
181        time: 1500
182    });
183
184
185    // Services Tabs
186    $(".tabs-icon").on("click", ".item", function(){
187
188        var myID = $(this).attr("id");
189
190        $(this).addClass("active").siblings().removeClass("active");
191
192        $("#" + myID + "-content").fadeIn(700).siblings().hide();
193
194    });
195
196
197    // Map Show
198    $(".info").on("click", ".icon-toggle", function(){
199
200        $(".info").toggleClass("map-show");
201        $(".map").toggleClass("o-hidden");
202
203    });
204
205
206});
207
208
209// === window When Loading === //
210
211$(window).on("load",function (){
212
213    var wind = $(window);
214
215    // Preloader
216    $(".loading").fadeOut(500);
217
218
219    // stellar
220    wind.stellar();
221
222
223    // isotope
224    $('.gallery').isotope({
225      // options
226      itemSelector: '.items'
227    });
228
229    var $gallery = $('.gallery').isotope({
230      // options
231    });
232
233    // filter items on button click
234    $('.filtering').on( 'click', 'span', function() {
235
236        var filterValue = $(this).attr('data-filter');
237
238        $gallery.isotope({ filter: filterValue });
239
240    });
241
242    $('.filtering').on( 'click', 'span', function() {
243
244        $(this).addClass('active').siblings().removeClass('active');
245
246    });
247
248
249    // contact form validator
250    $('#contact-form').validator();
251
252    $('#contact-form').on('submit', function (e) {
253        if (!e.isDefaultPrevented()) {
254            var url = "contact.html";
255
256            $.ajax({

257                type: "POST",
258                url: url,
259                data: $(this).serialize(),
260                success: function (data)
261                {
262                    var messageAlert = 'alert-' + data.type;
263                    var messageText = data.message;
264
265                    var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
266                    if (messageAlert && messageText) {
267                        $('#contact-form').find('.messages').html(alertBox);
268                        $('#contact-form')[0].reset();
269                    }
270                }
271            });
272            return false;
273        }
274    });
275
276});
277
278
279// Slider 
280$(document).ready(function() {
281
282    var owl = $('.header .owl-carousel');
283
284
285    // Slider owlCarousel
286    $('.slider .owl-carousel').owlCarousel({
287        items: 1,
288        loop:true,
289        margin: 0,
290        autoplay:true,
291        smartSpeed:500
292    });
293
294    // Slider owlCarousel
295    $('.slider-fade .owl-carousel').owlCarousel({
296        items: 1,
297        loop:true,
298        margin: 0,
299        autoplay:true,
300        smartSpeed:500,
301        animateOut: 'fadeOut'
302    });
303
304    owl.on('changed.owl.carousel', function(event) {
305        var item = event.item.index - 2;     // Position of the current item
306        $('h3').removeClass('animated fadeInLeft');
307        $('h1').removeClass('animated fadeInRight');
308        $('p').removeClass('animated fadeInUp');
309        $('.butn').removeClass('animated zoomIn');
310        $('.owl-item').not('.cloned').eq(item).find('h3').addClass('animated fadeInLeft');
311        $('.owl-item').not('.cloned').eq(item).find('h1').addClass('animated fadeInRight');
312        $('.owl-item').not('.cloned').eq(item).find('p').addClass('animated fadeInUp');
313        $('.owl-item').not('.cloned').eq(item).find('.butn').addClass('animated zoomIn');
314    });
315
316});