// fonts
$font-header: Shrikhand,georgia;
$font-paragraph : "Fredoka One",arial;
// colors
$color-alpha : #fe6513;
$color-beta : #facdcc;
// easings
$ease-cb: cubic-bezier(.4,0,.2,1);
$ease-cb-2: cubic-bezier(.19,1,.22,1);
$ease-cb-3: cubic-bezier(.77,0,.175,1);
$ease-cb-4: cubic-bezier(.19,0.9,.9,1);
// padding
$pad: 3em;
// mqs
$mq-med: 54em;
$mq-large: 65em;
$mq-xlarge: 91em;
//----------------------------------------------
// nth-ani-delay()
// Mixin that loops through a parent's specified number
// of child elements, applying animation-delays to create
// a staggered effect.
//
// @param: $delay_items: [7] - number of nth-of-type items to create
// @param: $delay_time:[1.5s] - transition-dealy value
//----------------------------------------------
@mixin nth-ani-delay($num_items: 7, $delay_time: 0.2s){
@for $i from 1 through $num_items {
&:nth-child(#{$i}) {
animation-delay: $delay_time * $i;
}
}
}
//-------------------------------
// Body, prevent scrolling
//-------------------------------
body{
height: 100%;
overflow-y:hidden;
}
//------------------------------------
// Button trigger
//-------------------------------------
button {
position: fixed;
bottom: 1em;
right: 1em;
display: block;
height: 4rem;
width: 4rem;
line-height: 4rem;
color: $color-beta;
background: $color-alpha;
outline: 0;
border: 0;
border-radius: 100%;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
transition: background 0.3s $ease-cb;
i {
position: relative;
top: -1px;
right: -2px;
display: block;
font-size: 2rem;
transition: color 0.4s $ease-cb;
}
&:hover {
cursor: pointer;
background: darken($color-alpha, 04);
transition: background 0.4s $ease-cb;
i {
color: #fff;
transition: color 0.4s $ease-cb;
}
}
&:active{
background: darken($color-alpha, 3);
box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.2);
transition: background 0.1s $ease-cb;
i{
transform: rotate(360deg);
transition: transform 0.5s $ease-cb;
}
}
}
//-------------------------------
// Mast
//-------------------------------
.mast{
position: relative;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align:center;
color: $color-alpha;
background-color:$color-beta;
&__header{
padding: 1em;
}
&__title{
margin: 0.15em auto;
padding: 0 1em;
font-family:$font-header;
font-size: calc(100% + 3.85vw);
color: $color-alpha;
text-shadow: 1px 1px 0px rgba(#fff, 0.5);
}
&__text{
font-size: 1em;
font-family: $font-paragraph;
text-shadow: 1px 1px 0px rgba(#fff, 0.4);
@media (min-width: $mq-med){
font-size: calc(100% + 0.5vw);
}
}
&__icon{
display: block;
font-size: 2.5em;
filter: hue-rotate(414deg) brightness(1.15) saturate(1.4);
//filter: hue-rotate(264deg) brightness(1.2) saturate(1.8);
text-shadow: 1px 1px 0px rgba(#fff, 0.6);
@media (min-width: $mq-med){
font-size: calc(100% + 3.25vw);
}
}
}
//-------------------------------
// animate container class
//-------------------------------
.animate{
// Hide overflow for slice setup
.mast__title {
overflow-y: hidden;
// Title children/letters
& > *{
display:inline-block;
min-width: 0.1em;
backface-visibility: hidden;
animation: slide-up 0.6s $ease-cb-4 both;
// Meat & Potatos of our stagger
@include nth-ani-delay(20, 0.1s);
}
}
// Text children/letters
.mast__text > *{
display: inline-block;
min-width: 0.25em;
animation: slide-right 0.6s $ease-cb-4 both;
// Stagger mixin
@include nth-ani-delay(70, 0.025s);
}
// Shake the tree
.mast__icon{
animation: shake-it 1.5s $ease-cb-4 both;
}
}
//----------------------------------------------
// Keyframe animations
//----------------------------------------------
@keyframes slide-up{
0% {
opacity: 0;
transform: translate3d(0,100%,0);
}
80%{
opacity: 1;
}
100% {
transform: translate3d(0,0,0);
}
}
@keyframes slide-right{
0% {
opacity: 0;
transform: translate3d(-2em,0,0);
}
100% {
opacity: 1;
transform: translate3d(0,0,0);
}
}
@keyframes shake-it {
0%, 100%{
transform: rotate(0deg)
}
10%, 20%, 30%, 40%, 50%{
transform: rotate(-6deg)
}
15%, 25%, 35%, 45%, 55%{
transform: rotate(6deg)
}
60%, 70%, 80%, 90%{
transform: rotate(-3deg)
}
65%, 75%, 85%, 95%{
transform: rotate(3deg)
}
}
View Compiled
/**
* Spanizer
* Wraps letters with spans, for css animations
*
* @example
<h1 class="js-letters">Letters</h1>
*/
(function($) {
var Spanizer = (function() {
/**
* Global settings
*/
var settings = {
letters: $('.js-letters'),
mast: $('.mast'),
btn: $('.btn'),
animateClass: 'animate',
};
return {
/**
* Init
*/
init: function() {
this.bind();
},
/**
* Bind Events
*/
bind: function(){
// Spanize Letters
Spanizer.doSpanize();
// Refresh animation
settings.btn.on( 'click', function(e){
e.preventDefault();
Spanizer.refreshAnimation();
});
},
/**
* Spanizer
* Wraps letters in a span
*/
doSpanize: function(){
settings.letters.html(function (i, el) {
var spanize = $.trim(el).split("");
var template = '<span>' + spanize.join('</span><span>') + '</span>'
return template;
});
},
/**
* Refresh/Rerun our animation
*/
refreshAnimation: function(){
settings.mast.removeClass(settings.animateClass);
mast.offsetWidth = mast.offsetWidth;
settings.mast.addClass(settings.animateClass);
},
};
})();
// Let's GO!
Spanizer.init();
})(jQuery);