时间戳

首页 > 解决方案 > 我怎样才能让我的 CSS 文本动画仅在用户向下滚动到该页面时出现

javascript - 我怎样才能让我的 CSS 文本动画仅在用户向下滚动到该页面时出现

问题描述

p.amt 基本上是我的关于我的摘要，但是关于我的部分位于我的网页底部，我希望文本仅在用户向下滚动到该部分时滑过，而不是在网络时出现动画页面加载。

p.amt {
            position: relative;
            color: white;
            bottom: var(--vamt);
            font-size: 20px;
            font-family: "Comic Sans MS", cursive, sans-serif;
            animation: amtslide 4s 1;
            left: 50px;
        }

    @keyframes amtslide {
            0% {text-align:left; left:-1500px;}
            25%{text-align:left; left:-1000px;}
            50% {text-align:left; left:-500px;}
            100% {bottom: var(--vamt); left: 50px;}
        }

标签： javascriptjqueryhtmlcssfrontend

解决方案

这可以使用Waypoints jQuery 插件来完成

将此添加到您的 index.html：

<script src="js/jquery.waypoints.min.js"></script>

在您的 .js 文件中：

$(document).ready(function() {
$('.p.amt').waypoint(function() {
$('.p.amt').css({
animation: "amtslide 4s 1",
opacity: "1"
});
}, { offset: '75%' });

offset百分比是指触发动画的窗口高度的百分比。当元素的顶部距离窗口顶部的 75% 时，将触发此特定偏移量。

推荐阅读