Create an Awesome Scroll-based HTML5 Video Explainer

Be sure to Subscribe! My answer for today's question: I started gaming on a PC as early as 11 or 12. The first game I ever played was WOLFENSTEIN 3D! Awesome stuff! That got me hooked into FPS gaming. I went from there to Doom & Doom 2. The first time I ever used the computer to create something was with Doom and Doom 2 levels. After that, I played 10 years of Quake 2 multiplayer. I also played from the very first Call of Duty all the way to MW2. Other games I played included QuakeWars, the Battlefield series, a lot of the CounterStrike series, etc.. Now, I haven't played a game in 4 or 5 years at least. I'm getting old and becoming my father, great.

Why this doesn't work on my computer???

How to achieve this, but with images only?

How can I add and make this scrollable in wordpress?

Thanks for the nice tutorial my question is dose it work on mobile as well?

Hello, thank you for this video and the code, it was really useful. Do you have any tips on how to make the video run more smoothly as you scroll?

This is fantastic, I've done something similar but it's not the best! I should point out, when using vendor-specific properties, you should have them before the actual property. E.g. it should be -webkit-sticky and unprefixed sticky after.

Thanks, I found this video interesting, but it doesn't work for me as expected. I have added the controls under the video to see what is happening. The timeline updates immediately, but the actual frame is not changing. I found out that the problem is when I continuously update currentTime (even when no change happening in the frameNumber) will prevent the video to seek to the frame. I made a video using FFMPEG to have only ONE FPS, so in this case I can work with integer numbers and easily do this check: if(vid.currentTime != frameNumber) vid.currentTime = frameNumber;
This solved the problem, but the update of the frames is not as seamless as in your video. I have made another approach using webgl and rendering the texture frames onto a quad. That is perfectly seamless, but requires more coding.

@DesignCourse Except your video no other video is working for me, My videos has 30 and 50 seconds. maybe its not downloading or not working.

nice

Love the concept and video here but I am getting some pretty aggressive jumping that is happening with my video. Is there a way to optimize the smoothness of the buffering? Would love to hear any tips you may have!

Ok so. It's not working for me. I need to exit the tab and re enter to see the video change. Any idea why it's doing that
?

Hello, I'm getting "Uncaught ReferenceError: enterView is not defined" anyone knows what is happening? Thanks!

Bro.. You made my day!!! Thanks a Lot!!

Yeah, I'm 58 female - web dev, gamer.

Awesome Video and to answer your question, you should play DOOM ETERNAL with both of its DLC. Really Awesome game if you're into chill, relaxing and overall very calming gaming experience.

Hunt:Showdown is a game any FPS fan should try !

very cool. how can i scroll i a object based on time?

I've been trying to implement this code in Webflow but without success... Does anybody know how this could work? I've tried to add the video via an HTML embed and also as a background video element but it seems the javascript can't locate the ID of the video. I was planning to implement my animation as a Lottie file but with 300 frames the file size was crazy (~350 MB...). That´s why I have to find another solution.

I don't understand this won't work for me. I even tried copying everything you did (beside the sticy js)
anybody got any ideas on why this might. not work

am I wrong or it's a bit buggy in Firefox? Also, in Safari at the end disappear.