custom-javascript.js
3.04 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import LocomotiveScroll from 'locomotive-scroll';
const scroll = new LocomotiveScroll();
document.addEventListener("DOMContentLoaded", function() {
window.addEventListener('scroll', function() {
if (window.scrollY > 57) {
document.getElementById('main-nav').classList.add('fixed-top');
} else {
document.getElementById('main-nav').classList.remove('fixed-top');
}
if (window.scrollY > 1500) {
// document.getElementById('v1').classList.add('fixed-video');
} else {
// document.getElementById('v1').classList.remove('fixed-video');
}
});
});
// select video element
var vid = document.getElementById('v0');
//var vid = $('#v0')[0]; // jquery option
// pause video on load
vid.pause();
// pause video on document scroll (stops autoplay once scroll started)
window.onscroll = function(){
vid.pause();
};
// refresh video frames on interval for smoother playback
setInterval(function(){
vid.currentTime = window.pageYOffset/300;
}, 40);
// jQuery(document).ready(function($) {
// // select video element
// var vid = document.getElementById('v0');
// var time = $('#time');
// var scroll2 = $('#scroll');
// var body = $('.video-cont');
// var windowheight = $(window).height() - 20;
// var scrollpos = window.pageYOffset / 400;
// var targetscrollpos = scrollpos;
// var accel = 0;
// // ---- Values you can tweak: ----
// var accelamount = 0.01; //How fast the video will try to catch up with the target position. 1 = instantaneous, 0 = do nothing.
// var bounceamount = 0.91; //value from 0 to 1 for how much backlash back and forth you want in the easing. 0 = no bounce whatsoever, 1 = lots and lots of bounce
// // pause video on load
// vid.pause();
// window.onscroll = function() {
// //Set the video position that we want to end up at:
// targetscrollpos = ($(document).scrollTop() - $(vid).offset().top) / $(vid).height();
// targetscrollpos = targetscrollpos > 0 ? targetscrollpos < $(vid).height() ? targetscrollpos : $(vid).height() : 0;
// targetscrollpos *= 13500/ $(vid).height();
// //move the red dot to a position across the side of the screen
// //that indicates how far we've scrolled.
// scroll2.css('top', 10 + (targetscrollpos * windowheight));
// };
// setInterval(function() {
// //Accelerate towards the target:
// accel += (targetscrollpos - scrollpos) * accelamount;
// //clamp the acceleration so that it doesnt go too fast
// if (accel > 1) accel = 1;
// if (accel < -1) accel = -1;
// //move the video scroll position according to the acceleration and how much bouncing you selected:
// scrollpos = (scrollpos + accel) * (bounceamount) + (targetscrollpos * (1 - bounceamount));
// //move the blue dot to a position across the side of the screen
// //that indicates where the current video scroll pos is.
// time.css('top', 10 + (scrollpos / targetscrollpos * 400 * windowheight));
// //update video playback
// vid.currentTime = scrollpos;
// vid.pause();
// }, 40);
// });