0
244
Viewscómo eliminar el lienzo del redibujado con vainilla JS
Estoy tratando de duplicar el efecto de desplazamiento como los airpods, estaba funcionando pero tiene algunos efectos cuando se desplaza como archivo adjunto.
Cargué 94 imágenes para que se desplazara 360 grados y precargué 148 imágenes. Sé que los efectos de desplazamiento se pueden eliminar si uso el complemento ScrollTrigger JS, pero quiero construir esto usando solo Vanilla JS.
¿Cómo puedo eliminar los efectos (Al hacer scroll) en la imagen?
const html = document.documentElement; const canvas = document.getElementById("hero-lightpass"); const context = canvas.getContext("2d"); const frameCount = 148; //Getting file path const currentFrame = index => (`https://connectplus.s3.ap-southeast-2.amazonaws.com/connect-plus/${index.toString().padStart(4, '0')}.png`) //To preload the images of 148 as initialized above, then we loop through each image from the file path and create a new image const preloadImages = () => { for(let i = 1; i < frameCount; i++){ const img = new Image(); img.src = currentFrame(i); } }; const img = new Image() img.src = currentFrame(1); canvas.width = 1158; canvas.height = 770; img.onload = function(){ context.drawImage(img, 0, 0); } const updateImage = index => { img.src = currentFrame(index); context.drawImage(img, 0, 0); } window.addEventListener('scroll', () => { context.fillRect(0, 0, canvas.width, canvas.height); const scrollTop = html.scrollTop; const maxScrollTop = html.scrollHeight - window.innerHeight; const scrollFraction = scrollTop / maxScrollTop; const frameIndex = Math.min( frameCount - 1, Math.ceil(scrollFraction * frameCount) ); requestAnimationFrame(() => updateImage(frameIndex + 1)) }); preloadImages() html { height: 100vh; } body { margin: 0; padding: 0; width: auto; height: auto; } .test { height: 500vh; background-color: #ffffff; } <html> <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <body> <!--Scrolling effect without a library--> <div id="mainDiv" class="test bg-white"> <canvas id="hero-lightpass" class=" sticky justify-center items-center top-1/4 left-1/4 transform -translate-x-1/4 -translate-y-1/4 max-w-screen-2xl max-h-screen overflow-hidden"></canvas> </div> </body> </html> 
·
Juan Pablo Isaza
1 answers
Answer question0
Intente usar un cierre en su precargador (y no use const en el ciclo) ... más una pequeña validación cargada para evitar que el lienzo se bloquee en las imágenes que no se han cargado:
const html = document.documentElement; const canvas = document.getElementById("hero-lightpass"); const context = canvas.getContext("2d"); const frameCount = 148; //Getting file path const currentFrame = index => (`https://connectplus.s3.ap-southeast-2.amazonaws.com/connect-plus/${index.toString().padStart(4, '0')}.png`) //To preload the images of 148 as initialized above, then we loop through each image from the file path and create a new image var imgCache = {}; const preloadImages = () => { for(let i = 1; i < frameCount; i++){ let img = new Image(); img.src = currentFrame(i); var obj = { img : img, loaded : false } img.onload = (function(Vobj){ return function(){ Vobj.loaded = true; } }(obj)) imgCache[i] = obj; } }; const img = new Image() img.src = currentFrame(1); canvas.width = 1158; canvas.height = 770; img.onload = () => { context.drawImage(img, 0, 0); } const updateImage = index => { var item = imgCache[index]; if(item && item.loaded){ context.drawImage(item.img, 0, 0); } } window.addEventListener('scroll', () => { context.fillRect(0, 0, canvas.width, canvas.height); const scrollTop = html.scrollTop; const maxScrollTop = html.scrollHeight - window.innerHeight; const scrollFraction = scrollTop / maxScrollTop; const frameIndex = Math.min( frameCount - 1, Math.ceil(scrollFraction * frameCount) ); requestAnimationFrame(() => updateImage(frameIndex + 1)) }); preloadImages() html { height: 100vh; } body { margin: 0; padding: 0; width: auto; height: auto; } .test { height: 500vh; background-color: #ffffff; } <html> <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <body> <!--Scrolling effect without a library--> <div id="mainDiv" class="test bg-white"> <canvas id="hero-lightpass" class=" sticky justify-center items-center top-1/4 left-1/4 transform -translate-x-1/4 -translate-y-1/4 max-w-screen-2xl max-h-screen overflow-hidden"></canvas> </div> </body> </html>
·
Juan Pablo Isaza
Report
Answer question