[英]Parallax scroll effect with video
I'm learning about the parallax effects and I'm trying to display a video in background instead of an image. 我正在学习视差效果,我试图在背景而不是图像中显示视频。
So, I created a good effect using a background image. 所以,我使用背景图像创造了一个很好的效果。
This is my jQuery code: 这是我的jQuery代码:
$('[data-parallax]').each(function(){
var $this = $(this),
$window = $(window);
$window.scroll(function() {
var y = -($window.scrollTop() / $this.data('speed')),
background = '50% '+ y + 'px';
$this.css('background-position', background);
});
});
And my CSS : 我的CSS :
[data-parallax] {
background-attachment: fixed;
background-color: #fff;
background-image: url('http://lorempixel.com/720/480');
background-position: 50% 0;
background-repeat: no-repeat;
background-size: cover;
min-height: 100%;
position: relative;
}
Example: http://jsfiddle.net/7a2ky/show/ 示例: http : //jsfiddle.net/7a2ky/show/
Code: http://jsfiddle.net/7a2ky/ 代码: http : //jsfiddle.net/7a2ky/
I'd like to do the same effect but using a video ( http://goo.gl/HcH2cL ) instead of an image. 我想做同样的效果,但使用视频( http://goo.gl/HcH2cL )而不是图像。 Is it possible? 可能吗?
You cant change a background image into a video in CSS, you need to trick the browser with the zIndex (or use a gif file instead of the video) : 您无法将背景图像更改为CSS中的视频,您需要使用zIndex欺骗浏览器(或使用gif文件而不是视频):
$video.css({"height":"100%",
position:'absolute',
top:0,left:0,zIndex:10
});
http://jsfiddle.net/camus/7a2ky/9/show/ http://jsfiddle.net/camus/7a2ky/9/show/
js JS
$(window).scroll(function ()
{
var yPos=-($(window).scrollTop() / 6);
if($(window).scrollTop()>100)
{
document.getElementById("div1_wrapper").style.backgroundPosition="100% "+yPos+"px";
}
if($(window).scrollTop()<100)
{
document.getElementById("div1_wrapper").style.backgroundPosition="100% 100%";
}
});
css CSS
#div1_wrapper
{
background:url("images/parallax1.jpg") no-repeat;
background-attachment:fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
width:100%;
}
#div2_wrapper
{
background:url("images/parallax2.jpg") no-repeat;
background-attachment:fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
width:100%;
}
if you need to view complete tutorial with demo http://talkerscode.com/webtricks/simple-parallax-effect-on-scrolling-using-jquery-and-css.php 如果你需要通过演示查看完整的教程http://talkerscode.com/webtricks/simple-parallax-effect-on-scrolling-using-jquery-and-css.php
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.