Run a javascript function from HTML events

Question

I'm working on a project that animate on page scroll. This is the element I want to animate.

<h1 style="position: relative; top: 0; left: 0;"
        onscroll="animateAfterPosition(200)"
        data-animate-left="50px" data-animate-top="50px" 
        data-animate-time="0.2s">Animation on scroll</h1>

This is my JavaScript

function animateAfterPosition(scroll) {
console.log(scroll);
    function(){ 
        if (window.scrollY <= scroll) {
            this.classList.add('animateAfterPosition');
        } else {
            this.classList.remove('animateAfterPosition');
        }}

And this is my CSS

.animateAfterPosition {
transition: attr(data-animate-time);
left: attr(data-animate-left);
top: attr(data-animate-top);}

I need to run the function animateAfterPosition from the html. I expected to run the function with onscroll event, but it doesn't work. So how can I do this?

Edit
I found that css attr() is only working with the content: property and I managed to do it with JavaScript

Indeed, normal elements don't have "onload". Either the body tag, or a script tag and a jQuery onload pattern will help you. — dkellner, Jun 28 '20 at 14:05
EventListeners are best for triggering JS on an element or event: `h1.onscroll = function(){myScrollFunction};` — Dave Everitt, Jun 28 '20 at 14:10
Related: [How to access the correct `this` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — charlietfl, Jun 28 '20 at 14:18

dkellner · Answer 1 · 2020-06-28T15:00:00.483

A minimalistic solution

You can configure it using the first 4 variables in the function. I recommend adding the indicator class to the body itself and then use a selector like body.beyond-that-point h1. This way, it's possible to make several tags behave differently as the scrolling happens.

You can test it here

This version uses a fancier effect but the logic behind is the same.
https://deneskellner.com/stackoverflow-examples/62623588/index.html

<!doctype html>
<html>
<style>
    body.beyond-that-point {background:silver;}
    div.text {padding:75vh 0px;text-align:center;}
</style>
<body>

    <div class="text">
        Scroll me down and the background will change
    </div>

    <script>

        setTimeout(function() {

            var amount          = 100;                  //  how many pixels before the miracle happens
            var beyondClass     = 'beyond-that-point';  //  this class will be added
            var targetSelector  = 'body';               //  which element to add the class to
            var checkMS         = 20;                   //  check scroll position every N milliseconds

            var eClass = document.querySelector(targetSelector).classList;
            setInterval(function() {
                var y = window.scrollY;
                var c = beyondClass;
                var isBeyond = !!(y>=amount)?1:0;
                if(isBeyond==1) if(!eClass.contains(c)) eClass.add(c);
                if(isBeyond==0) if( eClass.contains(c)) eClass.remove(c);
            },checkMS);

        },1);

    </script>
</body>
</html>

Note: there are better ways to check DOM readiness but for simplicity I used setTimeout here. Feel free to change it.

score 0 · Accepted Answer · answered Jun 28 '20 at 14:48

You need to add selector to toggle class the animation. And your current css doesn't have enough height to make scrolling window. Here's an simple snippet to run your function onload, update onscroll and toggling class.

var dataAnimate = document.querySelector('[data-animate]');

function animateAfterPosition(scroll) {
  dataAnimate.classList.toggle('active', window.scrollY <= scroll);
}

window.addEventListener("scroll", function() {
  return animateAfterPosition(200);
});

.animateAfterPosition {
  transition: attr(data-animate-time);
  left: attr(data-animate-left);
  top: attr(data-animate-top);
}

[data-animate] {
  height: 1000px;
}

<body onload="animateAfterPosition(200)">
  <h1 style="position: relative; top: 0; left: 0;"data-animate-left="50px" data-animate-top="50px" data-animate-time="0.2s" data-animate>Animation on scroll</h1>
</body>

Fiddle: https://jsfiddle.net/rafonzoo/phmg0u46/

Run a javascript function from HTML events

2 Answers2

A minimalistic solution

You can test it here