Search code examples
javascriptparallax

recreate JQuery parallax effect on javascript

so i was trying to recreate the background effect used in this website :https://ddlc.moe in the code source they used JQuery for the effect but i can t read jquery is it possible to do it with javascript and i wish to respect the html format 

<div class="background">
  <div class="content" style="width:960px">
  </div>
</div>
Solution

  • There are lots of JavaScript libraries such as rellax which should be pretty easy to use

    In your example, it looks like they set up scroll listeners that override default scroll events and edit the CSS background offset of the background image whenever a scroll happens

    Edit: Check out this demo I made for you real quick https://codepen.io/mjkaufer/pen/LBQgaJ

    You can edit the background image offset with JavaScript like

    document.body.style.backgroundPositionY = contentY + "px";