https://wang-4f211.web.app/js/portfolio.js

1$(document).ready( function() {
2
3	var itemSelector = '.grid-item'; 
4
5	var $container = $('#container').isotope({
6		itemSelector: itemSelector,
7		masonry: {
8		  columnWidth: itemSelector,
9		  isFitWidth: true
10		}
11	});
12
13	//Ascending order
14	var responsiveIsotope = [
15		[480, 7],
16		[720, 10]
17	];
18
19	var itemsPerPageDefault = 12;
20	var itemsPerPage = defineItemsPerPage();
21	var currentNumberPages = 1;
22	var currentPage = 1;
23	var currentFilter = '*';
24	var filterAtribute = 'data-filter';
25	var pageAtribute = 'data-page';
26	var pagerClass = 'isotope-pager';
27
28	function changeFilter(selector) {
29		$container.isotope({
30			filter: selector
31		});
32	}
33
34
35	function goToPage(n) {
36		currentPage = n;
37
38		var selector = itemSelector;
39			selector += ( currentFilter != '*' ) ? '['+filterAtribute+'="'+currentFilter+'"]' : '';
40			selector += '['+pageAtribute+'="'+currentPage+'"]';
41
42		changeFilter(selector);
43	}
44
45	function defineItemsPerPage() {
46		var pages = itemsPerPageDefault;
47
48		for( var i = 0; i < responsiveIsotope.length; i++ ) {
49			if( $(window).width() <= responsiveIsotope[i][0] ) {
50				pages = responsiveIsotope[i][1];
51				break;
52			}
53
54			
55
56		}
57
58		return pages;
59	}
60	
61	function setPagination() {
62
63		var SettingsPagesOnItems = function(){
64
65			var itemsLength = $container.children(itemSelector).length;
66			
67			var pages = Math.ceil(itemsLength / itemsPerPage);
68			var item = 1;
69			var page = 1;
70			var selector = itemSelector;
71				selector += ( currentFilter != '*' ) ? '['+filterAtribute+'="'+currentFilter+'"]' : '';
72			
73			$container.children(selector).each(function(){
74				if( item > itemsPerPage ) {
75					page++;
76					item = 1;
77				}
78				$(this).attr(pageAtribute, page);
79				item++;
80			});
81
82			currentNumberPages = page;
83
84		}();
85
86		var CreatePagers = function() {
87
88			var $isotopePager = ( $('.'+pagerClass).length == 0 ) ? $('<div class="'+pagerClass+'"></div>') : $('.'+pagerClass);
89
90			$isotopePager.html('');
91			
92			for( var i = 0; i < currentNumberPages; i++ ) {
93				var $pager = $('<a href="javascript:void(0);" class="pager" '+pageAtribute+'="'+(i+1)+'"></a>');
94					$pager.html(i+1);
95					
96					$pager.click(function(){
97						var page = $(this).eq(0).attr(pageAtribute);
98						goToPage(page);
99					});
100
101				$pager.appendTo($isotopePager);
102			}
103
104			$container.after($isotopePager);
105
106		}();
107
108	}
109
110	setPagination();
111	goToPage(1);
112
113	//Adicionando Event de Click para as categorias
114	$('.filters a').click(function(){
115		var filter = $(this).attr(filterAtribute);
116		currentFilter = filter;
117
118		setPagination();
119		goToPage(1);
120
121
122	});
123
124	//Evento Responsivo
125	$(window).resize(function(){
126		itemsPerPage = defineItemsPerPage();
127		setPagination();
128	});
129
130	
131
132});
133
134
135
136 $(document).ready( function() {   
137
138// filter items on button click
139$('.filter-button-group').on( 'click', 'li', function() {
140  var filterValue = $(this).attr('data-filter');
141  $('.grid').isotope({ filter: filterValue });
142  $('.filter-button-group li').removeClass('active');
143  $(this).addClass('active');
144});
145    })
146	
147
148 $(document).ready( function() {   
149
150// filter items on button click
151$('.isotope-pager').on( 'click', 'a', function() {
152  var filterValue = $(this).attr('data-page');
153
154  $('.isotope-pager a').removeClass('active');
155  $(this).addClass('active');
156});
157    })
158	
159	
160	
161	
162	
163
164// $(document).ready(function(){
165// 	$('.popupimg').magnificPopup({
166// 		type: 'image',
167// 		mainClass: 'mfp-with-zoom', 
168// 		gallery:{
169// 					enabled:true
170// 				},
171
172// 		zoom: {
173// 			enabled: true, 
174
175// 			duration: 300, // duration of the effect, in milliseconds
176// 			easing: 'ease-in-out', // CSS transition easing function
177
178// 			opener: function(openerElement) {
179
180// 				return openerElement.is('img') ? openerElement : openerElement.find('img');
181// 			}
182// 		}
183
184// 	});
185
186// });
187
188const showWork = (type) => {
189    $('#' + type).click();
190    $('html, body').animate({
191        scrollTop: $('#myworks').offset().top
192    }, 500);
193}
194
195const clickbtn = (type) => {
196    $('#' + type).click();
197}
198
199const navTo = (where) => {
200	// console.log(where);
201	$('html, body').animate({
202        scrollTop: $('#' + where).offset().top
203    }, 500);
204	navBar.classList.remove("active");
205	menuBtn.style.opacity = "1";
206	menuBtn.style.pointerEvents = "auto";
207	// body.style.overflowX = "auto";
208	// scrollBtn.style.pointerEvents = "auto";
209}
210
211
212/***** GSAP Scroll Animation ******/
213
214var letterLoad = {
215	".one span" : false,
216	".two span" : false,
217	".three span" : false,
218}
219
220$(window).scroll(function(e){

221  value = $(window).scrollTop();
222//   console.log(value);
223  if(value > 1600 && !letterLoad[".one span"])
224    letterLoading(".one span");
225  if (value > 2500 && !letterLoad[".two span"])
226    letterLoading(".two span");
227  if (value > 3200 && !letterLoad[".three span"])
228    letterLoading(".three span");
229});
230
231// Letter GSAP Loading one
232function letterLoading (target) {
233  letterLoad[target] = true;
234  let tl = gsap.timeline();
235  tl.fromTo(target, {
236      x: -150,
237      y: -50,
238      rotation: -180,
239      scale: 3
240  }, {
241      x: 20,
242      y: 20,
243      rotation: 30,
244      scale:  0.3,
245      duration: 0.24,
246      stagger: 0.05
247  })
248  .to(target, {
249      x: 0,
250      y: 0,
251      scale: 1,
252      rotation: 0,
253      duration: 0.16,
254      stagger: 0.05
255  }, 0.24) // start after the very first one ends
256  .to(target, {
257      opacity: 1,
258      duration: 0.4,
259      stagger: 0.05
260  }, 0);
261}
262
263// Contact ME Animation
264const elts = {
265    text1: document.getElementById("text1"),
266    text2: document.getElementById("text2")
267};
268
269const texts = [
270    "Interested?",
271    "Contact Me"
272];
273
274const morphTime = 1;
275const cooldownTime = 0.25;
276
277let textIndex = texts.length - 1;
278let time = new Date();
279let morph = 0;
280let cooldown = cooldownTime;
281
282elts.text1.textContent = texts[textIndex % texts.length];
283elts.text2.textContent = texts[(textIndex + 1) % texts.length];
284
285function doMorph() {
286    morph -= cooldown;
287    cooldown = 0;
288
289    let fraction = morph / morphTime;
290
291    if (fraction > 1) {
292        cooldown = cooldownTime;
293        fraction = 1;
294    }
295
296    setMorph(fraction);
297}
298
299function setMorph(fraction) {
300    elts.text2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
301    elts.text2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;
302
303    fraction = 1 - fraction;
304    elts.text1.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
305    elts.text1.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;
306
307    elts.text1.textContent = texts[textIndex % texts.length];
308    elts.text2.textContent = texts[(textIndex + 1) % texts.length];
309}
310
311function doCooldown() {
312    morph = 0;
313
314    elts.text2.style.filter = "";
315    elts.text2.style.opacity = "100%";
316
317    elts.text1.style.filter = "";
318    elts.text1.style.opacity = "0%";
319}
320
321function animate() {
322    requestAnimationFrame(animate);
323
324    let newTime = new Date();
325    let shouldIncrementIndex = cooldown > 0;
326    let dt = (newTime - time) / 1500;
327    time = newTime;
328
329    cooldown -= dt;
330
331    if (cooldown <= 0) {
332        if (shouldIncrementIndex) {
333            textIndex++;
334        }
335
336        doMorph();
337    } else {
338        doCooldown();
339    }
340}
341
342animate();