This time I will share jQuery Plugin and tutorial about Scroll-triggered Fixed Video Player With jQuery And CSS3, hope it will help you in programming stack.
A small jQuery script that automatically fixes the video player box at the bottom of the webpage as you scroll a certain distance from the top (the video player is scrolled out of the viewport). Just like the fixed video box as you seen in the Tumblr.com.
How to use it:
1. Embed an HTML5 video into the video box.
1 |
<div id="videoBox" class="box"> |
2 |
<video width="400" controls> |
3 |
<source src="sample.mp4" type="video/mp4"> |
4 |
Your browser does not support HTML5 video. |
2. Fix the video box when it’s scrolled out of view.
10 |
#videoBox.in { animation: ac 1s; } |
3. Place the necessary jQuery library in the document.
1 |
<script src="//code.jquery.com/jquery-3.2.0.slim.min.js"></script> |
4. The jQuery script to detect the scroll event and toggle the CSS classes as you scroll down the webpage.
01 |
var ha = ( $('#videoBox').offset().top + $('#videoBox').height() ); |
03 |
$(window).scroll(function(){ |
05 |
if ( $(window).scrollTop() > ha + 500 ) { |
06 |
$('#videoBox').css('bottom','0'); |
07 |
} else if ( $(window).scrollTop() < ha + 200) { |
08 |
$('#videoBox').removeClass('out').addClass('in'); |
10 |
$('#videoBox').removeClass('in').addClass('out'); |
11 |
$('#videoBox').css('bottom','-500px'); |
This awesome jQuery plugin is developed by jlnljn. For more Advanced Usages, please check the demo page or visit the official website.
