Created
September 27, 2020 22:28
-
-
Save simondodson/b43151ebf278697212c755cced5387fd to your computer and use it in GitHub Desktop.
Staggered Bouncing 3D Loading
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="loading">Loading</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let loading = document.querySelector(".loading"); | |
let letters = loading.textContent.split(""); | |
loading.textContent = ""; | |
letters.forEach((letter, i) => { | |
let span = document.createElement("span"); | |
span.textContent = letter; | |
span.style.animationDelay = `${i / 10}s`; | |
loading.append(span); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url("https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap"); | |
@function float-text-3d($shadow-color: #bbb, $depth: 10, $floating: false) { | |
$shadows: (); | |
// When dropped, it will shrink like a spring. When floating, it grows into its shape. | |
@for $i from 1 to $depth { | |
@if ($floating == false and $i > $depth / 2) { | |
$shadow-color: transparent; | |
} | |
$shadows: append($shadows, 0 ($i * 1px) $shadow-color, comma); | |
} | |
// When dropped, the shadow reveals. When floating, the shadow fades. | |
@if ($floating == false) { | |
$shadows: append($shadows, 0 10px 10px rgba(0, 0, 0, 0.4), comma); | |
} @else { | |
$shadows: append($shadows, 0 50px 25px rgba(0, 0, 0, 0.2), comma); | |
} | |
@return $shadows; | |
} | |
body { | |
display: flex; | |
height: 100vh; | |
justify-content: center; | |
align-items: center; | |
text-align: center; | |
background: #2980b9; | |
} | |
.loading { | |
display: flex; | |
color: white; | |
font-size: 5em; | |
font-family: "Baloo Bhaijaan", cursive; | |
text-transform: uppercase; | |
span { | |
text-shadow: float-text-3d($floating: false); | |
transform: translateY(20px); | |
animation: bounce 0.3s ease infinite alternate; | |
} | |
} | |
@keyframes bounce { | |
to { | |
text-shadow: float-text-3d($floating: true); | |
transform: translateY(-20px); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment