admin管理员组文章数量:1410705
this is another extremely simple question. Is it just me, or does AOS.js only work with div's?
Because in the following link, I am trying it on an h1, and it doesn't work. I try it on a div, and it works. This is part of a larger question, and that project involves divs. It does not work there either. I can delete the attributes from the page in inspect, and it shows up like it is supposed to when it reaches the scroll point.
Then I hit control z + y and then I see the animation work, just not on the scroll. Please help. Thanks for your time. Here is the link to the mini project [Edit] this one is solved, please help with the other one if you can thanks! /@astroboyr/AOSJS-testing
If you find it out, here is the bigger project if you want to help,
/@astroboyr/PianoLife
this is another extremely simple question. Is it just me, or does AOS.js only work with div's?
Because in the following link, I am trying it on an h1, and it doesn't work. I try it on a div, and it works. This is part of a larger question, and that project involves divs. It does not work there either. I can delete the attributes from the page in inspect, and it shows up like it is supposed to when it reaches the scroll point.
Then I hit control z + y and then I see the animation work, just not on the scroll. Please help. Thanks for your time. Here is the link to the mini project [Edit] this one is solved, please help with the other one if you can thanks! https://repl.it/@astroboyr/AOSJS-testing
If you find it out, here is the bigger project if you want to help,
https://repl.it/@astroboyr/PianoLife
Share Improve this question edited Jul 7, 2019 at 20:47 randomcoder asked Jul 7, 2019 at 1:29 randomcoderrandomcoder 6568 silver badges21 bronze badges 2- Please include the code next time in your question too... Adding the link is not enough. Please take look here for more information. – Whatatimetobealive Commented Jul 7, 2019 at 1:46
- @Whatatimetobealive ok – randomcoder Commented Jul 7, 2019 at 1:47
2 Answers
Reset to default 3The code you have doesn't have enough space on the bottom so that reason you are not able to see the animation. if you add more
<br> on the bottom you will see its working.
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg./[email protected]/dist/aos.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div data-aos="fade-up"></div>
<!-- works with div -->
<h1 data-aos="fade-right">Some H1</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- doesnt with h1 WHYYYYYYY -->
<script src="https://unpkg./[email protected]/dist/aos.js"></script>
<script src="script.js"></script>
</body>
</html>
In my app.js file after including the following line everything started working as expected.
import { useEffect } from 'react';
import AOS from 'aos'
import 'aos/dist/aos.css'
const App = () => {
useEffect(() => {
AOS.init({ duration: 2000 })
}, [])
return (
<div data-aos="fade-in">
</div>
)
}
export default App
It was not working earlier because I was not initializing AOS.
Note importing aos/dist/aos.css and adding useEffect is necessary for library to work properly.
本文标签： javascriptAosjs not showing elements when you scroll thereStack Overflow
版权声明：本文标题：javascript - Aos.js not showing elements when you scroll there - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745042702a2639173.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论