Hi there

 

It's my first slide show and i can't understand it !!

Please Explain Below code to me :

 

<html>
<head>
</head>
<style type="text/css">
.slideshow-example-frame {
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
width:420px;
height:131px;
margin:30px 30px 30px 22px;
}
.slideshow-example-frame img {
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration:15s;
}
.slideshow-example-frame img {
position:absolute;
top:0;
left:0;
margin:30px;
}
</style>
<style type="text/css">
.slideshow-example-frame .img1 {
-webkit-animation-name: fadein1;
}
.slideshow-example-frame .img2 {
-webkit-animation-name: fadein2;
}
.slideshow-example-frame .img3 {
-webkit-animation-name: fadein3;
}
.slideshow-example-frame .img4 {
-webkit-animation-name: fadein4;
}
@-webkit-keyframes fadein1 {
0% {opacity:0;}
5% {opacity:1;}
25% {opacity:1;}
100% {opacity:1;}
}
@-webkit-keyframes fadein2 {
0% {opacity:0;}
25% {opacity:0.0;}
30% {opacity:1;}
50% {opacity:1;}
100% {opacity:1;}
}
@-webkit-keyframes fadein3 {
0% {opacity:0;}
50% {opacity:0;}
55% {opacity:1;}
75% {opacity:1;}
100% {opacity:1;}
}
@-webkit-keyframes fadein4 {
0% {opacity:0;}
75% {opacity:0;}
80% {opacity:1;}
100% {opacity:1;}
}
</style>
<body>
<div class="slideshow-example-frame">
<img class="img1" src="1.jpg" alt="2010 Quattroporte Sport GT-S" />
<img class="img2" src="2.jpg" alt="2010 GrandCabrio" />
<img class="img3" src="3.jpg" alt="2010 GrandTurismo S" />
<img class="img4" src="4.jpg" alt="GrandTurismo S Coupe" />
</div>
</body>
</html>

 

Thank You

Edited November 13, 201213 yr by Kamrava

Hi

 

Please explain this css code to me :

 

@-webkit-keyframes fadein1 {
0% {opacity:0;}
5% {opacity:1;}
25% {opacity:1;}
100% {opacity:1;}
}
@-webkit-keyframes fadein2 {
0% {opacity:0;}
25% {opacity:0.0;}
30% {opacity:1;}
50% {opacity:1;}
100% {opacity:1;}
}
@-webkit-keyframes fadein3 {
0% {opacity:0;}
50% {opacity:0;}
55% {opacity:1;}
75% {opacity:1;}
100% {opacity:1;}
}
@-webkit-keyframes fadein4 {
0% {opacity:0;}
75% {opacity:0;}
80% {opacity:1;}
100% {opacity:1;}
}

 

tnx

Edited November 21, 201213 yr by Renaissance-Design
Code formatting

It's something to do with CSS animations. I looked at an article about it recently but can't remember it exactly.

 

Google css3 animations.

Just a quick tip for you: comment all your code and then start to remove the comments from a line of code and see what happens to the site in the browser

 

If you don't understand a function, just google it, lots of information to be found!

It uses keyframes; the css method of animating things. The slideshow takes 15 seconds to complete (-webkit-animation-duration:15s;) and it repeats (-webkit-animation-iteration-count: infinite

@-webkit-keyframes fadein1 {
0% {opacity:0;}
5% {opacity:1;}
25% {opacity:1;}
100% {opacity:1;}
}

These things control at what time in the animation an object will do something. For example the first image is visible at 5% through the animation. 5% of 15 = 0.75 so around 1second. The next appears at 30% so 4.5 seconds. Sorry for the rushed post I've got to run. If this still needs explaining later I'll try helping

Check below links.

 

http://www.w3schools.com/cssref/css3_pr_keyframes.asp

http://css-tricks.com/snippets/css/keyframe-animation-syntax/

Those are CSS3 keyframes which control an animation. I tried explaining it in the other thread you created here.

 

 

 

 

Mod merge threads?

tnx guys

I got this part.

please explain to me other part's of this slide show on here...

tnx