Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Expression Slider - Sliding The Right Words
<h1 class="tagline">... because
<span class="change-container">
<span class="changing">exercises</span>
<span class="changing">practice</span>
<span class="changing">mentoring</span>
<span class="changing">iterations</span>
</span>
will make you perfect</h1>
*{
margin: 0;
padding: 0;
}
body{
background: #222;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
color:#fff;
}
.tagline {
margin-top: 100px;
text-align: center;
}
.change-container {
position: relative;
display: inline-block;
width:200px;
border-bottom:1px solid red;
margin-bottom:-10px;
}
.changing {
position:absolute;
overflow:hidden;
display: inline-block;
color:red;
width:100%;
left:0;
bottom:0;
height:0;
opacity:0;
text-rendering:optimizeLegibility;
animation : revealNextWord 8s ease-in-out infinite;
}
.changing:nth-child(2) {
animation-delay:2s;
}
.changing:nth-child(3) {
animation-delay:4s;
}
.changing:nth-child(4) {
animation-delay:6s;
}
@keyframes revealNextWord {
0% { opacity: .3; height: 0; }
10% { opacity: 1; height: 1.2em; }
20% { opacity: 1; height: 1.2em; }
28% { opacity: 0; height:2em;}
100% { opacity: 0; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.