js-parallax | Creating a custom parallax with CSS & JavaScript | Animation library

The issue is with .getAttribute() used with data- attributes. The proper way to access those is through the HTMLElement's dataset map. Docs here: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

This works: https://codepen.io/anon/pen/zRMgyX?editors=0011

It's really good to see more programmers trying vanilla JS.

You simply have 2 errors. First you need to make sure the document is loaded before trying to access it's content. You wrap everything in this:

• You're printing the event param when the scroll's event is triggered.

• You're assigning the result of i to the only scroll event, I mean, you’re overriding the event scroll in every loop. Therefore , your scroll event will execute the logic with i = 5;

Look at this code snippet using the correct variable m and the correct event param.