Puro CSS/CSS3 texto rotador

Vista prévia

Descripción

Un rotador de texto con tecnología CSS3 que te permite desplazarte por una lista de texto como un ticker de noticias.

Funcionamiento

Construya la estructura HTML para un rotador de texto con flechas de navegación arriba/abajo.

<div id="rotatio-alsh" class="rotatio-container">

<a class="rotatio-reset" href="#rotatio-alsh" accesskey="r" tabindex="-1"></a>



<span id="next1" tabindex="6"></span>

<span id="previous5" tabindex="10"></span>



<span id="next2" tabindex="1"></span>

<span id="previous6" tabindex="11"></span>



<span id="next3" tabindex="2"></span>

<span id="previous1" tabindex="12"></span>



<span id="next4" tabindex="3"></span>

<span id="previous2" tabindex="7"></span>



<span id="next5" tabindex="4"></span>

<span id="previous3" tabindex="8"></span>



<span id="next6" tabindex="5"></span>

<span id="previous4" tabindex="9"></span>


<div class="rotatio-controls">


<div class="rotatio-arrows"></div>





<a class="rotatio-anchor" href="#next2" tabindex="-1"></a>


<a class="rotatio-anchor" href="#previous6" tabindex="-1"></a>





<a class="rotatio-anchor" href="#next3" tabindex="-1"></a>


<a class="rotatio-anchor" href="#previous1" tabindex="-1"></a>





<a class="rotatio-anchor" href="#next4" tabindex="-1"></a>


<a class="rotatio-anchor" href="#previous2" tabindex="-1"></a>





<a class="rotatio-anchor" href="#next5" tabindex="-1"></a>


<a class="rotatio-anchor" href="#previous3" tabindex="-1"></a>





<a class="rotatio-anchor" href="#next6" tabindex="-1"></a>


<a class="rotatio-anchor" href="#previous4" tabindex="-1"></a>





<a class="rotatio-anchor" href="#next1" tabindex="-1"></a>


<a class="rotatio-anchor" href="#previous5" tabindex="-1"></a>





<div class="rotatio-swivel">



<div class="rotatio-item">Text rotator item 1</div>



<div class="rotatio-item">Text rotator item 2</div>



<div class="rotatio-item">Text rotator item 3</div>



<div class="rotatio-item">Text rotator item 4</div>



<div class="rotatio-item">Text rotator item 5</div>



<div class="rotatio-item">Text rotator item 6</div>


</div>

</div>
</div>

Incluya la biblioteca de JS sin prefijo para que el rotador de texto funcione muy bien en los exploradores.

<script src="prefixfree.min.js"></script>

Agregue los siguientes fragmentos de código CSS/CSS3 a su documento e invalide los estilos a su gusto.

.rotatio-container > .rotatio-reset { display: none; }

/***/











.rotatio-container > .rotatio-controls {

position: absolute;

margin: auto;

top: 0em;

right: 0em;

bottom: 0em;

left: 0em;

width: 50em;

height: 3em;

background: #c0392b;
}

.rotatio-container > .rotatio-controls > .rotatio-arrows {

position: absolute;

top: 0em;

left: 0em;

width: 3em;

height: 100%;

border-right: 0.125em solid white;

box-sizing: border-box;
}

.rotatio-container > .rotatio-controls > .rotatio-arrows::before {

content: "";

position: absolute;

margin: auto;

top: 0.375em;

right: 0em;

left: 0em;

width: 0em;

height: 0em;

border-right: 0.75em solid transparent;

border-bottom: 0.75em solid white;

border-left: 0.75em solid transparent;

display: block;
}

.rotatio-container > .rotatio-controls > .rotatio-arrows::after {

content: "";

position: absolute;

margin: auto;

right: 0em;

bottom: 0.375em;

left: 0em;

width: 0em;

height: 0em;

border-top: 0.75em solid white;

border-right: 0.75em solid transparent;

border-left: 0.75em solid transparent;

display: block;
}

/***/











.rotatio-container > .rotatio-controls > .rotatio-anchor { outline: none; }

.rotatio-container > .rotatio-controls > .rotatio-anchor:active {

visibility: visible !important;

z-index: 2147483647;
}

.rotatio-container > .rotatio-controls > .rotatio-anchor:nth-of-type(n + 3) { visibility: hidden; }

.rotatio-container > .rotatio-controls > .rotatio-anchor:nth-of-type(odd) {

position: absolute;

top: 0px;

left: 0px;

width: 3em;

height: 50%;
}

.rotatio-container > .rotatio-controls > .rotatio-anchor:nth-of-type(even) {

position: absolute;

bottom: 0px;

left: 0px;

width: 3em;

height: 50%;
}

/***/











.rotatio-container > .rotatio-controls > .rotatio-swivel {

position: absolute;

right: 0em;

left: 3em;

height: 100%;
}

.rotatio-container > .rotatio-controls > .rotatio-swivel > .rotatio-item {

position: absolute;

width: 100%;

height: 100%;

color: white;

text-indent: 2em;

line-height: 2.5em;

font-size: 1.5em;

font-weight: bold;

font-family: monospace;

background: #e74c3c;
}

/***/











#rotatio-alsh > .rotatio-reset { display: none; }

#rotatio-alsh > .rotatio-controls > .rotatio-swivel {

animation: rotatio-rotate 36s both linear infinite;

transform-style: preserve-3d;
}

#rotatio-alsh > .rotatio-controls > .rotatio-swivel > .rotatio-item { backface-visibility: hidden; }

















/***/











@keyframes
 rotatio-rotate { 0% {
transform: rotateX(300deg);
}
 1.5% {
transform: rotateX(360deg);
}
 12.5% {
transform: rotateX(360deg);
}
 14% {
transform: rotateX(300deg);
}
 25% {
transform: rotateX(300deg);
}
 26.5% {
transform: rotateX(240deg);
}
 37.5% {
transform: rotateX(240deg);
}
 39% {
transform: rotateX(180deg);
}
 50% {
transform: rotateX(180deg);
}
 51.5% {
transform: rotateX(120deg);
}
 62.5% {
transform: rotateX(120deg);
}
 64% {
transform: rotateX(60deg);
}
 75% {
transform: rotateX(60deg);
}
 100% {
transform: rotateX(60deg);
}
}

















/***/

















@keyframes
 rotatio-next-1 { 0% {
transform: rotateX(60deg);
}
 86% {
transform: rotateX(-20deg);
}
 100% {
transform: rotateX(360deg) rotateX(0deg);
}
}
 @keyframes
 rotatio-next-2 { 0% {
transform: rotateX(360deg) rotateX(0deg);
}
 86% {
transform: rotateX(280deg);
}
 100% {
transform: rotateX(300deg);
}
}
 @keyframes
 rotatio-next-3 { 0% {
transform: rotateX(300deg);
}
 86% {
transform: rotateX(220deg);
}
 100% {
transform: rotateX(240deg);
}
}
 @keyframes
 rotatio-next-4 { 0% {
transform: rotateX(240deg);
}
 86% {
transform: rotateX(160deg);
}
 100% {
transform: rotateX(180deg);
}
}
 @keyframes
 rotatio-next-5 { 0% {
transform: rotateX(180deg);
}
 86% {
transform: rotateX(100deg);
}
 100% {
transform: rotateX(120deg);
}
}
 @keyframes
 rotatio-next-6 { 0% {
transform: rotateX(120deg);
}
 86% {
transform: rotateX(40deg);
}
 100% {
transform: rotateX(60deg);
}
}

















/***/

















@keyframes
 rotatio-previous-1 { 0% {
transform: rotateX(300deg);
}
 86% {
transform: rotateX(380deg);
}
 100% {
transform: rotateX(0deg) rotateX(360deg);
}
}
 @keyframes
 rotatio-previous-2 { 0% {
transform: rotateX(240deg);
}
 86% {
transform: rotateX(320deg);
}
 100% {
transform: rotateX(300deg);
}
}
 @keyframes
 rotatio-previous-3 { 0% {
transform: rotateX(180deg);
}
 86% {
transform: rotateX(260deg);
}
 100% {
transform: rotateX(240deg);
}
}
 @keyframes
 rotatio-previous-4 { 0% {
transform: rotateX(120deg);
}
 86% {
transform: rotateX(200deg);
}
 100% {
transform: rotateX(180deg);
}
}
 @keyframes
 rotatio-previous-5 { 0% {
transform: rotateX(60deg);
}
 86% {
transform: rotateX(140deg);
}
 100% {
transform: rotateX(120deg);
}
}
 @keyframes
 rotatio-previous-6 { 0% {
transform: rotateX(0deg) rotateX(360deg);
}
 86% {
transform: rotateX(80deg);
}
 100% {
transform: rotateX(60deg);
}
}

/***/











#rotatio-alsh > span[id$="1"]:focus:not(:target) ~ .rotatio-controls > .rotatio-swivel { animation: rotatio-next-1 1s both ease-out !important; }

#rotatio-alsh > span[id$="2"]:focus:not(:target) ~ .rotatio-controls > .rotatio-swivel { animation: rotatio-next-2 1s both ease-out !important; }

#rotatio-alsh > span[id$="3"]:focus:not(:target) ~ .rotatio-controls > .rotatio-swivel { animation: rotatio-next-3 1s both ease-out !important; }

#rotatio-alsh > span[id$="4"]:focus:not(:target) ~ .rotatio-controls > .rotatio-swivel { animation: rotatio-next-4 1s both ease-out !important; }

#rotatio-alsh > span[id$="5"]:focus:not(:target) ~ .rotatio-controls > .rotatio-swivel { animation: rotatio-next-5 1s both ease-out !important; }

#rotatio-alsh > span[id$="6"]:focus:not(:target) ~ .rotatio-controls > .rotatio-swivel { animation: rotatio-next-6 1s both ease-out !important; }

/***/











#next1:target ~ .rotatio-controls > .rotatio-swivel { animation: rotatio-next-1 1s both ease-out; }

#next2:target ~ .rotatio-controls > .rotatio-swivel { animation: rotatio-next-2 1s both ease-out; }

#next3:target ~ .rotatio-controls > .rotatio-swivel { animation: rotatio-next-3 1s both ease-out; }

#next4:target ~ .rotatio-controls > .rotatio-swivel { animation: rotatio-next-4 1s both ease-out; }

#next5:target ~ .rotatio-controls > .rotatio-swivel { animation: rotatio-next-5 1s both ease-out; }

#next6:target ~ .rotatio-controls > .rotatio-swivel { animation: rotatio-next-6 1s both ease-out; }

/***/











#previous1:target ~ .rotatio-controls > .rotatio-swivel { animation: rotatio-previous-1 1s both ease-out; }

#previous2:target ~ .rotatio-controls > .rotatio-swivel { animation: rotatio-previous-2 1s both ease-out; }

#previous3:target ~ .rotatio-controls > .rotatio-swivel { animation: rotatio-previous-3 1s both ease-out; }

#previous4:target ~ .rotatio-controls > .rotatio-swivel { animation: rotatio-previous-4 1s both ease-out; }

#previous5:target ~ .rotatio-controls > .rotatio-swivel { animation: rotatio-previous-5 1s both ease-out; }

#previous6:target ~ .rotatio-controls > .rotatio-swivel { animation: rotatio-previous-6 1s both ease-out; }

/***/











.rotatio-anchor:nth-of-type(11):active ~ .rotatio-swivel { animation: rotatio-next-1 1s both ease-out !important; }

.rotatio-anchor:nth-of-type(1):active ~ .rotatio-swivel { animation: rotatio-next-2 1s both ease-out !important; }

.rotatio-anchor:nth-of-type(3):active ~ .rotatio-swivel { animation: rotatio-next-3 1s both ease-out !important; }

.rotatio-anchor:nth-of-type(5):active ~ .rotatio-swivel { animation: rotatio-next-4 1s both ease-out !important; }

.rotatio-anchor:nth-of-type(7):active ~ .rotatio-swivel { animation: rotatio-next-5 1s both ease-out !important; }

.rotatio-anchor:nth-of-type(9):active ~ .rotatio-swivel { animation: rotatio-next-6 1s both ease-out !important; }

/***/











.rotatio-anchor:nth-of-type(4):active ~ .rotatio-swivel { animation: rotatio-previous-1 1s both ease-out !important; }

.rotatio-anchor:nth-of-type(6):active ~ .rotatio-swivel { animation: rotatio-previous-2 1s both ease-out !important; }

.rotatio-anchor:nth-of-type(8):active ~ .rotatio-swivel { animation: rotatio-previous-3 1s both ease-out !important; }

.rotatio-anchor:nth-of-type(10):active ~ .rotatio-swivel { animation: rotatio-previous-4 1s both ease-out !important; }

.rotatio-anchor:nth-of-type(12):active ~ .rotatio-swivel { animation: rotatio-previous-5 1s both ease-out !important; }

.rotatio-anchor:nth-of-type(2):active ~ .rotatio-swivel { animation: rotatio-previous-6 1s both ease-out !important; }

/***/



.rotatio-swivel > .rotatio-item:nth-of-type(1) { transform: rotateX(360deg) translateZ(3em); }

.rotatio-swivel > .rotatio-item:nth-of-type(2) { transform: rotateX(60deg) translateZ(3em); }

.rotatio-swivel > .rotatio-item:nth-of-type(3) { transform: rotateX(120deg) translateZ(3em); }

.rotatio-swivel > .rotatio-item:nth-of-type(4) { transform: rotateX(180deg) translateZ(3em); }

.rotatio-swivel > .rotatio-item:nth-of-type(5) { transform: rotateX(240deg) translateZ(3em); }

.rotatio-swivel > .rotatio-item:nth-of-type(6) { transform: rotateX(300deg) translateZ(3em); }

/***/











#rotatio-alsh > span:target ~ .rotatio-controls > .rotatio-anchor:nth-of-type(1),
 #rotatio-alsh > span:target ~ .rotatio-controls > .rotatio-anchor:nth-of-type(2) { visibility: hidden; }

#rotatio-alsh > span[id$="1"]:target ~ .rotatio-controls > .rotatio-anchor:nth-of-type(1),
 #rotatio-alsh > span[id$="1"]:target ~ .rotatio-controls > .rotatio-anchor:nth-of-type(2),
 #rotatio-alsh > span[id$="2"]:target ~ .rotatio-controls > .rotatio-anchor:nth-of-type(3),
 #rotatio-alsh > span[id$="2"]:target ~ .rotatio-controls > .rotatio-anchor:nth-of-type(4),
 #rotatio-alsh > span[id$="3"]:target ~ .rotatio-controls > .rotatio-anchor:nth-of-type(5),
 #rotatio-alsh > span[id$="3"]:target ~ .rotatio-controls > .rotatio-anchor:nth-of-type(6),
 #rotatio-alsh > span[id$="4"]:target ~ .rotatio-controls > .rotatio-anchor:nth-of-type(7),
 #rotatio-alsh > span[id$="4"]:target ~ .rotatio-controls > .rotatio-anchor:nth-of-type(8),
 #rotatio-alsh > span[id$="5"]:target ~ .rotatio-controls > .rotatio-anchor:nth-of-type(9),
 #rotatio-alsh > span[id$="5"]:target ~ .rotatio-controls > .rotatio-anchor:nth-of-type(10),
 #rotatio-alsh > span[id$="6"]:target ~ .rotatio-controls > .rotatio-anchor:nth-of-type(11),
 #rotatio-alsh > span[id$="6"]:target ~ .rotatio-controls > .rotatio-anchor:nth-of-type(12) { visibility: visible; }

/***/











#rotatio-alsh > span:focus ~ .rotatio-controls > .rotatio-anchor { visibility: hidden !important; }

#rotatio-alsh > span[id$="1"]:focus ~ .rotatio-controls > .rotatio-anchor:nth-of-type(1),
 #rotatio-alsh > span[id$="1"]:focus ~ .rotatio-controls > .rotatio-anchor:nth-of-type(2),
 #rotatio-alsh > span[id$="2"]:focus ~ .rotatio-controls > .rotatio-anchor:nth-of-type(3),
 #rotatio-alsh > span[id$="2"]:focus ~ .rotatio-controls > .rotatio-anchor:nth-of-type(4),
 #rotatio-alsh > span[id$="3"]:focus ~ .rotatio-controls > .rotatio-anchor:nth-of-type(5),
 #rotatio-alsh > span[id$="3"]:focus ~ .rotatio-controls > .rotatio-anchor:nth-of-type(6),
 #rotatio-alsh > span[id$="4"]:focus ~ .rotatio-controls > .rotatio-anchor:nth-of-type(7),
 #rotatio-alsh > span[id$="4"]:focus ~ .rotatio-controls > .rotatio-anchor:nth-of-type(8),
 #rotatio-alsh > span[id$="5"]:focus ~ .rotatio-controls > .rotatio-anchor:nth-of-type(9),
 #rotatio-alsh > span[id$="5"]:focus ~ .rotatio-controls > .rotatio-anchor:nth-of-type(10),
 #rotatio-alsh > span[id$="6"]:focus ~ .rotatio-controls > .rotatio-anchor:nth-of-type(11),
 #rotatio-alsh > span[id$="6"]:focus ~ .rotatio-controls > .rotatio-anchor:nth-of-type(12) { visibility: visible !important; }