Currently, I am exploring parallax effects and experimenting with incorporating a video as the background instead of an image.
I have successfully implemented a nice effect using a background image.
Below is my jQuery code snippet:
$('[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 here is my CSS styling:
[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/
Code: http://jsfiddle.net/7a2ky/
I am interested in achieving the same effect but by utilizing a video () instead of an image. Can this be done?