https://wata.co/drops.js

1
2window.WataDrops = (function(){
3 
4 
5 const STAGGER = [0, 200, 400, 580];
6 const DURATION = 1600;
7
8 const KEYFRAMES = [
9 { transform: 'translateY(0) scale(0.55)', opacity: 0, offset: 0 },
10 { opacity: 0.85, offset: 0.18 },
11 { opacity: 0.4, offset: 0.85 },
12 { transform: 'translateY(78px) scale(1)', opacity: 0, offset: 1 }
13 ];
14
15 function startDrip(card){
16 const drops = card.querySelectorAll('.ap-prod-drops > span');
17 drops.forEach((d, i) => {
18 
19 if (d._wpAnim && d._wpAnim.playState === 'running') return;
20 d._wpAnim = d.animate(KEYFRAMES, {
21 duration: DURATION,
22 delay: STAGGER[i] || 0,
23 iterations: Infinity,
24 easing: 'cubic-bezier(0.4, 0, 0.7, 1)',
25 fill: 'both'
26 });
27 });
28 }
29
30 function stopDrip(card){
31 const drops = card.querySelectorAll('.ap-prod-drops > span');
32 drops.forEach(d => {
33 if (d._wpAnim) {
34 d._wpAnim.cancel();
35 d._wpAnim = null;
36 }
37 });
38 }
39
40 function init(){
41 const wrappers = [
42 ...document.querySelectorAll('.ap-cat-drinks .ap-prod .ap-prod-img:not(.has-drops)'),
43 ...document.querySelectorAll('.card .card-img:not(.has-drops)'),
44 ...document.querySelectorAll('.card .c-img:not(.c-img-merch):not(.c-img-empty):not(.has-drops)')
45 ];
46
47 wrappers.forEach(wrap => {
48 const card = wrap.closest('.ap-prod, .card');
49 if(!card) return;
50
51 wrap.classList.add('has-drops');
52 card.classList.add('is-droppable');
53
54 const drops = document.createElement('span');
55 drops.className = 'ap-prod-drops';
56 drops.setAttribute('aria-hidden','true');
57 for(let i = 0; i < 4; i++) drops.appendChild(document.createElement('span'));
58 wrap.appendChild(drops);
59
60 
61 card.addEventListener('mouseenter', () => startDrip(card));
62 card.addEventListener('mouseleave', () => stopDrip(card));
63
64 
65 
66 
67 card.addEventListener('touchstart', () => {
68 startDrip(card);
69 clearTimeout(card._fxT);
70 card._fxT = setTimeout(() => stopDrip(card), 3500);
71 }, { passive: true });
72 });
73 }
74
75 if(document.readyState === 'loading'){
76 document.addEventListener('DOMContentLoaded', init);
77 } else {
78 init();
79 }
80
81 return { init };
82})();