This is the 19th day of my participation in the Novembermore Challenge.The final text challenge in 2021

concept

One-shot is a term used in the film industry to refer to the technique of shooting with one camera and showing the entire film in one shot.

A single shot in a web page usually refers to a way of showing different picture elements successively in front of the audience by imitating the stretching of the lens in the page. It is called “one-shot to the end” because its rendering effect is very similar to the one-shot to the end in film and television.

introduce

This issue will make a video that can be played by sliding the screen with just a few lines of JS code. Of course, scrolling down means animation forward, and scrolling up means animation backward. The whole process is consistent, thus forming the most basic one-shot effect of the web page.

Let’s start with the Kangkang effect:

Please forgive me for my second disease. Our case will be very brief, but we need to prepare a video. Next, we will begin

The body of the

<div id="app">
    <video id="video" src="./assets/bg.mp4" muted></video>
</div>
Copy the code
html.body{
    width: 100%;
    background-color: # 000000;
}
#app{
    width: 100%;
    height: 3000vh;
    position: relative;
    video{
        position: fixed;
        top: 0;
        left:0;
        width: 100%;
        height: 100vh;
        object-fit: cover; }}Copy the code

There’s only so much HTML and CSS, we’ll use div#app to create a 30-screen height first, then use float positioning for the video below, don’t forget to use object fit too: cover will fill the screen with its aspect ratio and trim non-central pixels. So our videos can be displayed on our screens. But dragging the scroll bar won’t play right now, because we haven’t added javascript to control it yet.

let video = document.getElementById("video");
window.addEventListener("scroll".function(e){
    const {scrollTop,scrollHeight,clientHeight} = document.documentElement;
    let scrolled = scrollTop / (scrollHeight-clientHeight);
    video.currentTime = video.duration * scrolled;
})
Copy the code

In fact, that’s all you need to do. You can use the scroll bar to control the progress of the video. We listen for scroll, get the current scrolling distance of scrollTop, scrollHeight and clientHeight, and we take the difference between these two values to get the maximum scrolling height. In this way, the two values can be divided by the current page scroll progress value. Here, since we only have one video, we can multiply the progress value by the length of the video to get its current progress and change it, and that’s the goal of changing the scroll bar to change the video.

Of course, it wouldn’t be too bad if we were to scroll out directly, we’d rather hide the scroll bar.

html.body{ &::-webkit-scrollbar{ display: none; }}Copy the code

conclusion

We this is one of the most basic video broadcast through pure js control case to tell a mirror to the end, the main purpose is to meet, namely use the scroll bar to make a time line to control elements of the page, he can be a video, can be a frame animation, can be a 3 d model, can the SVG animation and so on, only you can not do, It is also a way for users to browse the web in an immersive way. In our work, we will use the GSAP timeline plug-in to control the implementation. Of course, we will spare time to arrange more cases to wait for everyone to learn to the end. Look forward to it!