Crie incríveis efeitos visuais

' + ''; grid.appendChild(fig); var cmp = fig.querySelector('.uv-cmp'); var va = fig.querySelector('.uv-v-ant'); var vd = fig.querySelector('.uv-v-dep'); va.setAttribute('data-src', c.antes); vd.setAttribute('data-src', c.depois); var it = { fig: fig, cmp: cmp, va: va, vd: vd, pos: ini, armado: false, visto: false, noAr: false }; itens.push(it); /* ---- posição da barra ---- */ function poe(p){ p = Math.min(100, Math.max(0, p)); it.pos = p; cmp.style.setProperty('--pos', p + '%'); cmp.setAttribute('aria-valuenow', Math.round(p)); cmp.classList.toggle('is-min', p < 8); cmp.classList.toggle('is-max', p > 92); } it.poe = poe; poe(ini); /* ---- arrastar (mouse, caneta e dedo) ---- */ var arrastando = false, x0 = 0, y0 = 0, decidido = false, pid = null; function pelaTela(clientX){ var r = cmp.getBoundingClientRect(); poe((clientX - r.left) / r.width * 100); } cmp.addEventListener('pointerdown', function(e){ if(e.button && e.button !== 0) return; cmp.classList.remove('is-hint'); pid = e.pointerId; x0 = e.clientX; y0 = e.clientY; if(e.pointerType === 'mouse'){ arrastando = true; decidido = true; cmp.classList.add('is-drag'); try{ cmp.setPointerCapture(pid); }catch(err){} pelaTela(e.clientX); e.preventDefault(); } else { /* toque: espera ver se o gesto é para o lado (barra) ou para cima (rolar) */ arrastando = true; decidido = false; } }); cmp.addEventListener('pointermove', function(e){ if(!arrastando || e.pointerId !== pid) return; if(!decidido){ var dx = Math.abs(e.clientX - x0), dy = Math.abs(e.clientY - y0); if(dx < 6 && dy < 6) return; if(dy > dx){ arrastando = false; return; } // rolando a página decidido = true; cmp.classList.add('is-drag'); try{ cmp.setPointerCapture(pid); }catch(err){} } pelaTela(e.clientX); }); function solta(e){ if(e && e.pointerId !== pid) return; /* toque rápido sem arrastar: move a barra até o ponto tocado */ if(arrastando && !decidido && e && e.type === 'pointerup') pelaTela(e.clientX); arrastando = false; decidido = false; cmp.classList.remove('is-drag'); } cmp.addEventListener('pointerup', solta); cmp.addEventListener('pointercancel', solta); cmp.addEventListener('lostpointercapture', function(){ arrastando = false; cmp.classList.remove('is-drag'); }); /* ---- teclado ---- */ cmp.addEventListener('keydown', function(e){ var passo = e.shiftKey ? 10 : 3; if(e.key === 'ArrowLeft' || e.key === 'ArrowDown'){ poe(it.pos - passo); e.preventDefault(); } else if(e.key === 'ArrowRight' || e.key === 'ArrowUp'){ poe(it.pos + passo); e.preventDefault(); } else if(e.key === 'Home'){ poe(0); e.preventDefault(); } else if(e.key === 'End'){ poe(100); e.preventDefault(); } }); /* ---- mídia ---- */ var prontos = 0; function ok(){ if(++prontos >= 1) cmp.classList.add('is-ok'); } va.addEventListener('loadeddata', ok); vd.addEventListener('loadeddata', ok); /* mantém os dois vídeos no mesmo tempo */ va.addEventListener('timeupdate', function(){ if(vd.readyState > 1 && !vd.paused && Math.abs(vd.currentTime - va.currentTime) > .15){ try{ vd.currentTime = va.currentTime; }catch(err){} } }); va.addEventListener('play', function(){ if(vd.paused && it.noAr) tenta(vd); }); }); function tenta(v){ var p = v.play(); if(p && p.catch) p.catch(function(){}); } function arma(it){ if(it.armado) return; it.armado = true; [it.va, it.vd].forEach(function(v){ v.src = v.getAttribute('data-src'); v.removeAttribute('data-src'); v.preload = 'auto'; }); } function toca(it){ arma(it); it.noAr = true; if(document.hidden) return; tenta(it.va); tenta(it.vd); } function para(it){ it.noAr = false; if(!it.va.paused) it.va.pause(); if(!it.vd.paused) it.vd.pause(); } /* dica: a barra vai um pouco para cada lado e volta */ function dica(it){ if(it.visto) return; it.visto = true; var calmo = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; if(calmo) return; var base = it.pos, cmp = it.cmp; cmp.classList.add('is-hint'); setTimeout(function(){ if(cmp.classList.contains('is-hint')) it.poe(base - 14); }, 400); setTimeout(function(){ if(cmp.classList.contains('is-hint')) it.poe(base + 12); }, 950); setTimeout(function(){ if(cmp.classList.contains('is-hint')) it.poe(base); }, 1500); setTimeout(function(){ cmp.classList.remove('is-hint'); }, 2050); } /* ---- quantos aparecem no celular ---- */ function aplicaLimite(){ itens.forEach(function(it, i){ it.fig.hidden = celular.matches && NO_CELULAR > 0 && i >= NO_CELULAR; if(it.fig.hidden) para(it); }); } aplicaLimite(); if(celular.addEventListener) celular.addEventListener('change', aplicaLimite); else if(celular.addListener) celular.addListener(aplicaLimite); /* ---- observadores ---- */ if('IntersectionObserver' in window){ var perto = new IntersectionObserver(function(ents){ ents.forEach(function(en){ var it = en.target._it; if(en.isIntersecting && !it.fig.hidden) toca(it); else para(it); }); }, { rootMargin: '200px 0px' }); var meio = new IntersectionObserver(function(ents){ ents.forEach(function(en){ if(en.isIntersecting){ dica(en.target._it); meio.unobserve(en.target); } }); }, { threshold: .7 }); itens.forEach(function(it){ it.cmp._it = it; perto.observe(it.cmp); meio.observe(it.cmp); }); var io = new IntersectionObserver(function(ent){ if(ent[0].isIntersecting){ sec.classList.add('is-in'); io.disconnect(); } }, { threshold: .08 }); io.observe(sec); } else { itens.forEach(toca); sec.classList.add('is-in'); } /* aba escondida: pausa; ao voltar, retoma os que estão perto da tela */ document.addEventListener('visibilitychange', function(){ itens.forEach(function(it){ if(document.hidden){ it.va.pause(); it.vd.pause(); } else if(it.noAr){ tenta(it.va); tenta(it.vd); } }); }); })();