1. 首页
  2. 问题列表
  3. 从HTML事件运行javascript函数
提问者：小点点

从HTML事件运行javascript函数


我正在做一个项目，在页面滚动动画。 这就是我想要动画化的元素。

<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>

这是我的JavaScript

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

这是我的CSS

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

我需要从HTML运行函数animateAfterPosition。 我期望用onscroll事件运行该函数，但它不起作用。 那么我该怎么做呢？


共3个答案

匿名用户

你需要添加选择器来切换类动画。 而您当前的css没有足够的高度来制作滚动窗口。 下面是一个简单的代码片段，用于运行函数onload，update onscroll和toggling class。

null

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>

匿名用户

您可以使用函数中的前4个变量来配置它。 我建议将指示器类添加到主体本身，然后使用像body.Beyond-that-point h1这样的选择器。 通过这种方式，可以使几个标签在滚动发生时表现不同。

此版本使用了更新颖的效果，但背后的逻辑是相同的。
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>

注意:有更好的方法来检查DOM就绪情况，但是为了简单起见，我在这里使用了settimeout。 请随意更改。

匿名用户

把id给正文中的标题，写上你的负载。 如果需要支持现代浏览器，可以使用新的闪亮CSS自定义属性，而不是data-attributes和attr()。

您需要删除您的样式并添加到css。 承兑订单如下

Javascript>html> css !important > css

null

var h1=document.getElementById("h1");
function animateAfterPosition(scroll) {
setInterval(
    function(){ 
        if (window.scrollY <= scroll) {
            h1.classList.add('animateAfterPosition');
        } else {
            h1.classList.remove('animateAfterPosition');
        }
    }, 100);
}
body{
 height:1000px;
}
h1{
position: fixed;
top: 0;
left: 0;
transition:0.5s;
}

.animateAfterPosition {
  transition: var(--data-animate-time);
  left: var(--data-animate-left);
  top: var(--data-animate-top);
}
<body onload="animateAfterPosition(200)">
  <h1 id="h1"
  style="
   --data-animate-left:50px;
   --data-animate-top:50px;
   --data-animate-time:0.5s;
">Animation on scroll</h1>
</body>

相关问题