<div class="container">
<div class="slide">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, dicta, soluta neque commodi earum esse minima beatae animi debitis officiis aut fuga voluptatem autem facilis dolorem quae cumque quam praesentium!</div>
<div class="slide">Possimus, asperiores, repellendus, dolore quidem ducimus voluptatum exercitationem maxime mollitia ea repellat iste ipsum quas cumque. Accusamus, cupiditate, aperiam nesciunt pariatur aut adipisci facilis soluta eum corporis incidunt dolorum quas.</div>
<div class="slide">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, eos, sit quam perferendis dicta sunt reiciendis nostrum autem nesciunt ex numquam quasi exercitationem officia veniam rerum accusamus alias voluptate adipisci!</div>
</div>
.container {
width: 500px;
margin: 50px auto;
font-size: 25px;
font-family:monospace;
}
.slide {
display: none;
}
.slide:first-child {
display: block;
}
.slide .char {
animation-delay: 0s, 1.25s;
}
.slide span.front, .slide span.back {
overflow: hidden;
display: inline-block;
white-space:pre;
backface-visibility: hidden;
}
.slide span.front {
animation: rotation-animation-front 1s forwards, hide-animation 0.01s forwards;
}
.slide span.back {
width: 0px;
transform: rotateX(90deg);
animation: rotation-animation-back 1s forwards, show-animation 0.01s forwards;
}
@keyframes rotation-animation-front {
to {
transform: rotateX(90deg);
}
}
@keyframes rotation-animation-back {
to {
transform: rotateX(0deg);
}
}
@keyframes hide-animation {
to {
width: 0px;
}
}
@keyframes show-animation {
to {
width: auto;
}
}
config = {
timeout: 2000,
speed: 250,
spread: 20
}
var currentSlide = 0,
nextSlide = 0,
output = '',
characters = [],
maxChars,
slides,
slidesTexts;
callback = function () {
if (currentSlide++ >= slides.length - 1) currentSlide = 0;
setTimeout(formatText, config.timeout);
}
formatText = function () {
// calculate the next slide index
nextSlide = (currentSlide + 1 >= slides.length) ? 0 : currentSlide + 1;
// Fill the characters array if not already defined
if (characters[currentSlide] == undefined) characters[currentSlide] = slides[currentSlide].innerHTML.split('');
if (characters[nextSlide] == undefined) characters[nextSlide] = slides[nextSlide].innerHTML.split('');
maxChars = Math.max(characters[currentSlide].length, characters[nextSlide].length);
var fragment = document.createDocumentFragment();
for (var i = 0; i < maxChars; ++i) {
// create all elements
var duration = config.speed / 1000;
var delay = i * (config.speed / 1000 / config.spread);
var front = document.createElement("span");
front.className = "front";
var styleFront = '-webkit-animation-delay: ' + delay + 's, ' + (delay + duration) + 's; -webkit-animation-duration: ' + duration + 's, 0.01s;' + '-moz-animation-delay: ' + delay + 's, ' + (delay + duration) + 's; -moz-animation-duration: ' + duration + 's, 0.01s;';
front.setAttribute('style', styleFront);
front.innerHTML = characters[currentSlide][i] || ' ';
var back = document.createElement("span");
back.className = "back";
var styleBack = '-webkit-animation-delay: ' + (delay + duration) + 's, ' + (delay + duration) + 's; -webkit-animation-duration: ' + duration + 's, 0.01s;' + '-moz-animation-delay: ' + (delay + duration) + 's, ' + (delay + duration) + 's; -moz-animation-duration: ' + duration + 's, 0.01s';
back.setAttribute('style', styleBack);
back.innerHTML = characters[nextSlide][i] || ' ';
var char = document.createElement("span");
char.className = "char";
char.appendChild(front)
char.appendChild(back);
fragment.appendChild(char);
}
setTimeout(function () {
callback();
}, maxChars * (config.speed / config.spread) + config.speed);
slides[0].innerHTML = "";
slides[0].appendChild(fragment);
};
slides = document.getElementsByClassName('slide');
currentSlide = 0;
nextSlide = 1;
formatText();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.