SCSS
$main: #FFF;
$back: linear-gradient(to top, #30cfd0 0%, #330867 100%);;
.blurtext {
position: relative;
width: 100vw;
text-align: center;
font-size: 10vw;
height: 10vw;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-weight: 600;
color: $main;
span {
position: absolute;
display: block;
width: 100%;
text-align: center;
opacity: 0;
transform: perspective(100px) translateZ(10px);
filter: blur(10px);
letter-spacing: 0.1em;
&.active {
opacity: 1;
transform: perspective(100px) translateZ(0px);
filter: blur(0px);
letter-spacing: 0.15em;
transition: opacity 1000ms linear, transform 1000ms linear, filter 400ms linear, letter-spacing 1000ms linear;
}
&.past {
opacity: 0;
transform: perspective(100px) translateZ(-10px);
filter: blur(10px);
letter-spacing: 0.2em;
transition: opacity 1000ms linear, transform 1000ms linear, filter 400ms linear, letter-spacing 1000ms linear;
}
}
}
html, body {
height: 100%;
width: 100%;
}
body {
background-image: $back;
overflow: hidden;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
}
.sig {
position: fixed;
bottom: 5px;
right: 5px;
text-decoration: none;
font-size: 12px;
font-weight: 800;
font-family: sans-serif;
color: rgba(0,0,0,0.4);
}
JAVASCRIPT
setInterval(function(){
$('.blurtext span.past').removeClass('past');
$('.blurtext span.active').addClass('past').removeClass('active');
$('.blurtext span.past + span').addClass('active');
if ($('.blurtext span.active').length == 0){
$('.blurtext span:nth-child(1)').addClass('active');
}
}, 800);
