Create 3D Animations Using HTML, CSS & JS | Scrolling Animation Using Canvas 

yo lo voy a descargar, para usar premier para ponerle los subtitulos en automatico, despues usare el chat gpt para pasarlo al español y listo :v,

Mere nunnu se Pesab nikal raha he 🎉

​@@momsspaghetti21bro WTF 💀

Document *{ margin: 0; padding: 0; box-sizing: border-box; color: #f1f1f1; } body{ position: relative; width: 100vw; height: 100vh; background-color: black; } canvas{ position: fixed; top: 0; left: 0; background-color: transparent; z-index: -111; } .page{ width: 100%; height: 100vh; border: 5px solid blue; } h1{ color: #f1f1f1; } This is Page 1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis soluta nemo odit illum quisquam blanditiis officiis, cupiditate architecto perferendis iusto nulla aperiam, mollitia natus quia commodi quo voluptas. Atque impedit maiores quis ipsam dolorum. This is Page 2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis soluta nemo odit illum quisquam blanditiis officiis, cupiditate architecto perferendis iusto nulla aperiam, mollitia natus quia commodi quo voluptas. Atque impedit maiores quis ipsam dolorum. This is Page 3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis soluta nemo odit illum quisquam blanditiis officiis, cupiditate architecto perferendis iusto nulla aperiam, mollitia natus quia commodi quo voluptas. Atque impedit maiores quis ipsam dolorum. This is Page 4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis soluta nemo odit illum quisquam blanditiis officiis, cupiditate architecto perferendis iusto nulla aperiam, mollitia natus quia commodi quo voluptas. Atque impedit maiores quis ipsam dolorum. This is Page 5 Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis soluta nemo odit illum quisquam blanditiis officiis, cupiditate architecto perferendis iusto nulla aperiam, mollitia natus quia commodi quo voluptas. Atque impedit maiores quis ipsam dolorum. // defind canvas by id let canvas = document.getElementById("canvas"); // get all canvas context let context = canvas.getContext("2d"); // width & height of screen let width = window.innerWidth; let height = window.innerHeight; // width of height of canvas canvas.width = width; canvas.height = height; // global variable for all images frames are loaded or not let isImageFrameDataLoad = false // images frames let frames = 300; // images array // let images = []; let images = Array.from({ length: frames }, (_, index) => ({ complete: false })); function checkAllImagesLoad(images) { for (image of images) { if(image.complete == false){ return false } } return true } // laod images one by one and store by indexing in images array function loadAndStoreImages(path, imgIndex) { var image = new Image(); image.onload = function () { // images.push(image) images[imgIndex - 1] = image if(checkAllImagesLoad(images)){ console.log("images Load.....") isImageFrameDataLoad = true; renderImage() } }; image.src = path; }; // loadAndStoreImages(`./images/male000${i}.png`); // when use open page direct load this images from server for (let i = 1; i = 10 && i < 100) { // loadAndStoreImages(`./images/male00${i}.png`); loadAndStoreImages(`raw.githubusercontent.com/aadilkhan08/CYBERFICTION-SOURCE-CODE/main/male00${i}.png`, i); continue } if (i => 100) { loadAndStoreImages(`raw.githubusercontent.com/aadilkhan08/CYBERFICTION-SOURCE-CODE/main/male0${i}.png`, i); continue } }; // Update progress bar based on scroll position function updateProgressBar() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var windowHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; var scrollProgress = Math.floor((scrollTop / windowHeight) * frames); return scrollProgress; } let current_frame = updateProgressBar(); // render (show) image function function renderImage() { try { // console.log(event) context.clearRect(0, 0, width, height); context.drawImage(images[current_frame], 0, 0, width, height); current_frame = updateProgressBar(); } catch (error) { current_frame = updateProgressBar(); renderImage() } } // evnet when user scroll on page window.addEventListener("scroll", (event) => { isImageFrameDataLoad ? renderImage() : null }) // evnet when user resize on page window.addEventListener("resize", () => { width = window.innerWidth; height = window.innerHeight; canvas.width = width; canvas.height = height; renderImage() })

The power of JavaScript! html & css are kids while js is the man 🤣

where are you from?

India

Bhai photo kha par Dali h yar

Document *{ margin: 0; padding: 0; box-sizing: border-box; color: #f1f1f1; } body{ position: relative; width: 100vw; height: 100vh; background-color: black; } canvas{ position: fixed; top: 0; left: 0; background-color: transparent; z-index: -111; } .page{ width: 100%; height: 100vh; border: 5px solid blue; } h1{ color: #f1f1f1; } This is Page 1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis soluta nemo odit illum quisquam blanditiis officiis, cupiditate architecto perferendis iusto nulla aperiam, mollitia natus quia commodi quo voluptas. Atque impedit maiores quis ipsam dolorum. This is Page 2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis soluta nemo odit illum quisquam blanditiis officiis, cupiditate architecto perferendis iusto nulla aperiam, mollitia natus quia commodi quo voluptas. Atque impedit maiores quis ipsam dolorum. This is Page 3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis soluta nemo odit illum quisquam blanditiis officiis, cupiditate architecto perferendis iusto nulla aperiam, mollitia natus quia commodi quo voluptas. Atque impedit maiores quis ipsam dolorum. This is Page 4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis soluta nemo odit illum quisquam blanditiis officiis, cupiditate architecto perferendis iusto nulla aperiam, mollitia natus quia commodi quo voluptas. Atque impedit maiores quis ipsam dolorum. This is Page 5 Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis soluta nemo odit illum quisquam blanditiis officiis, cupiditate architecto perferendis iusto nulla aperiam, mollitia natus quia commodi quo voluptas. Atque impedit maiores quis ipsam dolorum. // defind canvas by id let canvas = document.getElementById("canvas"); // get all canvas context let context = canvas.getContext("2d"); // width & height of screen let width = window.innerWidth; let height = window.innerHeight; // width of height of canvas canvas.width = width; canvas.height = height; // global variable for all images frames are loaded or not let isImageFrameDataLoad = false // images frames let frames = 300; // images array // let images = []; let images = Array.from({ length: frames }, (_, index) => ({ complete: false })); function checkAllImagesLoad(images) { for (image of images) { if(image.complete == false){ return false } } return true } // laod images one by one and store by indexing in images array function loadAndStoreImages(path, imgIndex) { var image = new Image(); image.onload = function () { // images.push(image) images[imgIndex - 1] = image if(checkAllImagesLoad(images)){ console.log("images Load.....") isImageFrameDataLoad = true; renderImage() } }; image.src = path; }; // loadAndStoreImages(`./images/male000${i}.png`); // when use open page direct load this images from server for (let i = 1; i = 10 && i < 100) { // loadAndStoreImages(`./images/male00${i}.png`); loadAndStoreImages(`raw.githubusercontent.com/aadilkhan08/CYBERFICTION-SOURCE-CODE/main/male00${i}.png`, i); continue } if (i => 100) { loadAndStoreImages(`raw.githubusercontent.com/aadilkhan08/CYBERFICTION-SOURCE-CODE/main/male0${i}.png`, i); continue } }; // Update progress bar based on scroll position function updateProgressBar() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var windowHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; var scrollProgress = Math.floor((scrollTop / windowHeight) * frames); return scrollProgress; } let current_frame = updateProgressBar(); // render (show) image function function renderImage() { try { // console.log(event) context.clearRect(0, 0, width, height); context.drawImage(images[current_frame], 0, 0, width, height); current_frame = updateProgressBar(); } catch (error) { current_frame = updateProgressBar(); renderImage() } } // evnet when user scroll on page window.addEventListener("scroll", (event) => { isImageFrameDataLoad ? renderImage() : null }) // evnet when user resize on page window.addEventListener("resize", () => { width = window.innerWidth; height = window.innerHeight; canvas.width = width; canvas.height = height; renderImage() })

Bro how to download so many pictures

Thank you 🙌

Thank you ❤❤ it means a lot for us. Be with sheryians coding school..❤

Hpw to to bring that image on page can you help?

Same question as above

@@trishaanrock4678 doesn't work for everyone

Thank you so much 😀❤

Bro your concentration power is too high🙂

It will work or not? Bro

bro can u tell me how you render this korean boy image in your website

Already uploaded ❤️😊

I hope you were understood. Although we have release some awesome effect for beginners with least js code you can watch from our RU-vid channel

Hey thanks 🙏🏻 😊❤️

​@@thesheryianscodingschool sir please wo images show nhi ho rahi haii

Next video already uploaded ❤️

Sir, can you guide us about where to find/search the frame by frame images.

exactly! Most people are just watching this copying code and are being happy no one wants to create this on their own or try to know how things are working!! Didn't tell how canvas worked completely skipped it, which was the main part on how those images are coming and no context of few things in some places. I am kind of disappointed as i expected them to be better :)