Hello everybody. I am still testing css animations and came across two errors/questions:
On my test page one I use a „slide down” animation of a picture.
I have inserted the code before and gave the photo a class named „slideDown“ via the extended dialog ( ) So far it works fine.
Additionally I like to use the „scroll to top“ action from Tim, which I really love for responsive webpages. The scroll to top button is revealed after 100 px of scrolling down in the browser window.
In combination of both there is a short flicker of the scroll to top button during the animation /when the page loads. (Without the animation the „scroll to top button“ works like a charm and will only revealed when scrolling down.) Can I solve this? Or do I have to accept that the codes interfere with each other?
In the second test page (test two), I do have the same code as above, but like to let the same photo, which is now placed at the bottom the page, displayed when scrolling down.
(Like items on CSS3 Animation Cheat Sheet - Justin Aguilar)
I use the following code, but maybe I have missed something basic?
THE MANUAL SAYS
Add jQuery to the element of your webpage:
Add this before the tag to trigger the animation when the user scrolls to the element:
Replace #animatedElement with the ID or class (which I did with #photo) of the element you want animated.
Replace slideUp with an animation class.
Can someone from the css pros perhaps help me out?
That would be fantastic.
Animation cheat sheet: CSS3 Animation Cheat Sheet - Justin Aguilar
Css: CSS3 Animation Cheat Sheet - Justin Aguilar
freewaytalk mailing list
Update your subscriptions at: