Codeconvey
  • Home
  • Tutorials
    • CSS Slideshow
    • CSS Navigation
    • Modal & Popup
    • Hover Effects
    • HTML Forms
    • Layout
  • CSS Animation
  • How To
  • Resources
No Result
View All Result
Codeconvey
No Result
View All Result

How to Make Parallax Background Video with CSS3 & JavaScript

Ashfaq Ahmed by Ashfaq Ahmed
January 13, 2020
in How To
4
How to Make Parallax Background Video
0
SHARES
0
VIEWS
Share on FacebookShare on Twitter

You have given a try to parallax effect by using the images as background once in your life, right? But how about making a video as a background and create parallax animation?

Yep! that’s quite possible with JavaScript and CSS. Today, I’ll share with you a great plugin that helps you to build a parallax scrolling website.

This plugin allows you to add videos and photos both on the same page and then make a parallax effect. t supports the full range of features and allows us to do countless things.

You can define background images in different ways and also add videos as background. It allows making the video in parallax mode.

It is the smooth plugin and provides the effect for background images using CSS transforms with graceful degradation for older browsers.

It builds with jquery, but the plugin hasn’t dependencies. It supported HTML5 video, Youtube, Vimeo and other type of Iframe videos.

How to Make Parallax Background Video

It’s easy to implement, all you need to define the sections or div for each type of parallax you need. For example below is parallax for an image. The class jarallaxis required to add for any kind of effect.

<div class='jarallax' style='background-image: url(<background_image_url_here>)'>
    Your content here...
</div>

The plugin provides HTML5 title type attributes to control the effects. For example, in the below code, it hasdata-jarallax-video which allows defining video as a background instead of the image.

<div class="jarallax" data-jarallax data-jarallax-video="https://vimeo.com/110138539"></div>

You can control the speed by defining the data-jarallax

<div data-jarallax='{"speed": 0.2}' class='jarallax' style='background-image: url(<background_image_url_here>)'>
    Your content here...
</div>

Additional styles

Mandatory requirement for the plugin works correctly – The selected item should be NOT position: static (for ex. relative).

These styles need to add relative position and correct background image position before Jarallax initialize end.

.jarallax {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

JavaScript

The JavaScript also gives you controls to manage the effects and do the setting as you want. It allows the setting type of scroll, speed, and much more.

$('.jarallax').jarallax({
    speed: 0.2
});
Demo Download
Previous Post

How to Expand Text on Clicking Read More Link with Javascript

Next Post

Create Header Video Parallax Scrolling Effect with CSS

Next Post
Video Parallax Scrolling Effect

Create Header Video Parallax Scrolling Effect with CSS

Comments 4

  1. Abbaty Abdul says:
    2 years ago

    Amazing!!! what I love about this is the mobile responsive, thanks for this great tutorial

    Reply
    • Ashfaq Ahmed says:
      2 years ago

      Thank you Abbaty Abdul for liking our article. Keep visit for more amazing tutorials.

  2. Marat says:
    7 months ago

    Hello! Great plugin! Thanks!
    How can I use it with own html5 video?

    Reply
    • Muhammad Asif says:
      7 months ago

      Hi Marat!

      You can add your own video by placing the file destination to data-jarallax-video attribute in the following HTML tag.
      Suppose, your video is located in a video folder in your project. Then you can link that video as follows:

      <div class="jarallax" data-jarallax data-jarallax-video="./video/your-video.mp4"></div>
      

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe More Tutorials

Subscribe to our mailing list to receives monthly updates direct to your inbox!

You might also like

CSS Flip Animation on Hover – Flipping Card

CSS Flip Animation on Hover – Flipping Card

January 7, 2020
CSS Percentage Circle

Pure CSS Percentage Circle With Animation

January 21, 2023
CSS Glow Button Hover Effect

Pure CSS Button Shine/Glow Effect on Hover

December 23, 2019
Easy to Apply CSS Image Hover Transition Effects

CSS Image Hover Transition Effects

December 5, 2019
Codeconvey

© 2023 Codeconvey.com - All rights reserved.

Navigate Site

  • Home
  • About Us
  • Contact us
  • License
  • Disclaimer
  • DMCA
  • Terms & Conditions

Follow Us

No Result
View All Result
  • Home
  • CSS Animation
  • CSS Navigation
  • HTML Forms
  • Hover Effects
  • CSS Slideshow
  • Layout
  • Modal & Popup
  • How To
  • Resources

© 2023 Codeconvey.com - All rights reserved.