Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bounce Back...
<body>
<section>
<span>J</span>
<span>e</span>
<span>n</span>
<span>n</span>
<span>i</span>
<span>f</span>
<span>e</span>
<span>r</span>
<p> </p>
<span>S</span>
<span>t</span>
<span>e</span>
<span>w</span>
<span>a</span>
<span>r</span>
<span>t</span>
</section>
</button>
</body>
document.body.onload = function() {
var span = document.getElementsByTagName("span");
var arr = Array.from(span);
var sample;
var id = setInterval(change, 500);
function change() {
sample = (_.sample(arr));
sample.style.opacity = '1';
sample.style.transform = 'translateY(200px)';
arr = _.remove(arr, function(x){
return x !== sample;
});
if(arr.length === 0) {
clearInterval(id);
}
}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
* {
box-sizing: border-box;
}
body {
width: 100%;
position: fixed;
}
section {
display: flex;
width: 50%;
margin: auto;
}
p {
margin: 15px;
}
span {
margin: auto;
letter-spacing: 8px;
color: red;
font-family: "Muli", sans-serif;
font-size: 40px;
opacity: 0;
transition: all 1s cubic-bezier(0, 1, 0.5, 3), opacity 0.1s ease-in-out;
}
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.