I have seen that a lot of the animation that used to be done with flash can now be done with HTML5, CSS3 and Javascript. I have used some of the new CSS3 features, such is transformations, transitions, etc. but nothing fancy just simple stuff. I have been trying to find tutorials on how to create simple banners with HTML, CSS and Javascript but I haven’t found any. What I’m looking for is something that shows how to create simple banners that slides objects in and out from different angles, something like Apple had for a while on their website, where some images came from one side and went out from another side. Again I just need to create something simple just to get the concept, I have never used Javascrtipt/JQuery other than for simple fade-ins and animate buttons, but nothing big.
Does anybody know where can I find tutorials on how to create simple banner-like animations using html, css and possibly Javascript?
I just need to know how the images are used and how everything is put together.
Thank you ralph for your reply, I have tried Nivo Slider in the past and it is so nice but what I was looking for at this time was a tutorial on how to do animations with CSS and Javascript.
The main reason for my question is because I don’t have a clear understanding on how animations are created, I’m actually more concerned about the process not how to code them. In other words I don’t know understand where and how the images are place in the page without affecting the page layout.
This is how I understand it, which could possibly work…
1- Create a div container.
2- Give it a width and a height so you have that container as you canvas.
3- Place the different elements that are going to be used in the animation. Now, this is the tricky part and the part I don’t fully understand. Do you place your images, divs etc. inside the container hide them and then show or move them as needed OR do you fix or absolute position them outside the container and again, hide them and show them as needed?
This is for animations that show, move and hide different elements inside the container not a slide show (like a banner).
If you are going to use the parallax slider you linked to, just have a look at their code (inspect element). Yes, there is an outer div, and inner divs that contain text, images etc. With CSS you prevent them all showing at once, and with JS/CSS3 you animate them.