Jednoduchý rotátor/slider obrázků a textů pouze za pomoci CSS3. U prohlížečů, které nepodporují CSS3 jde vidět pouze první obsah ze sady (první DIV). V tomto případě se točí 3 DIVy, které lze libovolně upravovat. Pokud byste potřebovali více DIVů, museli byste zasáhnout do CSS stylů.

Demo:

CSS3

Content

Rotator

HTML:
<div class="rot-container">
<div class="rot-content-1">
<h2>CSS3</h2>
</div>
<div class="rot-content-2">
<h2>Content</h2>
</div>
<div class="rot-content-3">
<h2>Rotator</h2>
</div>
</div>

CSS:

.rot-container {
width: 65%;
position: relative;
text-align: center;
display: inline-block;
padding:0;
margin:0 auto;
line-height:100px;
vertical-align:top;
background-color:#03F;
}
div[class*='rot-content-'] {
position: absolute;
width: 100%;

}
.rot-content-1 {
-webkit-animation: rotthis-1 15s;
-webkit-animation-iteration-count: infinite;
animation: rotthis-1 15s;
animation-iteration-count: infinite;
z-index: 5;
}
.rot-content-2 {
-webkit-animation: rotthis-2 15s;
animation: rotthis-2 15s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
filter: alpha(opacity=0);
-ms-filter: „progid:DXImageTransform.Microsoft.Alpha(Opacity=0)“;
opacity:0;
z-index: 0;
}
.rot-content-3 {
-webkit-animation: rotthis-3 15s;
animation: rotthis-3 15s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
filter: alpha(opacity=0);
-ms-filter: „progid:DXImageTransform.Microsoft.Alpha(Opacity=0)“;
opacity:0;
z-index: 0;
}
.rot-container h2 {
font-family: cursive;
font-size: 35px;
line-height: 40px;
color: #65a9d7;
padding: 0;
margin: 0;
text-align: center;
border: none;
text-shadow: 2px 0px 0px #FFF, -2px 0px 0px #FFF, 0px 2px 0px #FFF, 0px -2px 0px #FFF, 2px 2px 0 #FFF, -2px -2px 0 #FFF, -2px 2px 0 #FFF, 2px -2px 0 #FFF;
letter-spacing: 2px;
}
.rot-container p {
font-family: ‚Oswald‘, sans-serif;
font-size: 25px;
color: #000;
text-transform: lowercase;
font-weight: normal;
padding-left: 30px;
margin: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;

}

@-webkit-keyframes rotthis-1
{
0% {opacity: 1; z-index: 5;}
14% {opacity: 1; z-index: 5;}
18.5% {opacity: 0; z-index: 0;}
80.5% {opacity: 0;}
84.5% {opacity: 1; z-index: 5;}
100% {opacity: 1; z-index: 5;}
}
@-webkit-keyframes rotthis-2
{
0% {opacity: 0; }
15% {opacity: 0;}
19% {opacity: 1;z-index: 5;}
33% {opacity: 1;z-index: 5;}
47.5% {opacity: 1;z-index: 5;}
51.5% {opacity: 0;z-index: 0;}
100% {opacity: 0;}
}
@-webkit-keyframes rotthis-3
{
0% {opacity: 0; }
48.5% {opacity: 0;}
52.5% {opacity: 1;z-index: 5;}
66% {opacity: 1;z-index: 5;}
79.5% {opacity: 1;z-index: 5;}
83.5% {opacity: 0;z-index: 5;}
100% {opacity: 0;z-index: 0;}
}
@keyframes rotthis-1
{
0% {opacity: 1; z-index: 5;}
14% {opacity: 1; z-index: 5;}
18.5% {opacity: 0; z-index: 0;}
80.5% {opacity: 0;}
84.5% {opacity: 1; z-index: 5;}
100% {opacity: 1; z-index: 5;}
}
@keyframes rotthis-2
{
0% {opacity: 0; }
15% {opacity: 0;}
19% {opacity: 1;z-index: 5;}
33% {opacity: 1;z-index: 5;}
47.5% {opacity: 1;z-index: 5;}
51.5% {opacity: 0;z-index: 0;}
100% {opacity: 0;}
}
@keyframes rotthis-3
{
0% {opacity: 0; }
48.5% {opacity: 0;}
52.5% {opacity: 1;z-index: 5;}
66% {opacity: 1;z-index: 5;}
79.5% {opacity: 1;z-index: 5;}
83.5% {opacity: 0;z-index: 5;}
100% {opacity: 0;z-index: 0;}
}

CSS3 slides timing časování graph graf

Vytvořil jsem také CSS3 banner s jednoduchým javascriptem bez animation. A nový CSS3 banner pro obrázky.

Kategorie: ČlánkyJust for fun

2 komentáře

Honza · 28.10.2015 v 19:47

Dobrý den, trápím se s nastavením časování pro 2 div.
V div je obrázkový i textový obsah. Při mém pokusu upravit časování aktuální div skáče a změna div z 1 na 2 není plynulý jak bych potřeboval. Nedaří se mi. Můžete mi pomoci? Předem děkuji.

    admin · 14.11.2015 v 0:59

    Dobrý den, podle obrázku pro 2 slidy když to vezmu :
    @keyframes rotthis-1
    {
    0% {opacity: 1; z-index: 5;}
    45% {opacity: 1; z-index: 5;}
    50% {opacity: 0; z-index: 0;}
    95% {opacity: 0;}
    100% {opacity: 1; z-index: 5;}
    }
    @keyframes rotthis-2
    {
    0% {opacity: 0; }
    45% {opacity: 0;}
    50% {opacity: 1;z-index: 5;}
    95% {opacity: 1;z-index: 5;}
    100% {opacity: 0;}
    }

    Zkuste takto, nezkoušel jsem to, ale mělo by to jít. A kdyžtak vynechte -webkit- prefix, pokud používáte chrome. Je to zde jen pro zpětnou kompatibilitu.

Napsat komentář

Vaše emailová adresa nebude zveřejněna.

This site uses Akismet to reduce spam. Learn how your comment data is processed.