Scrolling effect with Parallax using video

5

I'm studying effects with Parallax and I'm trying to display a video in the background instead of an image. So I was able to create a nice effect using background image.

Here is my jQuery code:

$('[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 :

[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: link
Code: link

I'd like to do the same thing, but using a video instead An image. Is this possible?

    
asked by anonymous 05.03.2014 / 05:33

1 answer

3

Since there is no specific property for CSS background video, I have improvised a solution using the <video> tag and a CSS that simulates a background. By positioning with absolute , and applying z-index low, the video "floats down" of the other items.

EDIT: New enhanced version: link

(Old Version: link )

One detail: while the video does not load, the screen turns black. It would be legal to correct this in some way. =)

    
05.03.2014 / 15:00