I would like to add in my HTML site a fade-effect color change of the logo, either javascript or jquery.
For example:
Change from:
To:
Amongotherimages,addingallofthem:10img's.
IneffectFadeandautomatically,withoutitbeingapparentsometypeofslideorcode,becominglikenormallogo.Cananyonehelpme?
HTML:
<div class="logo">
<a href="http://core-webhosting.com.br/index.html">
<img src="http://core-webhosting.com.br/images/logo.png"alt="" />
</a>
</div>
The answer is simple: "Use only CSS". CSS3 lets you make animations with transitions the way you want!
Leave jQuery only for applications that you can not do with CSS3!
.slider {
max-width: 300px;
height: 200px;
margin: 20px auto;
position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371566801_p17tbs0rrjqdt1u4dnk94fe4b63.jpg)no-repeat center;
background-size: cover;
animation:fade 8s infinite;
-webkit-animation:fade 8s infinite;
}
.slide2 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371565525_p17tbqpu0d69c21hetd77dh483.jpeg)no-repeat center;
background-size: cover;
animation:fade2 8s infinite;
-webkit-animation:fade2 8s infinite;
}
.slide3 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371564896_p17tbq6n86jdo3ishhta3fv1i3.jpg)no-repeat center;
background-size: cover;
animation:fade3 8s infinite;
-webkit-animation:fade3 8s infinite;
}
@keyframes fade
{
0% {opacity:1}
33.333% { opacity: 0}
66.666% { opacity: 0}
100% { opacity: 1}
}
@keyframes fade2
{
0% {opacity:0}
33.333% { opacity: 1}
66.666% { opacity: 0 }
100% { opacity: 0}
}
@keyframes fade3
{
0% {opacity:0}
33.333% { opacity: 0}
66.666% { opacity: 1}
100% { opacity: 0}
}<div class='slider'>
<div class='slide1'></div>
<div class='slide2'></div>
<div class='slide3'></div>
</div>