Home › Forums › JavaScript › Total Page Scroll Control
- This topic is empty.
-
AuthorPosts
-
April 15, 2017 at 6:56 am #253783
Shikkediel
Participantanimates.css doesn’t work
I think I didn’t really get what you were aiming at. Which animation exactly, not the fades?
April 15, 2017 at 8:40 am #253789Funkaholik
ParticipantBefore you did as you said: “It was a simple fix…”
animates.css which i’ve add to last call & message buttons
was started everytime you click link five in the navbar which was cool
But after some js changes it’s not working. i don’t understand why..(April 16, 2017 at 1:52 am #253791Funkaholik
ParticipantAt first i was talking about fades when i’ve added animate.css and figured that there is no need to keep animations in js
as you can kick animations as is by focus on a specific section of the page
Everytime i hit navbar link animations were happing after landing on an element of the page.
That’s why i’m that confused.
After some js changes none of that still working…p.S. but don’t even worry about it .. there is no place to stop =)
i can’t bugging yoy everytime s*** happens .. tired of that
plus i think i’m better end up my carrier at this point.
Can’t do that no more.
It’s just taking too much time to recreate imaginary things in the code.April 16, 2017 at 3:08 am #253792Shikkediel
ParticipantI’m sure they would all be small adjustments but to be honest I have no idea what you’re aiming at exactly. You’re not being very specific, what animation are you referring to? You’re just mentioning “link animations”, don’t know what that is supposed to mean…
April 16, 2017 at 4:19 am #253793Funkaholik
ParticipantSorry that i wasn’t clear on that ..))
i’ve added link to animates.css to head
and drop an animation (shake) to last two icons
just as an exampleit was firing up on focus but now it isn’t (i still don’t get it how but that was very handy with animate.css
exactly what i was aiming with animations in this particular situation .. click a navbar link = animation happens on focus)
plus i tried to recreate that with my own animation but they just started after page is load and that’s it.April 16, 2017 at 5:45 am #253794Shikkediel
ParticipantDunno, didn’t see that… but here it is (I think):
April 16, 2017 at 7:18 am #253795Funkaholik
Participantyep .. you’ve added animation in js but before i did it by just adding .class(animations) in css
just like that library works .. thank you anyway.,)May 11, 2017 at 12:39 pm #254753Funkaholik
ParticipantBy the way that scroll plugin Mottie was talking about .. you’ve created this already=)
Why dontcha create a repo or gist to make it public etc?May 11, 2017 at 2:07 pm #254754Mottie
MemberHehe, I did Funkaholik … https://github.com/Mottie/visualNav
May 11, 2017 at 3:43 pm #254760processprocess
ParticipantWhy not use this? 100% HTML & CSS.
Only thing is, it relies on div’s all being 100% height of page. That’s how it calculates the transformations.https://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/
January 20, 2018 at 8:38 am #265765Funkaholik
ParticipantI was thinking about how to add different animations from animate. css to different elements inside targeted sections .. say for example those last two icons in the end .. how to set different animations for each icon?
Plus animations right now trigered only on click when you just scroll to it
it seems like have no effect (only opacity)Is it possible to trigger all animations by scroll too?
here’s a sampleP.S. You know like modern pages have that scroll effect when you scroll down elements appears with different animation.
January 20, 2018 at 11:14 am #265768Beverleyh
ParticipantIf only you’d posted this question a month ago… I did exactly that here http://fofwebdesign.co.uk/template/_writing/a-mince-pie-too-many/
Scroll to the bottom for the articles that cover the JavaScript, and view the source to examine in more detail, but basically, the
elementFromTop()
function watches for when a section (a candy cane bar) hits the top of the viewport. When that happens, it adds 2 classes to the element being animated; ananimated
class, and an animation-name class, which are taken from the animate.css library (a good portion of them anyway – some animations are custom, or from magic.css, but I continued using the same logic for convenience).January 20, 2018 at 4:39 pm #265769Shikkediel
ParticipantLol, festive page there. :-)
Wasn’t too much work to adapt:
If you want, I could optimise it a bit. It could use some throttling but that’ll require some extra code.
January 22, 2018 at 8:37 am #265807Funkaholik
ParticipantThanx, Beverleyh but i’ll stick with Shik’s pen.,)
Cool .. pseudo classes selectable as well.
What you mean by throttling?January 22, 2018 at 11:17 am #265820Shikkediel
ParticipantScroll events can fire a lot, much more than necessary. Throttling means limiting the events that are executed by the script to only a certain amount per second.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.