How to add animation to the image?

hello,

I’m looking to find a way to add an animation to the image (that it arrives from right or bottom) and another small png images overlays it.
I’m still beginner but I’m learning it and appreciate your advice.

Here is the page to the page:
http://madebymaud.com/realisations/

I’d like to find a way to add another image overlaying the desktop to create movement.

Thank you.

You seem to have it working unless i’m looking at the wrong thing :slight_smile:

Paul, it’s not working as I want, it’s one image that pop-ups, I’d like to have laptop appear separately and seconds later balloons arriving… :slight_smile: and wondering how to do it.

Hi,

What you are asking is a little more involved because you are using JS to trigger your animations so this is mainly a js question with css thrown in.:slight_smile:

You can animate things in CSS3 with transitions but more complicated animation is usually done with keyframes and transforms. There is an animation-delay property you can use to delay the animation but that would need to be tied into the start of the other animation you are doing which you are triggering with JS when the element is scrolled to I believe. If you coded the original yourself then you should be able to tie this in altogether but I doubt you would be asking the question if you had coded the original:)

You can find more info on animations here and a little [URL=“justinaguilar.com/animations/index.htm”]cheat sheet here.

Making two or more animations happen after a delay is not that difficult and you can find an example here of sequenced animation (Just click edit this pen in the bottom left corner to see the code).

The difficulty will be tying all that in with your current routine as it seems to be quite advanced and involving JS to trigger it all with the scroll of the screen.

To build something like that you should start on a stand alone page and work on the animation effect first and once perfected then integrate into the page. Sorry I can’t give more specific examples but this is something you are going to have to build.