VIG | Podnikatel33
KPCKevin Powell - Community
•Created by VIG | Podnikatel33 on 9/27/2023 in #front-end
Animate on scroll
Hello, could you guys help please?
I’m having trouble animating my h1’s on scroll, everything seems to work fine when I animate it with pure css, unless I use phone browsers.
Then I tried AOS GitHub library. And there seems to be problem with putting it on h1
I also tried to put h1 in a div, doesn’t seem to work right as well.
Could you maybe advise me a solid way to animate my web-pages?
8 replies
KPCKevin Powell - Community
•Created by VIG | Podnikatel33 on 9/21/2023 in #front-end
JS not selecting my element
Hello, I was trying to copy a design I found.
It’s a “scroll to top” button. But the problem is it doesn’t work. I will provide code and some details. I haven’t found any answers on internet.
HTML
<div class=“to-top”></div>
CSS
.to-top {
Position:fixed
Width: 2rem
Height:2rem
Bottom:5%
Left:%
Opacity:0
Transition: all .4s
Cursor:none
Background: url
Background-size: cover
}
.to-top.show {
Opacity:1
Bottom:5%
Cursor: pointer
}
JS
Const toTop = document.querySelect(“.to-top”);
toTop.addEventListener(“scroll”, () => {
If(window.scrollY > 100) {
toTop.classList.add(“show”);
} else {
toTop.classList.remove(“show”);
} )
Sorry for indentation and semicolons in css a wrote it all on phone and from memory. So please be patient with me. But I can’t sleep I need answers 😆.
Also I used ID of an element so if you click it goes to top already. But the problem is that the button never shows up. I want it to show up latter. So that’s why “scrollY > 100”
Also I’m using parallax effect on the page so its in wrapper which is set to width 100vh. Could that be a problem? That the pageYOffset or scrollY is not taking in any value?
Also 2. It doesn’t show any JS event when I inspect the element with Mozilla web tools
Can anyone help?
🙏🏼 thank you
70 replies