PSD-HTML. These Pixel perfect HTML pages will be tested on Chrome, Firefox, IE, Safari on OS X and Windows Imajine will help you create your own fan page in facebook with an eye appealing graphic banner for its welcome page Custom CMS theme building weboranje.com - showcase of inspirational web 2.0 websites
CSS3 ‘cross-fade()’ notation and Transition effect

With css3 'cross-fade()' notation we can create simple, clean image transition between two images.

cross-fade() :

When transitioning between images, CSS requires a way to explicitly refer to the intermediate image that is a combination of the start and end images. This is accomplished with the ‘cross-fade()’ function, which indicates the two images to be combined and how far along in the transition the combination is. Authors may also use the ‘cross-fade()’ function for many simple image manipulations, such as tinting an image with a solid color or highlighting a particular area of the page by combining an image with a radial gradient.

The syntax for ‘cross-fade()’ is defined as:

<image-combination> = cross-fade( <image >, <image>, <percentage>)

An Example of image transition: Rollover the image to view the effect



CSS3 Code:

<style>
#cf {
position:relative;
height:628px;
width:370px;
margin:0 auto;
}

#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
opacity:0;
}
</style>

<div id="cf">
<img class="bottom" src="crossfade2.jpg" />
<img class="top" src="crossfade1.jpg" />
</div>

With a bit of tweeking to this style and a small potion of script along with jquery.min.js we can create a chic photo slideshow

An example

1 2 3 4

Code used:

<style>
p#controls {
text-align:center; padding-top:20px;
}

#controls span {
padding:5px;
cursor:pointer;
background-color:#6C7959;
margin-top:5px;
}

#cf2 {
position:relative;
float:left;
display:block;
width:100%;
margin:0;
height:300px;
}

#cf2 img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}

#cf2 img.opaque {
opacity:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
filter: alpha(opacity=1);
}

</style>

<script>
$(document).ready(function()
{
$("#controls span").click(function()
{
$("#cf2 img").removeClass("opaque");
var imageToShow = $(this).attr("id").replace("for-", "");
console.log(imageToShow);
$("#cf2 #"+imageToShow).addClass("opaque");
$("#controls span").removeClass("selected");
$(this).addClass("selected");

});
}); </script>

<div id="cf2">
<img id="image-1" src="crossfade1.jpg" class="opaque" />
<img id="image-2" src="crossfade2.jpg" />
<img id="image-3" src="crossfade2.jpg" />
<img id="image-4" src="crossfade2.jpg" />
</div>

<p id="controls">
<span class="selected" id="Span1">1</span>
<span id="Span2">2</span>
<span id="Span3">3</span>
<span id="Span4">4</span>
</p>

Photographs - courtesy Flickr


Tags - CSS3 cross fade(), css3 photo slideshow, css3 transition and animation

Bookmark and Share
HI, AM JAY, AND I IMAJINE
I am a freelance web designer and web application developer with over 7 years of result oriented experience. I am accustomed to working in a dynamic and goal oriented client environment. My strengths include the ability to visualize, personalize and create a truly unique and enthralling web presence. My passion apart from web design, logo design, Flash animation / actionscripting, CMS Customization, print and web development includes photography, game programming, tutorial development (includes Adobe Flash, Adobe Fireworks and Adobe Photoshop) and blogging.
Read more about me...
CONTACT US
Name :  
Email Address :  
 
Comments :
 
jayanthi.varma@imajine.in  |  © 2008 - 2012 Imajine.