We Keep Coding

Implementing a full page animated loader

I have created a ripple full page loader. I'm trying to create the one like here.
I want the code to be simple with no plugins ideally.
I can load the page preloader but am wondering how I get the loading page to disappear once the main page has loaded? The page just will not fade! Have researched and tried all sorts of methods.
This is the code so far:
// Page loading animation
$(window).on('load', function() {
if ($('.cover').length) {
$('.cover').parallax({
imageSrc: $('.cover').data('image'),
zIndex: '1'
});
}
$("#preloader").animate({
'opacity': '0'
}, 600, function() {
setTimeout(function() {
$("#preloader").css("visibility", "hidden").fadeOut();
}, 300);
});
});
#preloader {
overflow: hidden;
background-color: #fb5849;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: fixed;
z-index: 99999;
color: #fff;
}
#preloader .jumper {
left: 0;
top: 0;
right: 0;
bottom: 0;
display: block;
position: absolute;
margin: auto;
width: 50px;
height: 50px;
}
#preloader .jumper>div {
background-color: #fff;
width: 10px;
height: 10px;
border-radius: 100%;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
opacity: 0;
width: 50px;
height: 50px;
-webkit-animation: jumper 1s 0s linear infinite;
animation: jumper 1s 0s linear infinite;
}
#preloader .jumper>div:nth-child(2) {
-webkit-animation-delay: 0.33333s;
animation-delay: 0.33333s;
}
#preloader .jumper>div:nth-child(3) {
-webkit-animation-delay: 0.66666s;
animation-delay: 0.66666s;
}
#-webkit-keyframes jumper {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
5% {
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
#keyframes jumper {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
5% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div id="preloader">
<div class="jumper">
<div></div>
<div></div>
<div></div>
</div>
</div>

You can do it as below, using vanilla JavaScript. You can adapt it for jQuery. Also you can remove that setTimout, added just for testing purpose.
window.addEventListener("load", () => {
setTimeout(() => {
document.getElementById("preloader").classList.add("hide");
}, 1000);
});
#preloader {
overflow: hidden;
background-color: #fb5849;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: fixed;
z-index: 99999;
color: #fff;
opacity: 1;
transition: opacity 1s;
}
#preloader.hide {
opacity: 0;
pointer-events: none;
}
#preloader .jumper {
left: 0;
top: 0;
right: 0;
bottom: 0;
display: block;
position: absolute;
margin: auto;
width: 50px;
height: 50px;
}
#preloader .jumper > div {
background-color: #fff;
width: 10px;
height: 10px;
border-radius: 100%;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
opacity: 0;
width: 50px;
height: 50px;
-webkit-animation: jumper 1s 0s linear infinite;
animation: jumper 1s 0s linear infinite;
}
#preloader .jumper > div:nth-child(2) {
-webkit-animation-delay: 0.33333s;
animation-delay: 0.33333s;
}
#preloader .jumper > div:nth-child(3) {
-webkit-animation-delay: 0.66666s;
animation-delay: 0.66666s;
}
#-webkit-keyframes jumper {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
5% {
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
#keyframes jumper {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
5% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div id="preloader">
<div class="jumper">
<div></div>
<div></div>
<div></div>
</div>
</div>

Issue with adding a new animation to the text

I have a text which appears when I run contrastShow function like this:
const contrast = document.getElementById("contrast");
function contrastHide() {
//sfxPlay(sfx.caption_hide);
contrast.classList.add("contrastHide");
contrast.classList.remove("contrastShow");
}
function contrastShow(text) {
contrast.innerHTML = text;
contrast.classList.add("contrastShow");
contrast.classList.remove("contrastHide");
}
contrastShow("This is the text");
setTimeout(() => {
contrast.classList.add("zoomIn");
}, 3000);
.contrast-container {
overflow: hidden;
height: 10vh;
width: 100%;
z-index: 11;
/*outline: 0.1vw dashed orange;*/
}
.vertical-center-contrast {
position: absolute;
top: 73.5vh; /*top: 82vh;*/
padding-top: 10px;
margin: 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.contrast {
position: relative;
font-family: "Vazir";
direction: rtl;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
font-size: 2vw;
color: rgb(248, 247, 250);
opacity: 0;
margin: 0 auto;
}
.contrastShow {
animation: contrastAnimeShow 0.3s ease-in-out;
animation-fill-mode: forwards ;
}
.contrastHide {
animation: contrastAnimeHide 0.3s ease-in-out;
animation-fill-mode: forwards ;
}
#-webkit-keyframes contrastAnimeShow {
0% { opacity: 0; top: 4vh }
100% { opacity: 1; top: 1.2vh }
}
#-webkit-keyframes contrastAnimeHide {
0% { opacity: 1; top: 1.2vh }
100% { opacity: 0; top: 4vh }
}
.zoomIn {
-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
animation: heartbeat 1.5s ease-in-out infinite both;
}
#-webkit-keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
to {
-webkit-transform: scale(2);
transform: scale(2);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
<div class ="vertical-center-contrast contrast-container">
<p id="contrast" class="contrast"></p>
</div>
Then I want to animate the text by adding a new class attached to a keyframe animation (using a setTimeout at the very end f the code).
But unexpectedly the text just hides and there is no animation ?!
What I missed and how to fix this?

The heartbeat animation is running, your element is just hidden via opacity. You should set the initial value of .contrast opacity to 1 and use the backwards fill-mode. This way it doesn't fallback to 0 if you overwrite the animation.
const contrast = document.getElementById("contrast");
function contrastHide() {
//sfxPlay(sfx.caption_hide);
contrast.classList.add("contrastHide");
contrast.classList.remove("contrastShow");
}
function contrastShow(text) {
contrast.innerHTML = text;
contrast.classList.add("contrastShow");
contrast.classList.remove("contrastHide");
}
contrastShow("This is the text");
setTimeout(() => {
contrast.classList.add("zoomIn");
}, 3000);
.contrast-container {
overflow: hidden;
height: 10vh;
width: 100%;
z-index: 11;
/*outline: 0.1vw dashed orange;*/
}
.vertical-center-contrast {
position: absolute;
top: 73.5vh; /*top: 82vh;*/
padding-top: 10px;
margin: 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.contrast {
position: relative;
font-family: "Vazir";
direction: rtl;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
font-size: 2vw;
color: rgb(248, 247, 250);
opacity: 1;
top: 1.2vh;
margin: 0 auto;
}
.contrastShow {
animation: contrastAnimeShow 0.3s ease-in-out;
animation-fill-mode: backwards ;
}
.contrastHide {
animation: contrastAnimeHide 0.3s ease-in-out;
animation-fill-mode: backwards ;
}
#-webkit-keyframes contrastAnimeShow {
0% { opacity: 0; top: 4vh }
100% { opacity: 1; top: 1.2vh }
}
#-webkit-keyframes contrastAnimeHide {
0% { opacity: 1; top: 1.2vh }
100% { opacity: 0; top: 4vh }
}
.zoomIn {
-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
animation: heartbeat 1.5s ease-in-out infinite both;
}
#-webkit-keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
to {
-webkit-transform: scale(2);
transform: scale(2);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
<div class ="vertical-center-contrast contrast-container">
<p id="contrast" class="contrast"></p>
</div>

How to apply a hover effect on an element which has already been handled by an forward animation?

I have a text and block in an animation of an SVG element.
Here in my example i simplified everything.
I want to have one initial animation and afterwards a hover animation on the block element. The initial animation is fine as it is. (use chrome to have equals measurements). But after the initial animation the user should be able to hover the block and the block itself should resize (which is also working already) and the text should get an opacity of 1. But this won't work since the opacity is already set by the keyframe animation.
Any suggestions on how to work around on this one?
I don't mind if i use JS or CSS or any frameworks. I don't rely on CSS animations. Just used them because i thought i'd be cleaner.
Important Edit: I forgot a simple but very important thing. Before the animation there are some other animations on different elements. So i have a delay of let's say 2 seconds. Before the animation starts, the opacity should be 0 so the text is not visible until the animation starts. Sorry, forgot about that!
.text{
font-weight: bold;
opacity: 0;
transition: all .8s;
animation: showText 3s ease-in-out forwards;
animation-delay: 2s;
}
.text:hover{
opacity: 1;
transition: all .8s;
}
.block{
top: 50px;
left: 50px;
position: absolute;
height: 20px;
width: 20px;
background-color: red;
transition: all .8s;
animation: popup 3s ease-in-out;
animation-delay: 2s;
}
.block:hover{
transform: scale(2);
transition: all .8s;
}
#keyframes showText {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
#keyframes popup {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
<div class='text'>
Foo Bar!
</div>
<div class='block'>
</div>
codepen.io link (same code as above): https://codepen.io/jdickel/pen/xJbQrY

Instead of a forwards animation, you can simply set the initial opacity to 0.3.
EDIT:
I'm fairly confident that forwards animation styles can't be easily overridden (though I'm unable to find it in documentation for some reason), so you could do similarly to what was originally suggested and just extend the time of the animation like so:
.text{
font-weight: bold;
/* Start out at 0.3 */
opacity: 0.3;
transition: all .8s;
/* 2s + 3s = 5s */
animation: showText 5s ease-in-out; /* no forwards */
}
.text:hover{
opacity: 1;
transition: all .8s;
}
.block{
top: 50px;
left: 50px;
position: absolute;
height: 20px;
width: 20px;
background-color: red;
transition: all .8s;
animation: popup 3s ease-in-out;
}
.block:hover{
transform: scale(2);
transition: all .8s;
}
#keyframes showText {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
/* Note the new animation keyframe locations */
70% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
#keyframes popup {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
<div class='text'>
Foo Bar!
</div>
<div class='block'>
</div>

First, you need to remove forwards from the .text animation. You can use Javascript's mouseenter and mouseleave events to set the text's opacity when .block is hovered over.
.text{
font-weight: bold;
opacity: 0;
transition: all .8s;
animation: showText 3s ease-in-out;
animation-delay: 2s;
}
.text:hover{
opacity: 1;
transition: all .8s;
}
.block{
top: 50px;
left: 50px;
position: absolute;
height: 20px;
width: 20px;
background-color: red;
transition: all .8s;
animation: popup 3s ease-in-out;
animation-delay: 2s;
}
.block:hover{
transform: scale(2);
transition: all .8s;
}
#keyframes showText {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
#keyframes popup {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
<div class='text' id="text" onmouseenter="function1()" onmouseleave="function2()">
Foo Bar!
</div>
<div class='block' onmouseenter="function1()" onmouseleave="function2()">
</div>
<script>
setTimeout(function(){
document.getElementById("text").style.opacity = "0.3";
}, 3000)
function function1(){
document.getElementById("text").style.opacity = "1";
}
function function2(){
document.getElementById("text").style.opacity = "0.3";
}
</script>

javascript display words and smoothly animate them

I build something that should display words randomly and animate them.
What I want is a smooth scaling animation and a smooth fading out(blur) animation.
I have almost archive it but doesn't look smooth and I'd love to integrate Greensock using TweenMax with it. Is anyone able to help me to integrate TweenMax with it?
[
var interval = 600;
var width = 800;
var height = 300;
var words = [
'Liberty',
'Morality',
'Modesty',
'Curiosity',
'Imagination',
'Excitement',
'Structure',
'Intellect',
'Friendliness',
'Conversation'
];
var wordPlacementInterval = setInterval(function() {
var currentWord = words.shift();
if (currentWord) {
var word = document.createElement('span');
word.innerHTML = currentWord;
word.style.top = Math.floor((Math.random() * height) + 1) + 'px';
word.style.left = Math.floor((Math.random() * width) + 1) + 'px';
document.body.appendChild(word);
document.querySelector('#wordcloud').appendChild(word);
} else {
clearInterval(wordPlacementInterval);
}
}, interval);
//Something like this ? how can I implement this?
var scale_tween = TweenMax.to('span', 1, {
transform: 'scale(.75)',
ease: Linear.easeNone
});
#wordcloud span {
text-align: center;
font-size: 3rem;
opacity: 1;
display: inline-block;
transform-origin: bottom;
transition: all 500ms ease-in-out;
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translateZ(0);
backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased;
transform: translate3d(-0%, -0%, 0);
color: #565656;
}
#wordcloud span:nth-child(1) {
animation: letterspacing1 5s infinite alternate;
transition-delay: .1s;
}
#wordcloud span:nth-child(2) {
animation: letterspacing2 5s infinite alternate;
transition-delay: .5s;
}
#wordcloud span:nth-child(3) {
animation: letterspacing3 5s infinite alternate;
transition-delay: 1.04s;
}
#wordcloud span:nth-child(4) {
animation: letterspacing4 5s infinite alternate;
transition-delay: .9s;
}
#wordcloud span:nth-child(5) {
animation: letterspacing5 5s infinite alternate;
transition-delay: .6s;
}
#wordcloud span:nth-child(6) {
animation: letterspacing6 5s infinite alternate;
transition-delay: 1.6s;
}
#wordcloud span:nth-child(7) {
animation: letterspacing7 5s infinite alternate;
transition-delay: .7s;
}
#wordcloud span:nth-child(8) {
animation: letterspacing8 5s infinite alternate;
transition-delay: 1.8s;
}
#wordcloud span:nth-child(9) {
animation: letterspacing9 5s infinite alternate;
transition-delay: 2.3s;
}
#wordcloud span:nth-child(10) {
animation: letterspacing10 5s infinite alternate;
transition-delay: 1s;
}
#keyframes letterspacing1 {
0% {
opacity: 0;
}
50% {
opacity: 1;
filter: blur(0rem);
}
100% {
opacity: 0;
transform: scale(1.1);
letter-spacing: 2px;
filter: blur(0.2rem);
}
}
#keyframes letterspacing2 {
0% {
opacity: 0;
}
50% {
opacity: 1;
filter: blur(0rem);
}
100% {
opacity: 0;
transform: scale(1.1);
letter-spacing: 2px;
filter: blur(0.2rem);
}
}
#keyframes letterspacing3 {
0% {
opacity: 0;
}
50% {
opacity: 1;
filter: blur(0rem);
}
100% {
opacity: 0;
transform: scale(1.1);
letter-spacing: 2px;
filter: blur(0.2rem);
}
}
#keyframes letterspacing4 {
0% {
opacity: 0;
}
50% {
opacity: 1;
filter: blur(0rem);
}
100% {
opacity: 0;
transform: scale(1.1);
letter-spacing: 2px;
filter: blur(0.2rem);
}
}
#keyframes letterspacing5 {
0% {
opacity: 0;
}
50% {
opacity: 1;
filter: blur(0rem);
}
100% {
opacity: 0;
transform: scale(1.1);
letter-spacing: 2px;
filter: blur(0.2rem);
}
}
#keyframes letterspacing6 {
0% {
opacity: 0;
}
50% {
opacity: 1;
filter: blur(0rem);
}
100% {
opacity: 0;
transform: scale(1.1);
letter-spacing: 2px;
filter: blur(0.2rem);
}
}
#keyframes letterspacing7 {
0% {
opacity: 0;
}
50% {
opacity: 1;
filter: blur(0rem);
}
100% {
opacity: 0;
transform: scale(1.1);
letter-spacing: 2px;
filter: blur(0.2rem);
}
}
#keyframes letterspacing8 {
0% {
opacity: 0;
}
50% {
opacity: 1;
filter: blur(0rem);
}
100% {
opacity: 0;
transform: scale(1.1);
letter-spacing: 2px;
filter: blur(0.2rem);
}
}
#keyframes letterspacing9 {
0% {
opacity: 0;
}
50% {
opacity: 1;
filter: blur(0rem);
}
100% {
opacity: 0;
transform: scale(1.1);
letter-spacing: 2px;
filter: blur(0.2rem);
}
}
#keyframes letterspacing10 {
0% {
opacity: 0;
}
50% {
opacity: 1;
filter: blur(0rem);
}
100% {
opacity: 0;
transform: scale(1.1);
letter-spacing: 2px;
filter: blur(0.2rem);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wordcloud"></div>

How do I put 'fadein' and 'animate' texts in the middle of the page?

I was wondering if it is possible to assign a group of stacking texts in the middle of the page? placing them in the center wasn't too difficult, but the problem was that they are positioned left, right, top, and bottom, which I think means they need to be given: position:absolute. Furthermore, the .headline texts are given fade-in(opacity 0 to 100) and animation commands. In terms of scaling, the texts are responsive, and get smaller as the window gets smaller. In addition they are assigned their own z-index.
In the image below, I have laid out the overall structure I would like to achieve, but I'm experiencing a lot of difficulty doing so because of the text behaviors I want to accomplish.
For functionality reference, here is a jsfiddle.
Please help me and thank you in advance! Please note that I would prefer to use CSS only since it's a simple function that only occurs once upon page load. However, if this is a issue that only javascript can solve, please let me know :)
.animated {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
-ms-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.fade {
-webkit-animation-name: fade;
-moz-animation-name: fade;
-o-animation-name: fade;
animation-name: fade;
}
#-webkit-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes flowright {
0% {
opacity: 0;
left: -100px;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes flowright {
0% {
opacity: 0;
left: -100px;
}
100% {
opacity: 1;
left: 0;
}
}
#-webkit-keyframes flowleft {
0% {
opacity: 0;
right: -100px;
}
100% {
opacity: 1;
right: 0;
}
}
#keyframes flowleft {
0% {
opacity: 0;
right: -100px;
}
100% {
opacity: 1;
right: 0;
}
}
#-webkit-keyframes flowup {
0% {
opacity: 0;
margin-top: 100px;
}
100% {
opacity: 1;
margin-top: 0;
}
}
#keyframes flowup {
0% {
opacity: 0;
margin-top: 100px;
}
100% {
opacity: 1;
margin-top: 0;
}
}
#-webkit-keyframes flowdown {
0% {
opacity: 0;
margin-top: -100px;
}
100% {
opacity: 1;
margin-top: 0;
}
}
#keyframes flowdown {
0% {
opacity: 0;
margin-top: -100px;
}
100% {
opacity: 1;
margin-top: 0;
}
}
.flow {
display: inline-block;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
-webkit-animation-direction: alternate;
-webkit-animation-fill-mode: both;
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.right {
-webkit-animation-name: flowright;
animation-name: flowright;
}
.left {
-webkit-animation-name: flowleft;
animation-name: flowleft;
}
.up {
-webkit-animation-name: flowup;
animation-name: flowup;
}
.down {
-webkit-animation-name: flowdown;
animation-name: flowdown;
}
.sequence01 {
-webkit-animation-delay: 0.1s;
}
.sequence02 {
-webkit-animation-delay: 0.2s;
}
.sequence03 {
-webkit-animation-delay: 0.3s;
}
.sequence04 {
-webkit-animation-delay: 0.4s;
}
/* Headline Typography */
.headline {
font-family: helvetica;
font-weight: bold;
font-size: 4em;
}
/* Rows */
.row01, .row02, .row03 {
clear: both;
}
.row01 {
left:20%;
top: 0;
position: relative;
}
.row02 {
right:10%;
top: 50%;
position: relative;
}
.row03 {
left:10%;
top: 100%;
position: relative;
}
/* General Structure */
body {
width: 100%;
height: 100%;
}
.pagewrap {
height: 100%;
width: 80%;
max-width: 48em;
margin: 0 auto;
background-color: #fff6d6;
}
<body>
<div class="pagewrap">
<div class="headline">
<div class="row01 flow left sequence01">ROW 01</div>
<br/>
<div class="row02 flow right sequence02">ROW 02</div>
<br/>
<div class="row03 flow up sequence03">ROW 03</div>
</div>
</div>
</body>

The solution given by adeneo in the comments may work perfectly fine, but since your layout is strictly vertical, why not just use a block layout instead of inline-block or floats?
fiddle here.
You mention a "padding" percentage between the rows as well. Note that margin and padding css attributes as percentages will key off of the width not the height. I placed divs to solve that, but there are other solutions.
Edit
If the headline needs to be vertically centered to the page, here's a nifty way to do it using the "ghost element technique":
/* Headline Typography */
.wrapper {
position: relative;
height: 100%;
width: 100%;
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.wrapper:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.headline {
display: inline-block;
width: 100%;
vertical-align: middle;
font-family: helvetica;
font-weight: bold;
font-size: 4em;
}
fiddle
I learned of it here.