https://arcchang1236.github.io/js/main.js

1 AOS.init({
2 	duration: 800,
3 	easing: 'slide'
4 });
5
6(function($) {
7
8	"use strict";
9
10	$(window).stellar({
11    responsive: true,
12    parallaxBackgrounds: true,
13    parallaxElements: true,
14    horizontalScrolling: false,
15    hideDistantElements: false,
16    scrollProperty: 'scroll'
17  });
18
19
20	var fullHeight = function() {
21
22		$('.js-fullheight').css('height', $(window).height());
23		$(window).resize(function(){
24			$('.js-fullheight').css('height', $(window).height());
25		});
26
27	};
28	fullHeight();
29
30	// loader
31	var loader = function() {
32		setTimeout(function() { 
33			if($('#ftco-loader').length > 0) {
34				$('#ftco-loader').removeClass('show');
35			}
36		}, 1);
37	};
38	loader();
39
40	// Scrollax
41   $.Scrollax();
42
43
44   var burgerMenu = function() {
45
46		$('.js-colorlib-nav-toggle').on('click', function(event){
47			event.preventDefault();
48			var $this = $(this);
49
50			if ($('body').hasClass('offcanvas')) {
51				$this.removeClass('active');
52				$('body').removeClass('offcanvas');	
53			} else {
54				$this.addClass('active');
55				$('body').addClass('offcanvas');	
56			}
57		});
58	};
59	burgerMenu();
60
61	// Click outside of offcanvass
62	var mobileMenuOutsideClick = function() {
63
64		$(document).click(function (e) {
65	    var container = $("#colorlib-aside, .js-colorlib-nav-toggle");
66	    if (!container.is(e.target) && container.has(e.target).length === 0) {
67
68	    	if ( $('body').hasClass('offcanvas') ) {
69
70    			$('body').removeClass('offcanvas');
71    			$('.js-colorlib-nav-toggle').removeClass('active');
72			
73	    	}
74	    	
75	    }
76		});
77
78		$(window).scroll(function(){
79			if ( $('body').hasClass('offcanvas') ) {
80
81    			$('body').removeClass('offcanvas');
82    			$('.js-colorlib-nav-toggle').removeClass('active');
83			
84	    	}
85		});
86
87	};
88	mobileMenuOutsideClick();
89
90	var carousel = function() {
91		$('.home-slider').owlCarousel({
92	    loop:true,
93	    autoplay: true,
94	    margin:0,
95	    animateOut: 'fadeOut',
96	    animateIn: 'fadeIn',
97	    nav:false,
98	    autoplayHoverPause: false,
99	    items: 1,
100	    navText : ["<span class='ion-md-arrow-back'></span>","<span class='ion-chevron-right'></span>"],
101	    responsive:{
102	      0:{
103	        items:1
104	      },
105	      600:{
106	        items:1
107	      },
108	      1000:{
109	        items:1
110	      }
111	    }
112		});
113
114		$('.author-slider').owlCarousel({
115			autoplay: true,
116			loop: true,
117			items:1,
118			margin: 30,
119			stagePadding: 0,
120			nav: true,
121			dots: true,
122			navText: ['<span class="ion-ios-arrow-back">', '<span class="ion-ios-arrow-forward">'],
123			responsive:{
124				0:{
125					items: 1
126				},
127				600:{
128					items: 1
129				},
130				1000:{
131					items: 1
132				}
133			}
134		});
135
136	};
137	carousel();
138
139	
140
141	var contentWayPoint = function() {
142		var i = 0;
143		$('.ftco-animate').waypoint( function( direction ) {
144
145			if( direction === 'down' && !$(this.element).hasClass('ftco-animated') ) {
146				
147				i++;
148
149				$(this.element).addClass('item-animate');
150				setTimeout(function(){
151
152					$('body .ftco-animate.item-animate').each(function(k){
153						var el = $(this);
154						setTimeout( function () {
155							var effect = el.data('animate-effect');
156							if ( effect === 'fadeIn') {
157								el.addClass('fadeIn ftco-animated');
158							} else if ( effect === 'fadeInLeft') {
159								el.addClass('fadeInLeft ftco-animated');
160							} else if ( effect === 'fadeInRight') {
161								el.addClass('fadeInRight ftco-animated');
162							} else {
163								el.addClass('fadeInUp ftco-animated');
164							}
165							el.removeClass('item-animate');
166						},  k * 50, 'easeInOutExpo' );
167					});
168					
169				}, 100);
170				
171			}
172
173		} , { offset: '95%' } );
174	};
175	contentWayPoint();
176
177	var counter = function() {
178		
179		$('#section-counter').waypoint( function( direction ) {
180
181			if( direction === 'down' && !$(this.element).hasClass('ftco-animated') ) {
182
183				var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
184				$('.number').each(function(){
185					var $this = $(this),
186						num = $this.data('number');
187						console.log(num);
188					$this.animateNumber(
189					  {
190					    number: num,
191					    numberStep: comma_separator_number_step
192					  }, 7000
193					);
194				});
195				
196			}
197
198		} , { offset: '95%' } );
199
200	}
201	counter();
202
203	// Page scroll
204  	$('a.page-scroll').click(function() {
205        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
206          var target = $(this.hash);
207          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
208          if (target.length) {
209            $('html,body').animate({
210              scrollTop: target.offset().top - 40
211            }, 900);
212            return false;

213          }
214        }
215	});
216
217
218	// magnific popup
219	$('.image-popup').magnificPopup({
220    type: 'image',
221    closeOnContentClick: true,
222    closeBtnInside: false,
223    fixedContentPos: true,
224    // mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
225     gallery: {
226      enabled: true,
227      navigateByImgClick: true,
228      preload: [0,1] // Will preload 0 - before current, and 1 after the current image
229    },
230    image: {
231      verticalFit: true
232    },
233    zoom: {
234      enabled: true,
235      duration: 300 // don't foget to change the duration also in CSS
236    }
237  });
238
239  $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
240    disableOn: 700,
241    type: 'iframe',
242    mainClass: 'mfp-fade',
243    removalDelay: 160,
244    preloader: false,
245
246    fixedContentPos: false
247  });
248
249
250
251
252})(jQuery);
253