Background slideshow tutorial - Skin Investigation

Background slideshow tutorial

Beautiful advanced jQuery background image slideshow


It features changing text and playback controls. When the animation doesn't seem smooth, the images might not be loaded. This script can perfectly be combined with an image preloading plugin to get rid of this effect. Tested and works on Firefox, Safari, Chrome and Opera. I've used images with a width of 1500px, just to cover most of the currently used screen resolutions.

Start up your HTML/CSS/jQuery editor and let's see how you can create this effect yourself! Of course, you can also download the source and dig through the code and learn from there. As always, to explain what it does.

The idea

To understand what we need to make, I created a simple reference image. The two containers will get the background images set through jQuery and will be placed on top of each other when another image is loaded. We can fade the top container out to slowly show the container behind it.

Now that we truly know what we need to create, we can start coding!

HTML

First things first: I'm normally not a big fan of empty HTML elements which only purpuse is to be a handle for JavaScript. I'd rather let JavaScript dynamically create the element, just to keep the HTML clean (for SEO purposes for example). But in this example, I'm aiming at how to create this instead of what the best way is to create it.

Having said that, this is the HTML I came up with. Take note I left some parts out, but you can find them when downloading the source.

class="caption">

class="pictured"> Pictured:

jQuery background image slideshowAs you can see, we already created all the elements we expected to create when looking at the reference image. Take note of headerimg1 and headerimg2 which are the containers for the background images. The headernav contains three buttons that we use to control the slideshow. We also created some different handles for jQuery to easily manipulate the DOM, like firstline and secondline for the text.

This HTML is what we're going to use as the backbone of our webpage. Now on to add some design using CSS!

CSS

Like I said at the beginning of this article: The CSS in this example is pretty nifty. Therefor, I'll break it up in several parts for make some things more clear. Take note I don't sum up all the CSS properties; Just the important ones.

.headerimg { background-position: center top; background-repeat: no-repeat; position:absolute; }

This is actually the key to achieving this effect. Each headerimg has a background image (set by jQuery) which will be positioned on the center on top of the screen. By setting the no-repeat value, we only display it once. The position is set to absolute in order to place both the handles on top of each other.

#nav-outer { height:110px; position:relative; top:24px; background-image:url("../images/headerbg.png"); }

The navigation is set to a fixed height. The position is set to relative, so we can position it using the top property. The background-image is a transparent blue PNG, just for the nice effect it'll have. We could use the RGBA property here instead of the image, but that only works in CSS3 compatible browsers.

#firstline { background-image:url("../images/textbg.png"); float:left; display:block; } #secondline { background-image:url("../images/textbg.png"); float:left; display:block; clear:both; }



More about Background slideshow tutorial

NeriumAD will reduce and fade stretch marks : )

by creativspirit

See the amazing Real Results in Before/After stretch mark photos and Others on my fBook bizpage: Nerium Me Beautiful
(I can't post images here yet, am a new forum member)
NeriumAD is made from a patented extract of the Nerium Oleander plant which was discovered in Biochemical research for treating skin cancer. It is a non~toxic, non~comedogenic (won't clog pores), Paraben~free, Gluten~free, Cruelty~free night treatment Anti~aging skin cream ideal for all skin types. Consistently 20~65%+ effective on Fine lines and Wrinkles, Hyper~pigmentation, Skin texture, Aging and Sun~damaged skin, Stretch marks and Acne

CorelDRAW X7 review: Customizable features make this robust design program ..  — PCWorld
.. purchase, as well as a $25 monthly subscription. People miffed by Adobe's wholesale move to subscriptions will find a great alternative here. ..

Galaxy 61 Delivers Show Open for VH1's 'The Fabulous Life  — Animation World Network
VHI recently called upon Galaxy 61 to create a show intro for the new 2014 season of The Fabulous Life, the hit series that reveals the extravagant places, possessions and pastimes of pop-culture's most famous celebrities. The Brooklyn-based ..

Hunterdon County Polytech students bridge the gap thanks to local Rotary Clubs  — Hunterdon County Democrat
This year's Job Fair, on March 25, attracted the Dave Gansfuss Allstate Agent for an agency logo; G&H Publishing and author Katherine Kurz for children's book illustrations; Artiste Salon for a new logo, brochure and social media materials; St.

Magix Entertainment Photostory on CD & DVD 9 Deluxe
Software (Magix Entertainment)
  • Perfect slideshows in 3 minutes! New automation for stylish results in record time: now, with new thematic style templates including background music, individual...
  • 30-time award winner: the original product for creating multimedia slideshows
  • Travel route animation on online maps for vacation slideshows and DVD menus
  • New, integrated title editor with direct preview and improved quality (sharper font and softer shadows, even for small texts)
  • Automatic red eye correction, video clips can be rotated, integrated title editor, Optional: AVCHD support (import and burn hi-res videos incl. AC3 sound)
iUniverse The General Theories of Inflation, Unemployment, and Government Deficits
eBooks (iUniverse)

FAQ

Jasmine
How do I make a music slideshow?

I suppose to be a making a slideshow with music.What do I go to?How to do it?

What software are you using?
If you are using Windows Movie Maker, you can make it by first opening windows movie maker, you can find that in your programs. After opening, you can add whatever photos/videos/ and songs you like. Put them in the movie maker by opening the file. Drag all items into the timeline and add whatever graphics you want. Good luck and have fun.

Related Posts