标签[animate-on-scroll] - 堆栈内存溢出

滚动挫败感的背景视频动画 - Background video animates on scrolling frustration

我即将制作一个网站，我想要一个视频背景，只在页面滚动时前进。我在年初找到了一个解决方案，但无论我如何搜索或关键字搜索再次它并惨遭失败。我记得它涉及在 After Effects 中创建并将每个帧保存为 jpg，以及如何在 html5/css/js 中对其进行编码。任何帮助将不胜感激。 ...

如何在滚动效果上添加动画以获取数据反应 - How to add animate on scroll effect to fetched data react

语境：我想向填充了来自服务器的数据的多个 div 添加 AOS 效果，这些数据在初始渲染之后渲染： import {useEffect, useState} from "react"; export const Test = () => { const [data, set ...

AOS 库：最后<div>由于页面长度未显示</div><div id="text_translate"><p>我的 html 页面中的 AOS（滚动动画）库似乎有问题。该代码工作正常，但问题是最后一个 div 不会运行其 AOS 代码（淡入右），直到用户在一定的像素范围内滚动它，这意味着如果我的高度设置为“100% "，页面将只显示 div 应该在的空白区域。这是因为最后一个 div 的内容太短，实际上无法让用户在所述范围内滚动。当然，如果我将 html 的高度扩展到比页面中元素占用的高度更长的指定值，代码运行良好，但我真的想避免这种情况，只允许最后一个 div 出现必须为用户增加一点滚动空间。我会留下一个片段来澄清。 </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> html{ height:100%; } body{ overflow-x: hidden; } h1{ font-size: 90px; text-align: center; } p{ width:50%; font-size:20px; text-align:justify; margin:auto; padding:20px; background-color: #3E9AE0; } div{ margin-bottom:50px; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> <:DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https.//unpkg.com/aos@next/dist/aos,css" /> </head> <body> <div data-aos="fade-right" data-aos-duration="1000"> <p> Lorem ipsum dolor sit amet. consectetur adipiscing elit, Curabitur sem sapien, pulvinar at condimentum vel. mollis quis erat, In consequat sem vel enim laoreet. non bibendum purus ornare. Vestibulum faucibus dictum magna in egestas. Sed laoreet in est nec hendrerit. Curabitur sed condimentum elit. Ut blandit posuere vulputate. Phasellus pharetra malesuada neque at malesuada. Aenean sed dui sit amet eros venenatis laoreet, </p> </div> <div data-aos="fade-left" data-aos-duration="1000"> <p> Lorem ipsum dolor sit amet. consectetur adipiscing elit, Curabitur sem sapien, pulvinar at condimentum vel. mollis quis erat, In consequat sem vel enim laoreet. non bibendum purus ornare. Vestibulum faucibus dictum magna in egestas. Sed laoreet in est nec hendrerit. Curabitur sed condimentum elit. Ut blandit posuere vulputate. Phasellus pharetra malesuada neque at malesuada. Aenean sed dui sit amet eros venenatis laoreet, </p> </div> <div data-aos="fade-right" data-aos-duration="1000"> <p> Lorem ipsum dolor sit amet. consectetur adipiscing elit: </p> </div> <script src="https.//unpkg.com/aos@next/dist/aos.js"></script> <script> AOS:init({ mirror,false; }); </script> </body> </html></pre></div></div><p></p></div> - AOS Library: last <div> isn't shown due to page length

我的 html 页面中的 AOS（滚动动画）库似乎有问题。该代码工作正常，但问题是最后一个 div 不会运行其 AOS 代码（淡入右），直到用户在一定的像素范围内滚动它，这意味着如果我的高度设置为“100% "，页面将只显示 div 应该在的空白区域。这是因为最后一个 div 的内容太短，实际上 ...

AOS（滚动动画）元素在 static 站点上不可见 - AOS (animate-on-scroll) elements invisible on static site

我正在为客户创建一个站点并尝试实现 AOS 库以使其看起来更加动态。我已按照GitHub的说明进行操作：添加到<head> 在</body>之前添加没运气。我已将data-aos="fade-in"应用到本网站服务部分的 div 中（缺少框应该很明显），但对我来说根本 ...

Gatsby/React - 滚动时淡出部分？ - Gatsby/React - fade out section on scroll?

我一直在尝试使用gatsby-plugin-scroll-reveal ，它使用 Sal.js 为我网站上的英雄部分设置动画。我正在努力使英雄中的文本在您向下滚动页面时淡入然后淡出。现在，我只能让它淡入。我怎样才能用 Sal.js 或其他方式做到这一点？我还通过创建一个使用 Intersec ...

使用带有类而不是数据属性的 AOS.js - Use AOS.js with class instead of data attribute

我想在我的网站上使用 AOS.js，但我无法将必要的数据属性添加到页面的 DIV。这是文档中的标记（ https://michalsnik.github.io/aos/ ）：我的标记如下所示：有什么办法可以只用类来使用 AOS.js 吗？我在研究时发现了一个类似的问题：在使用类 ...

使用Vanilla JS在小屏幕上滚动动画问题 - On scroll animation issue on small screens using Vanilla JS

我已经为我的网站创建了一个动画，以在使用Vanilla JS滚动时更改某些元素（例如其背景色）。为此，我使用了window.onscroll属性，并在window.scrollY到达特定位置时触发了动画，我的代码是：当我在大屏幕分辨率上进行编辑时，它看起来很棒，但是如果我在笔记本电 ...

当我在滚动功能上添加动画时导航栏熄灭 - Navbar goes out when I add animate on scroll feature

我正在尝试使用AOS在我的网站中实现滚动动画 HTML JS 并像使用但是我的导航栏在移动版本中消失了。看到这个和一些内容没有在这里加载，看到这个图像。 ...

选择要使用 jQuery 设置动画的元素时，AOS（滚动动画）库不起作用 - AOS (animate on scroll) library not working when selecting elements to animate with jQuery

我正在尝试使用 AOS（滚动动画）为许多页面设置 H1 元素的动画。我有几个使用标题的页面，所以我用 jQuery 选择了所有的标题。如果我在每个标题中手动输入属性，它会起作用，但在通过 jQuery 添加它们时不起作用。我用 jQuery 选择了其他元素来为它们设置动画，它们确实有效。磁贴 ...

为什么路由器插座中的动画滚动不起作用以及如何解决？ - Why does animate-on-scroll in router outlet not work and how to fix it?

我试图让动画滚动到angular7前端工作，但它不能在路由器插座中工作。我认为这与角度处理如何在路由器插座中滚动位置有关，正如滚动中的许多相关问题所示。我的问题：如何在路由器插座中实现预期的行为？这甚至可能吗？是否有人解释问题发生的原因？具体来说，一旦通过滚动到达某些 ...

为什么同一个对象可能会在不同的浏览器中返回不同的instanceof？ - How come the same object may return different instanceof in different browsers?

我正在使用AOS插件，它在自定义事件上传递一个对象。该对象如下所示：上面的对象作为e.detail传递。问题是，当我运行e.detail instanceof Element它会在IE和Edge的所有浏览器中返回true 。在IE和Edge中，它返回false ，因此我无法 ...

在具有溢出的div中使用AOS（滚动动画） - Using AOS (animate on scroll) inside a div with overflow

当我向下滚动到它们时，我真的希望某些东西可以在屏幕上生成动画，就像它们在这里一样... https://michalsnik.github.io/aos/ 问题是我的网站实际上嵌套在一个名为“ main-content”的div中，侧边栏和顶部栏分别有div。从这个问题和答案 ...

在Vue中使用AOS库 - Using AOS library with Vue

我在vue中使用AOS（滚动动画）库。 AOS提供了自定义的JS事件： document.addEventListener('aos:in', ({ detail }) => { console.log('animated in', detail); }); 我想在此事件发生时触发 ...

如何使 AOS 无法与 Slick 滑块一起使用？ - How to make AOS not working with Slick slider?

我正在使用 AOS 在滚动上显示 html 元素。它单独运行很好，但是当我在包含 Slick 滑块的页面上使用它时，应用 AOS 的元素没有显示。元素被隐藏，如果有很多滚动，看起来浏览器向 AOS 提供了关于当前滚动位置的错误信息，并且一些元素在后面显示。没有特定的代码会导致此问题，在与 A ...

在Wordpress中实施AOS可使目标元素空白而不是淡入 - Implementing AOS into wordpress makes the targeted elements blank instead of fade-in

我正在尝试将Michalsnik的Animate On Scroll插件实现到我的wordpress网站中。但是，当我按照指示使用“ data-aos”创建以下div时，该元素显示为空白而不是淡入。这是我尝试安装的方式： 1）我加了和到我的头文件以加载CS ...

fullpagejs 和 AOS - 不一起工作 - fullpagejs and AOS - not working together

我正在使用fullpagejs和AOS在滚动时从页面底部弹出一些 div（或者至少这是我想要实现的）。不幸的是，它不起作用。是的，我读过的常见问题全页的部分，是的， scrollbar设置为true ，并autoscroll设置为false 。我的设置如下： afterLoad 事 ...