当前位置：首页 > 网页特效 > 滚动

HTML5视频播放器随页面滚动固定页面右下角效果

分类：滚动日期：2024-05-14 点击(1) 评论(0)

简介

在页面中引入jquery文件。

```html
<script src='path/to/jquery.min.js'></script> 
```                              
#####  HTML结构
使用一个div元素来包裹HTML5视频video元素。

```html
<div id="videoBox" class="box">
  <video width="400" controls>
    <source src="sample.mp4" type="video/mp4"> 
    Your browser does not support HTML5 video.
  </video>
</div>    
``` 
#####  CSS样式
为视频元素添加下面的简单CSS样式：

```html
#videoBox {
  border: 10px solid #212223;
  transition: 0.5s;
}
video {
  width: 100%;
  vertical-align: bottom;
}
 
#videoBox.in {
  animation: ac 1s;
}
 
#videoBox.out {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  z-index: 999;
  animation: an 0.5s;
}      
```          
#####  初始化插件
最后使用jquery来检测窗口的滚动事件，并在合适的位置切换videoBox的class类，使其隐藏和出现在右下角。

```html
var ha = ( $('#videoBox').offset().top + $('#videoBox').height() );
 
$(window).scroll(function(){  
 
  if ( $(window).scrollTop() > ha + 500 ) { 
    $('#videoBox').css('bottom','0'); 
  } else if ( $(window).scrollTop() < ha + 200) {  
    $('#videoBox').removeClass('out').addClass('in');     
  } else {       
    $('#videoBox').removeClass('in').addClass('out');   
    $('#videoBox').css('bottom','-500px');             
  };  
 
});
```

web299.com

HTML5视频播放器随页面滚动固定页面右下角效果

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果