A little glowing text animation. First, some js to wrap each letter in a span. Then a keyframe animation, with animation-delay mixin, lights up each letter in succession.
A Pen by Stephen Scaff on CodePen.
<main> | |
<section class="mast"> | |
<figure class="mast__bg" style="background-image:url(https://unsplash.it/1800/800?image=893)"></figure> | |
<header class="mast__header"> | |
<h1 class="mast__title js-spanize">Incoming Transmission</h1> | |
<hr class="sep"/> | |
<p class="mast__text js-spanize"> | |
This is a story, all about how, | |
My life got twisted upside down. | |
So I'd like to tell a story, just sit right there. | |
And I'll tell you how I became the prince of Bel Air.</p> | |
</header> | |
</section> | |
</main> |
/*----- | |
Spanizer | |
- Wraps letters with spans, for css animations | |
-----*/ | |
(function($) { | |
var s, | |
spanizeLetters = { | |
settings: { | |
letters: $('.js-spanize'), | |
}, | |
init: function() { | |
s = this.settings; | |
this.bindEvents(); | |
}, | |
bindEvents: function(){ | |
s.letters.html(function (i, el) { | |
//spanizeLetters.joinChars(); | |
var spanizer = $.trim(el).split(""); | |
return '<span>' + spanizer.join('</span><span>') + '</span>'; | |
}); | |
}, | |
}; | |
spanizeLetters.init(); | |
})(jQuery); |
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> |
// Config: fonts | |
$font-mono: "Cutive Mono", monospace; | |
// Config: Ease | |
$ease-cb: cubic-bezier(.19,1,.22,1); | |
//-------------------------- | |
// nth-trans-delay() | |
// @description: Transition Delay on nth-childs | |
// @param: $delay_items: [7] - number of nth-of-type items to create | |
// @param: $delay_time:[1.5s] - transition-dealy value | |
//-------------------------- | |
@mixin nth-trans-delay($delay_items: 7, $delay_time: 0.2s){ | |
@for $i from 1 through $delay_items { | |
&:nth-child(#{$i}) { | |
transition-delay: $delay_time * $i; | |
} | |
} | |
} | |
//-------------------------- | |
// nth-ani-delay() | |
// @description: Animation Delay on nth-childs | |
// @param: $delay_items: [7] - number of nth-of-type items to create | |
// @param: $delay_time:[1.5s] - transition-dealy value | |
//-------------------------- | |
@mixin nth-ani-delay($delay_items: 7, $delay_time: 0.2s){ | |
@for $i from 1 through $delay_items { | |
&:nth-child(#{$i}) { | |
animation-delay: $delay_time * $i; | |
} | |
} | |
} | |
//-------------------------- | |
// bg-overlay() | |
// @description:pseduo overlay element | |
// @param: $bg_hex: [$color-dark] - hex value for rgba conversion | |
// @param: $bg_opacity:[0.6] - alpha transparency level | |
// @param: $top_layer: element or class name for higher z-index layer | |
//-------------------------- | |
@mixin bg-overlay($bg_hex: #111, $bg_opacity: 0.6, $top_layer: 'header') { | |
&:after { | |
z-index: 0; | |
content: ''; | |
position: absolute; | |
top: 0; | |
left: 0; | |
height: 100%; | |
width: 100%; | |
background: rgba($bg_hex, $bg_opacity); | |
} | |
// Layer atop overlay | |
& > #{$top_layer}{ | |
z-index: 2; | |
position: relative; | |
} | |
} | |
//Setups | |
*, *:before, *:after { | |
box-sizing: border-box; | |
} | |
// Body | |
body { | |
margin: 0; | |
width: 100%; | |
font-family: $font-mono; | |
line-height: 1.5; | |
font-weight: 400; | |
font-style: normal; | |
-ms-text-size-adjust: 100%; | |
-webkit-text-size-adjust: 100%; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
text-rendering: optimizeLegibility; | |
} | |
.sep{ | |
border: 0; | |
width: 3em; | |
height: 1px; | |
margin: 1em 0; | |
background-color: rgba(255,255,255,0.4); | |
} | |
.mast{ | |
position: relative; | |
display:flex; | |
align-items: center; | |
width: 100%; | |
height: 100vh; | |
color: #fff; | |
background-color: #111; | |
@include bg-overlay(#111, 0.9); | |
&__bg{ | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100vh; | |
margin: 0; | |
padding: 0; | |
background-size: cover; | |
background-position: 50%; | |
} | |
&__header{ | |
padding: 5%; | |
} | |
&__title{ | |
font-family: $font-mono; | |
font-size: 1em; | |
font-weight: 400; | |
letter-spacing: 0.3em; | |
text-transform: uppercase; | |
} | |
// Letter animation | |
&__title span{ | |
animation: letter-glow 0.7s 0s ease both; | |
@include nth-ani-delay(25, 0.05s); | |
} | |
//Letter animation | |
&__text{ | |
font-family: $font-mono; | |
font-size: 1em; | |
margin: 0 0 0.5em; | |
line-height: 1.5; | |
white-space: pre; | |
} | |
&__text span{ | |
animation: letter-glow 0.7s 0s ease both; | |
@include nth-ani-delay(180, 0.05s); | |
} | |
} | |
// Letter Glow | |
@keyframes letter-glow{ | |
0% { opacity: 0; text-shadow: 0px 0px 1px rgba(255,255,255,0.1)} | |
66% { opacity: 1; text-shadow: 0px 0px 20px rgba(255,255,255,0.9) } | |
77% { opacity: 1; } | |
100% { opacity:0.7; text-shadow: 0px 0px 20px rgba(255,255,255,0.0)} | |
} |
<link href="https://fonts.googleapis.com/css?family=Cutive+Mono" rel="stylesheet" /> |
A little glowing text animation. First, some js to wrap each letter in a span. Then a keyframe animation, with animation-delay mixin, lights up each letter in succession.
A Pen by Stephen Scaff on CodePen.