├── fingers.mp4
├── README.md
├── sticky.js
├── main.css
└── index.html


/fingers.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/designcourse/html5-video-scroll/HEAD/fingers.mp4


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # HTML5 Scroll Based Video Tutorial Project
 2 | 
 3 | This is the project based on the following tutorial:
 4 | [Create an Awesome Scroll-based HTML5 Video Explainer](https://youtu.be/HiegEfkenXA)
 5 | 
 6 | ## More Awesome Content
 7 | 
 8 | Do me a big ol' favor and check out these awesome links. I release new video tutorials on full stack development Monday-Thursday @ 10:30 AM ET!
 9 | 
10 | * Subscribe to the [DesignCourse YouTube Channel](http://youtube.com/designcourse)
11 | * Check out the associated website [Coursetro Full Stack Development Training](https://coursetro.com)
12 | * [Twitter](https://twitter.com/designcoursecom)
13 | * [Facebook](https://facebook.com/coursetro)
14 | 
15 | Enjoy!


--------------------------------------------------------------------------------
/sticky.js:
--------------------------------------------------------------------------------
1 | "use strict";!function(e){"function"==typeof define&&define.amd?define(e):"undefined"!=typeof module&&module.exports?module.exports=e():window.enterView=e.call(this)}(function(){var e=function(e){function n(){g=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||function(e){return setTimeout(e,1e3/60)}}function t(){if(h&&"number"==typeof h){var e=Math.min(Math.max(0,h),1);return q-e*q}return q}function i(){var e=document.documentElement.clientHeight,n=window.innerHeight||0;q=Math.max(e,n)}function o(){y=!1;var e=t();A=A.filter(function(n){var t=n.getBoundingClientRect(),i=t.top,o=i<e;if(o&&!n.__enter_view){if(m(n),_)return!1}else!o&&n.__enter_view&&w&&w(n);return n.__enter_view=o,!0}),A.length||window.removeEventListener("scroll",r,!0)}function r(){y||(y=!0,g(o))}function u(){i(),o()}function f(e){for(var n=e.length,t=[],i=0;i<n;i+=1)t.push(e[i]);return t}function c(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return"string"==typeof e?f(n.querySelectorAll(e)):e instanceof NodeList?f(e):e instanceof Array?e:void 0}function d(){A=c(l)}function a(){window.addEventListener("resize",u,!0),window.addEventListener("scroll",r,!0),u()}function s(){var e=l&&m;e||console.error("must set selector and enter options"),n(),d(),a(),o()}var l=e.selector,m=e.enter,w=e.exit,v=e.offset,h=void 0===v?0:v,p=e.once,_=void 0!==p&&p,g=null,y=!1,A=[],q=0;s()};return e});


--------------------------------------------------------------------------------
/main.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     background-color: #c6d7de;
 3 |     font-family: 'Montserrat';
 4 |     padding: 3em;
 5 | }
 6 | 
 7 | #v0 {
 8 |     position: fixed;
 9 |     bottom: 0;
10 |     right: 0;
11 |     width: 70%;
12 | }
13 | 
14 | #set-height {
15 |     display: block;
16 | }
17 | 
18 | section {
19 |     z-index: 1;
20 |     position: relative;
21 | }
22 | 
23 | .content {
24 |     position: sticky;
25 |     position: -webkit-sticky;
26 |     width: 100%;
27 |     top: 33.3%;
28 | }
29 | 
30 | h1 {
31 |     font-size: 3em;
32 |     background: #fff;
33 |     display: inline-block;
34 |     padding: 10px 15px;
35 |     border-radius: 5px;
36 |     margin: 0;
37 | }
38 | p { font-size: 1.5em; }
39 | 
40 | section:nth-of-type(1) {
41 |     height: 1200px;
42 | }
43 | section:nth-of-type(2) {
44 |     height: 1200px;
45 | }
46 | section:nth-of-type(3) {
47 |     height: 1200px;
48 | }
49 | section:nth-of-type(4) {
50 |     height: 1000px;
51 | }
52 | section:nth-of-type(5) {
53 |     height: 4000px;
54 | }
55 | 
56 | .entered {
57 | 	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
58 | 	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
59 | }
60 | 
61 | /* ----------------------------------------------
62 |  * Generated by Animista on 2018-7-4 16:24:12
63 |  * w: http://animista.net, t: @cssanimista
64 |  * ---------------------------------------------- */
65 | 
66 | /**
67 |  * ----------------------------------------
68 |  * animation text-focus-in
69 |  * ----------------------------------------
70 |  */
71 |  @-webkit-keyframes text-focus-in {
72 |     0% {
73 |       -webkit-filter: blur(12px);
74 |               filter: blur(12px);
75 |       opacity: 0;
76 |     }
77 |     100% {
78 |       -webkit-filter: blur(0px);
79 |               filter: blur(0px);
80 |       opacity: 1;
81 |     }
82 |   }
83 |   @keyframes text-focus-in {
84 |     0% {
85 |       -webkit-filter: blur(12px);
86 |               filter: blur(12px);
87 |       opacity: 0;
88 |     }
89 |     100% {
90 |       -webkit-filter: blur(0px);
91 |               filter: blur(0px);
92 |       opacity: 1;
93 |     }
94 |   }
95 |   


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <title>Document</title>
 8 |     <link rel="stylesheet" href="main.css">
 9 | </head>
10 | <body>
11 |     
12 |     <section class="container">
13 |         <div class="content">
14 |             <h1>Scroll to Begin</h1>
15 |             <p>Start it like this..</p>
16 |         </div>
17 |     </section>
18 | 
19 |     <section class="container">
20 |         <div class="content">
21 |             <h1>Step 1</h1>
22 |             <p>Start it like this..</p>
23 |         </div>
24 |     </section>
25 | 
26 |     <section class="container">
27 |         <div class="content">
28 |             <h1>Step 2</h1>
29 |             <p>Start it like this..</p>
30 |         </div>
31 |     </section>
32 | 
33 |     <section class="container">
34 |         <div class="content">
35 |             <h1>Step 3</h1>
36 |             <p>Start it like this..</p>
37 |         </div>
38 |     </section>
39 | 
40 |     <section class="container">
41 |         <div class="content">
42 |             <h1>Step 4</h1>
43 |             <p>Start it like this..</p>
44 |         </div>
45 |     </section>
46 | 
47 |     <div id="set-height"></div>
48 | 
49 |     <video id="v0" tabindex="0", autobuffer preload>
50 |         <source type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' src="fingers.mp4"></source>
51 |     </video>
52 |     <script src="sticky.js"></script>
53 |     <script>
54 | 
55 |         enterView({
56 |             selector: 'section',
57 |             enter: function(el) {
58 |                 el.classList.add('entered');
59 |             }
60 |         })
61 |     
62 |         var frameNumber = 0, // start video at frame 0
63 |         // lower numbers = faster playback
64 |         playbackConst = 1000, 
65 |         // get page height from video duration
66 |         setHeight = document.getElementById("set-height"), 
67 |         // select video element         
68 |         vid = document.getElementById('v0'); 
69 |         // var vid = $('#v0')[0]; // jquery option
70 | 
71 |     // dynamically set the page height according to video length
72 |     vid.addEventListener('loadedmetadata', function() {
73 |     setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
74 |     });
75 | 
76 | 
77 |     // Use requestAnimationFrame for smooth playback
78 |     function scrollPlay(){  
79 |     var frameNumber  = window.pageYOffset/playbackConst;
80 |     vid.currentTime  = frameNumber;
81 |     window.requestAnimationFrame(scrollPlay);
82 |     }
83 | 
84 |     window.requestAnimationFrame(scrollPlay);
85 |     
86 |     </script>
87 | </body>
88 | </html>


--------------------------------------------------------------------------------