This is a 10 part tutorial series to learn how to cross dissolve images, also called cross fade, in a web page and at the same time learn more about using JQuery in combination with HTML, CSS and Javascript. Designed for beginners looking to learn from practical examples. The final example is reusable in other web pages.
The HTML tags for the cross fade effect are designed so they would be independent of the demo web page. This way you can reuse the completed version in your other web pages and style as you like.
For CSS you learn to configure the position static, position absolute, position releative and z-index properties to stack images at the same location.
You will use JQuery fadeOut, JQuery next, JQuery addClass, JQuery removeClass, JQuery css, JQuery prop, JQuery show, JQuery length and JQuery first filter.
Just standard Javascript core programming skills including variables and control structures are used so it is easy to follow.
The example is built from the ground up with a mimimal starting code. This way there is no complicated starting set of code to wrap your head around before you can comfortably follow along.
The steps start with the HTML, add the CSS and then the Javascript and JQuery are added.
Start today with easy to learn courses that quicky build your website skills!
Source files: All completed files are included. See readme.txt if you want to follow along with the videos.
Download Source Files