Scrolling Effect with Parallax Using Video

Asked

Viewed 1,015 times

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 good effect using image as background.

Here is my 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 mine 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/
Code: http://jsfiddle.net/7a2ky/

I would like to do the same effect, but using a video instead of an image. This is possible?

javascript jquery css parallax

  • It’s possible, but you won’t be able to use css background for it. You’ll have to create a video element, fix it and move it around the screen. I recommend you be at the beginning of your HTML, right next to body, so you won’t have to change the z-index because the other elements will be in front of him.

  • @Gabrielgartz, thank you. I even did that, but I couldn’t replicate some background-specific and essential properties for working like background-position: 50% 0 and background-size: cover. Do you have any idea how this can be done?

  • If you leave the video the size of the screen or the desired size, you can leave the video area at most that will occupy the screen and use the css transform to achieve the effect of cover, calculating the original ratio to the width and height of the element, as well as its positioning. But it’s not as easy as doing with background because there are no "shortcuts" listed yet.

  • I think I’m almost there, @Gabrielgartz. Do you have any idea or example of using the property transform to this end?

  • I used z-index for agility purposes in dev, but to improve, next, you can use the transform scale() to achieve its ratio in more is very similar, look at the example.

1 answer

3

Since there is no specific CSS video background property, I improvised a solution using the tag <video> and a CSS that simulates a background. Positioning with absolute, and applying a z-index well low, the video "floats below" the other items.

EDIT: New version improved: http://jsfiddle.net/ra3qA/11/

(Old version: http://jsfiddle.net/ra3qA/2/)

One detail: while the video does not load, the screen turns black. It would be nice to fix it somehow. =)

  • Thank you, your solution is almost perfect. The problem is in the property background-size: cover, see in my example what happens to the image when the browser area is smaller and compare with yours. I really have no idea how to simulate this property for an element.

  • Now I think you’re right: http://jsfiddle.net/ra3qA/7/show/

  • I added a "min-width" that was missing. I also put a plugin called fitVids that helps to position the element better (but I think it’s not even necessary in this case).

  • Yeah, that plugin-free version (http://jsfiddle.net/ra3qA/8/show/) has the same result for me.

  • 1

    For the black screen scenario due to waiting until video is loaded, you can use the attribute poster which allows providing an image to be displayed until the video is fully loaded, at which point the first frame of the video will pass to the poster.

  • On smaller screens, your updated version is not centralized. Decrease the browser size to see. S

  • Sorry for the delay! It really reduces the video... I think the solution is to fully control the dimensions of the video by javascript even. I found a solution that might be interesting. Is this the behavior you expect? Check out the demo: http://www.inserthtml.com/2013/09/quick-tips-background-videos/

Show 2 more comments

Browser other questions tagged javascript jquery css parallax

You are not signed in. Login or sign up in order to post.