Sexy Image effect like Flash in Pure CSS3
by nikesh on 02/07/10 at 2:55 pm
Till now We all have seen lots of image effect developed in CSS3 like Sexy Image Hover Effects. But today I am going to show a very different image effect using only CSS3.Previously this kind of effect is only possible in flash or js but now this can be done easily in CSS3.
In this example I have used CSS3 animation property and little bit js (js is just for changing the images randomly).
Below I have attached the snapshot , to view the original output please visit DEMO.
Now let go through the code.
Below code is for the first effect.
HTML
<div class='image-outer'>
<div class='ex1' id='ex1-1'></div>
<div class='ex1' id='ex1-2'></div>
<div class='ex1' id='ex1-3'></div>
<div class='ex1' id='ex1-4'></div>
<div class='ex1' id='ex1-5'></div>
<div class='ex1' id='ex1-6'></div>
<div class='ex1' id='ex1-7'></div>
<div class='ex1' id='ex1-8'></div>
<div class='ex1' id='ex1-9'></div>
<div class='ex1' id='ex1-10'></div>
<div class='ex1' id='ex1-11'></div>
<div class='ex1' id='ex1-12'></div>
<div class='ex1' id='ex1-13'></div>
<div class='ex1' id='ex1-14'></div>
<div class='ex1' id='ex1-15'></div>
</div>
CSS
.image-outer{
height:225px;
width:400px;
overflow:hidden;
-webkit-box-shadow:0px 0px 5px #efefef;
box-shadow:0px 0px 5px #efefef;
-moz-box-shadow:0px 0px 5px #efefef;
padding:4px;
}
.ex1{
opacity:0;
background-image:url('/image/01.jpg');
-webkit-animation-duration: 8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-name: animation1;
width:100%;
height:15px;
}
#ex1-2{
-webkit-animation-delay:0.2s;
background-position:0 -15px;
}
#ex1-3{
-webkit-animation-delay:0.4s;
background-position:0 -30px;
}
#ex1-4{
-webkit-animation-delay:0.6s;
background-position:0 -45px;
}
#ex1-5{
-webkit-animation-delay:0.8s;
background-position:0 -60px;
}
#ex1-6{
-webkit-animation-delay:1s;
background-position:0 -75px;
}
#ex1-7{
-webkit-animation-delay:1.2s;
background-position:0 -90px;
}
#ex1-8{
-webkit-animation-delay:1.4s;
background-position:0 -105px;
}
#ex1-9{
-webkit-animation-delay:1.2s;
background-position:0 -120px;
}
#ex1-10{
-webkit-animation-delay:1s;
background-position:0 -135px;
}
#ex1-11{
-webkit-animation-delay:0.8s;
background-position:0 -150px;
}
#ex1-12{
-webkit-animation-delay:0.6s;
background-position:0 -165px;
}
#ex1-13{
-webkit-animation-delay:0.4s;
background-position:0 -180px;
}
#ex1-14{
-webkit-animation-delay:0.2s;
background-position:0 -195px;
}
#ex1-15{
background-position:0 -210px;
}
@-webkit-keyframes animation1 {
0%{ width:0;opacity:0;margin-left:200px;-webkit-transform: rotateZ(30deg);}
10%{ width:400px;opacity:1;margin-left:0px; -webkit-transform: rotateZ(0deg);}
65%{ width:400px;opacity:1;margin-left:0px;-webkit-transform: rotateZ(0deg);}
80%{ width:0;opacity:0;margin-left:200px;-webkit-transform: rotateZ(30deg);}
100%{ width:0;opacity:0;margin-left:200px;-webkit-transform: rotateZ(30deg);}
}
here i m using little bit js for changing the images randomly(used mootools)
JS
As my animation duration is 8s so I have to change background image after 8s.
var imgArr = ['/image/01.jpg','/image/02.jpg' ....];
setInterval ( "changeImage()", 8000 );
function changeImage(){
var ran = $random(0, imgArr.length-1)
$$('.ex1').each(function(val){
val.setStyle('background-image','url('+imgArr[ran]+')');
});
}
Thats it.Although there are lots of div’s but the effect look nice, isn’t it.
To view the original output please visit DEMO.
Hope you guys like these effects.Please don’t forget to drop your comments.
Mircea
Jul 6th, 2010
Nice! Keep articles like this coming!
nikesh
Jul 9th, 2010
@Mircea thank a lot ..
Pourquoi faut-il se passer d’Internet Explorer? « Artrycom, webdesign, graphisme, tutoriels
Jul 19th, 2010
[...] un exemple rencontré sur le site http://nikesh.me qui met à l’honneur un effet apparaissant au passage de la souris sur une photo. Il s’agit de [...]
Ramachandran
Aug 22nd, 2010
Hey looks cool and awesome…
Great work… Thanks for sharing your stuffs…
Keep rocking..
nikesh
Aug 23rd, 2010
@Ram …. again thanks to you ..
July’s Best Resources for CSS3
Sep 2nd, 2010
[...] 2. Sexy Image effect like Flash in Pure CSS3 [...]
Gayle
Sep 7th, 2010
Thank you for showing what CSS3 can do.
July’s Best Resources for CSS3 | ESSAAR ITI Blog
Sep 14th, 2010
[...] 2. Sexy Image effect like Flash in Pure CSS3 [...]
July’s Best Resources for CSS3
Sep 14th, 2010
[...] 2. Sexy Image effect like Flash in Pure CSS3 [...]
Adriana
Oct 2nd, 2010
Beautiful effect. Thank you for sharing the code.
CSS3 Tutorials to Brighten Up Your Day - Noupe Design Blog
Jan 25th, 2011
[...] Sexy Image Effects Similar to Flash – in Pure CSS3 Here is a very different image effect that can be achieved by not only using Flash but also CSS3: [...]
fmvilas
Jan 25th, 2011
Nice man! Thanks a lot!
30 примеров того, что можно сделать при помощи CSS3
Jan 26th, 2011
[...] 17. Смена изображение при помощи эффектов как в flash [...]
ahkeno
Jan 27th, 2011
What’s great work! Thank for sharing..
Gruby
Feb 25th, 2011
Great work.
it’d be great, to see the code for animation3.
CSS3 Tutorials to Brighten Up Your Day - desmaksolutions.com | desmaksolutions.com
Apr 30th, 2011
[...] Sexy Image Effects Similar to Flash – in Pure CSS3 Here is a very different image effect that can be achieved by not only using Flash but also CSS3: [...]
Tereza
Jul 20th, 2011
hi, it´s fantastic, but i have a problem. I need stop the animation in 100% in css. In 0% – opacity is 0 and in 100% is 1 and after that i want to see the full image with opacity 1, but it always turn to opacity 0.
109 interesantes tutoriales y recursos CSS3 | Digisolnet Blog
Jul 30th, 2011
[...] Imagen con efecto estilo flash con CSS3 [...]
CSS3 Tutorial and Resoruces | Avazio
Aug 17th, 2011
[...] CSS3 border images • CSS3 background images • Flash-style image effect using CSS3 • Image hover effects using CSS3 • Creating a Polaroid photo viewer with CSS3 and jQuery [...]
45+ Handy CSS3 Tools, Tutorials and Resources | CS5 Design
Aug 23rd, 2011
[...] Sexy Image effect like Flash in Pure CSS3 [...]
29+ Interesting CSS3 Tutorials | Pixel2Pixel Design
Oct 31st, 2011
[...] Pure CSS3In this tutorial you will learn how to create a sexy sliding image gallery in pure CSS3.3. Sexy Image effect like Flash in Pure CSS3In this tutorial artist is going to show a very different image effect using only CSS3. Previously [...]
keivix
Jan 11th, 2012
hi .
very good …
but where your pictures ???
CSS3 Tutorials « CSS Tips
Jan 13th, 2012
[...] Sexy Image Effects Similar to Flash – in Pure CSS3Here is a very different image effect that can be achieved by not only using Flash but also CSS3: [...]
wei.qing
Feb 12th, 2012
Thank for sharing..
dynamic
Mar 28th, 2012
really nice work.. ! can you plz send me the code of 4rth picture animation on my email address….
dynamic
Mar 28th, 2012
niceee
Dmitry
May 23rd, 2012
Very nice sample. I want to use such method
109 Awesome CSS3 Tutorials & Resources | Internet Web Hosting Blog
Aug 6th, 2012
[...] CSS3 border images • CSS3 background images • Flash-style image effect using CSS3 • Image hover effects using CSS3 • Creating a Polaroid photo viewer with CSS3 and jQuery • [...]
Rajesh
Oct 20th, 2012
Hi,
Thank for sharing….
Tnx
Amith Dandin
Nov 12th, 2012
Hello, Its awesome awesome….!
i really like it
+918792582039
Handy CSS3 Tools, Tutorials and Resources : HueDesigner
Jan 5th, 2013
[...] Sexy Image effect like Flash in Pure CSS3 [...]
CSS3 Tutorials
Mar 26th, 2013
[...] Sexy Image Effects Similar to Flash – in Pure CSS3 Here is a very different image effect that can be achieved by not only using Flash but also CSS3: [...]
dapo
Jul 5th, 2013
i coudn’t believe it was a pure css until i saw the source code….. ice job keep it up. please send me your twitter handle
dapo
Jul 5th, 2013
i coudn’t believe it was a pure css until i saw the source code….. nice job keep it up. please send me your twitter handle
DIVYA
Oct 5th, 2013
It’s amazing.
But I am facing a problem in running script.
I have placed script in script tag after the style tag.
Due to thing only one image is repeating itself after every transition. Images are not changing after transition.
CSS3 Tutorials to Brighten Up Your Day | The News Block
Nov 1st, 2013
[...] Sexy Image Effects Similar to Flash – in Pure CSS3 Here is a very different image effect that can be achieved by not only using Flash but also CSS3: [...]
Hayden
Oct 31st, 2014
Cool stuff! What an impact
Thank you for sharing
Regards
Charol
Jul 28th, 2016
I love your writing style truly loving this website.