How do you use css keyframes animations with javascript

How do you use css keyframes animations with javascript - javascript

Is there a way to make an object move with CSS keyframes by adding the animate property to a class. So that when you click on a certain button the class will be attached to the object, thus creating an animation? Here is the code for it
function start(){
document.getElementById('up').onclick = function() {
document.getElementById('red').className = "uppy";
};
document.getElementById('do').onclick = function() {
document.getElementById('red').className = "downy";
};
}
start();
#area {
height: 400px;
width: 400px;
border: 1px solid black;
}
#red {
height: 25px;
width: 25px;
background: red;
}
#btn-row { margin-top: 20px; }
div.downy {
-moz-animation: down 1s;
animation: down 1s;
}
div.uppy {
-moz-animation: up 1s;
animation: up 1s;
}
#keyframes down {
from { top: 0; }
to {top:5 0px; }
}
#-moz-keyframes down {
from { top: 0; }
to { top: 50px; }
}
#keyframes up {
from { bottom: 0; }
to { bottom: 50px; }
}
#-moz-keyframes up {
from { bottom: 0; }
to { bottom: 50px; }
}
<div id="area">
<div id="red"></div>
</div>
<div id="btn-row">
<button id="up">Up</button>
<button id="do">Down</button>
</div>

Set position to relative at #red element, animation-fill-mode to forwards at .downy
function start() {
document.getElementById('up').onclick = function() {
document.getElementById('red').className = "uppy";
};
document.getElementById('do').onclick = function() {
document.getElementById('red').className = "downy";
};
}
window.onload = start;
#area {
height: 400px;
width: 400px;
border: 1px solid black;
}
#red {
height: 25px;
width: 25px;
background: red;
position:relative;
}
#btn-row {
margin-top: 20px;
}
div.downy {
-moz-animation: down 1s;
animation: down 1s;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
div.uppy {
-moz-animation: up 1s;
animation: up 1s;
}
#keyframes down {
from {
top: 0px;
}
to {
top: 50px;
}
}
#-moz-keyframes down {
from {
top: 0px;
}
to {
top: 50px;
}
}
#keyframes up {
from {
bottom: 0;
}
to {
bottom: 50px;
}
}
#-moz-keyframes up {
from {
bottom: 0;
}
to {
bottom: 50px;
}
}
<div id="area">
<div id="red"></div>
</div>
<div id="btn-row">
<button id="up">Up</button>
<button id="do">Down</button>
</div>

change javascript to :
<script>
function start() {
document.getElementById('up').onclick = function(){
document.getElementById('red').className = "uppy";
}
document.getElementById('do').onclick = function(){
document.getElementById('red').className = "downy";
}
}
window.onload =start;
</script>
insert 'position:relative;' to #red in css to :
#red{ height:25px; width:25px; background:red; position:relative;}

Related

how to animate movement of div when adjacent div is set to display:none

Please check out the code here: https://jsfiddle.net/pwasoutside/uaqbj30z/2/
You can see that posts appear on screen and then fade away after a few seconds. But, after a post is set to display:none, the post below immediately moves upward. I want this movement to be animated. How can I do this?
css:
.post {
background-color: red;
color: white;
width: 300px;
height: 50px;
display: block;
transition: transform 3s ease;
}
.hidden {
animation: fadeaway 2s;
}
#keyframes fadeaway {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
js:
var posts = document.getElementById('posts');
var i = 0;
var interval = setInterval(() => {
if (i<5) {
var post = document.getElementById('post' + i);
post.classList.add('hidden');
i++;
} else {
clearInterval(interval);
}
}, 3000);

Please try this:
html, body {
height: 100%;
margin: 0px;
}
#posts {
height: 100%;
}
.post {
background-color: red;
color: white;
width: 100%;
height: 100%;
display: block;
transition: transform 3s ease;
margin: 0px;
}
p {
margin: 0px;
}
.hidden {
animation: fadeaway 2s;
}
#keyframes fadeaway {
from {
opacity: 1;
height: 100%;
}
to {
opacity: 0;
height: 0px;
margin: 0px;
}
}

#keyframes fadeaway {
0% {
opacity: 1;
height: 100%;
}
50% {
opacity: 0;
}
100%{
height: 0px;
margin: 0px;
}
}
as per Vahid's answer, the opacity and height animates simultaneously. Mine will first fade and then height changes.

how to add loading.. on ajax response

i have loading html css code as i pasted here,now in my ajax response Now Loading: Please Wait i want to replace it by custom html css loading page, how can i do this?
$(document).on('open.zf.reveal', "#site_modal_5", function (e) {
var $modal = $(this);
var ajax_url = $modal.data("ajax-url");
if (ajax_url) {
$modal.html("Now Loading: Please Wait ");
$.ajax(ajax_url).done(function (response) {
$modal.html(response);
});
}
});
.container {
height: 100vh;
width: 100vw;
font-family: Helvetica;
}
.loader {
height: 20px;
width: 250px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.loader--dot {
animation-name: loader;
animation-timing-function: ease-in-out;
animation-duration: 3s;
animation-iteration-count: infinite;
height: 20px;
width: 20px;
border-radius: 100%;
background-color: black;
position: absolute;
border: 2px solid white;
}
.loader--dot:first-child {
background-color: #8cc759;
animation-delay: 0.5s;
}
.loader--dot:nth-child(2) {
background-color: #8c6daf;
animation-delay: 0.4s;
}
.loader--dot:nth-child(3) {
background-color: #ef5d74;
animation-delay: 0.3s;
}
.loader--dot:nth-child(4) {
background-color: #f9a74b;
animation-delay: 0.2s;
}
.loader--dot:nth-child(5) {
background-color: #60beeb;
animation-delay: 0.1s;
}
.loader--dot:nth-child(6) {
background-color: #fbef5a;
animation-delay: 0s;
}
.loader--text {
position: absolute;
top: 200%;
left: 0;
right: 0;
width: 4rem;
margin: auto;
}
.loader--text:after {
content: "Loading";
font-weight: bold;
animation-name: loading-text;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#keyframes loader {
15% {
transform: translateX(0);
}
45% {
transform: translateX(230px);
}
65% {
transform: translateX(230px);
}
95% {
transform: translateX(0);
}
}
#keyframes loading-text {
0% {
content: "Loading";
}
25% {
content: "Loading.";
}
50% {
content: "Loading..";
}
75% {
content: "Loading...";
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class='loader'>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--text'></div>
</div>
</div>

You can change the $modal.html('your text') with the loader's HTML. See the snippet below.
I have added .loader-container so you can hide the loader inside as it probably should not be visible all the time. Also, you can easily use jQuery .html() to append the inner content to the modal. In this case .loader.
var $loader = $('.loader-container');
$(document).on('open.zf.reveal', "#site_modal_5", function(e) {
var $modal = $(this);
var ajax_url = $modal.data("ajax-url");
if (ajax_url) {
$modal.html($loader.html());
$.ajax(ajax_url).done(function(response) {
$modal.html(response);
});
}
});
.container {
height: 100vh;
width: 100vw;
font-family: Helvetica;
}
.loader-container .loader {
display: none;
}
.loader {
height: 20px;
width: 250px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.loader--dot {
animation-name: loader;
animation-timing-function: ease-in-out;
animation-duration: 3s;
animation-iteration-count: infinite;
height: 20px;
width: 20px;
border-radius: 100%;
background-color: black;
position: absolute;
border: 2px solid white;
}
.loader--dot:first-child {
background-color: #8cc759;
animation-delay: 0.5s;
}
.loader--dot:nth-child(2) {
background-color: #8c6daf;
animation-delay: 0.4s;
}
.loader--dot:nth-child(3) {
background-color: #ef5d74;
animation-delay: 0.3s;
}
.loader--dot:nth-child(4) {
background-color: #f9a74b;
animation-delay: 0.2s;
}
.loader--dot:nth-child(5) {
background-color: #60beeb;
animation-delay: 0.1s;
}
.loader--dot:nth-child(6) {
background-color: #fbef5a;
animation-delay: 0s;
}
.loader--text {
position: absolute;
top: 200%;
left: 0;
right: 0;
width: 4rem;
margin: auto;
}
.loader--text:after {
content: "Loading";
font-weight: bold;
animation-name: loading-text;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#keyframes loader {
15% {
transform: translateX(0);
}
45% {
transform: translateX(230px);
}
65% {
transform: translateX(230px);
}
95% {
transform: translateX(0);
}
}
#keyframes loading-text {
0% {
content: "Loading";
}
25% {
content: "Loading.";
}
50% {
content: "Loading..";
}
75% {
content: "Loading...";
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class="loader-container">
<div class='loader'>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--text'></div>
</div>
</div>
</div>
Another approach is to make the loader's HTML code as a string in JS, so you can use it in the .html() for the modal as this example:
var loader = `
<div class='loader'>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--text'></div>
</div>
`;
$modal.html(loader);
EDIT: This is a working example with a fake modal and ajax request. I am using setTimeout to reproduce the delay from the ajax request. Probably the error is somewhere else in your code.
Probably the best approach, if you have access to the modal's HTML, is to add your loader code inside the modal in the HTML and change it with the ajax response when the request is ready.
var $loader = $('.loader-container');
var $btn = $('.btn-modal');
$btn.on('click', function(e) {
var $modal = $('.modal');
$modal.addClass('open');
$modal.html($loader.html())
setTimeout(function() {
$modal.html(`<div><h2>Your response code when ajax is successfuly completed</h2></div>`)
}, 3000);
});
.container {
height: 100vh;
width: 100vw;
font-family: Helvetica;
}
.loader-container .loader {
display: none;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
padding: 20px;
background: teal;
color: red;
opacity: 0;
visibility: hidden;
}
.modal.open {
opacity: 1;
visibility: visible;
}
.loader {
height: 20px;
width: 250px;
margin: auto;
}
.loader--dot {
animation-name: loader;
animation-timing-function: ease-in-out;
animation-duration: 3s;
animation-iteration-count: infinite;
height: 20px;
width: 20px;
border-radius: 100%;
background-color: black;
position: absolute;
border: 2px solid white;
}
.loader--dot:first-child {
background-color: #8cc759;
animation-delay: 0.5s;
}
.loader--dot:nth-child(2) {
background-color: #8c6daf;
animation-delay: 0.4s;
}
.loader--dot:nth-child(3) {
background-color: #ef5d74;
animation-delay: 0.3s;
}
.loader--dot:nth-child(4) {
background-color: #f9a74b;
animation-delay: 0.2s;
}
.loader--dot:nth-child(5) {
background-color: #60beeb;
animation-delay: 0.1s;
}
.loader--dot:nth-child(6) {
background-color: #fbef5a;
animation-delay: 0s;
}
.loader--text {
position: absolute;
top: 200%;
left: 0;
right: 0;
width: 4rem;
margin: auto;
}
.loader--text:after {
content: "Loading";
font-weight: bold;
animation-name: loading-text;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#keyframes loader {
15% {
transform: translateX(0);
}
45% {
transform: translateX(230px);
}
65% {
transform: translateX(230px);
}
95% {
transform: translateX(0);
}
}
#keyframes loading-text {
0% {
content: "Loading";
}
25% {
content: "Loading.";
}
50% {
content: "Loading..";
}
75% {
content: "Loading...";
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<button class="btn-modal">Click here to open the modal</button>
<div class="modal">
<div class="modal__content">Modal content to be changed with loader or response</div>
</div>
<div class="loader-container">
<div class='loader'>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--dot'></div>
<div class='loader--text'></div>
</div>
</div>
</div>

Delay on keyframe animation

I want to had a delay with a keyframe animation, but it doesn't work.
It's a div with an opacity animation on a click button. The problem is that the opacity is 100% before the animation start.
$('button').click(function() {
if ($(this).hasClass("clicked")) {
$('div').removeClass('In');
$('div').addClass('Out');
$(this).text("Open ↓");
$(this).removeClass("clicked");
} else {
$('div').addClass('In');
$('div').removeClass('Out');
$(this).text("Close ↑");
$(this).addClass("clicked");
}
});
body {
text-align: center
}
div {
display: inline-block;
background: pink;
height: 300px;
width: 300px;
opacity: 0;
}
button {
font-size: 16px;
}
#keyframes In {
0% {
opacity: 0;
height: 0
}
100% {
opacity: 1;
height: 300px
}
}
#keyframes Out {
0% {
opacity: 1;
height: 300px
}
100% {
opacity: 0;
height: 0
}
}
.In {
animation-duration: 800ms;
animation-name: In;
animation-delay: 0.3s;
opacity: 1;
}
.Out {
animation-duration: 800ms;
animation-name: Out;
animation-delay: 0.3s;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Open ↓ </button> <br>
<div> </div>
Here's MY JSFIDDLE with a problem.

Use transition instead of animation and you will also have an easier code:
$('button').click(function() {
if ($(this).hasClass("clicked")) {
$(this).text("Open ↓");
} else {
$(this).text("Close ↑");
}
$('div.box').toggleClass('In');
$(this).toggleClass("clicked");
});
body {
text-align: center
}
div.box {
display: inline-block;
background: pink;
height: 0;
width: 300px;
opacity: 0;
transition: .8s .3s;
}
button {
font-size: 16px;
}
div.In {
opacity: 1;
height: 300px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Open ↓ </button> <br>
<div class="box"> </div>
Considering your code you may correct it like this:
$('button').click(function() {
if ($(this).hasClass("clicked")) {
$('div').removeClass('In');
$('div').addClass('Out');
$(this).text("Open ↓");
$(this).removeClass("clicked");
} else {
$('div').addClass('In');
$('div').removeClass('Out');
$(this).text("Close ↑");
$(this).addClass("clicked");
}
});
body {
text-align: center
}
div {
display: inline-block;
background: pink;
height: 300px;
width: 300px;
opacity: 0;
}
button {
font-size: 16px;
}
#keyframes In {
0% {
opacity: 0;
height: 0
}
100% {
opacity: 1;
height: 300px
}
}
#keyframes Out {
0% {
opacity: 1;
height: 300px
}
100% {
opacity: 0;
height: 0
}
}
.In {
animation-duration: 800ms;
animation-name: In;
animation-delay: 0.3s;
animation-fill-mode:forwards; /*Added this*/
/* opacity:0; removed*/
}
.Out {
animation-duration: 800ms;
animation-name: Out;
animation-delay: 0.3s;
animation-fill-mode:forwards; /*Added this*/
opacity:1;
height:300px; /*Added this*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Open ↓ </button> <br>
<div> </div>

Check if banner is loaded

Hi i Have a custom made banner with following code
body,
html {
width: 100%;
height: 100%;
margin: 0;
font-family: Arial, serif;
color: #003C78;
}
a {
color: #003C78;
}
.banner-wrap {
display: flex;
width: 728px;
height: 90px;
}
.page-container {
position: relative;
overflow: hidden;
width: 100%;
}
.page-container img {
width: 100%
}
.image-wrapper,
.text-wrapper {
position: absolute;
height: auto;
width: 411px;
}
.image-wrapper {
top: 0;
right: -155px;
z-index: 2;
animation: slideLeft 14.5s infinite ease 0s normal forwards;
}
.image-wrapper img {
position: absolute;
left: 0px;
top: -100px;
width: 150%
}
.text-wrapper h1,
.text-wrapper h2 {
position: absolute;
left: 90px;
padding: 0;
opacity: 0;
z-index: 3;
font-size: 1.3em;
}
.text-wrapper h1 {
animation: fade infinite 14.5s linear 0s normal forwards;
animation-delay: 4s;
top: 15px;
}
.text-wrapper h2 {
animation: fadeNew infinite 14.5s linear 0s normal forwards;
animation-delay: 7.8s;
}
.text-wrapper img {
position: absolute;
left: 50px;
bottom: 30px;
width: 468px;
height: 180px
}
.red-wrapper {
position: absolute;
bottom: 0px;
z-index: 9;
right: -600px;
color: #fff;
animation: slideLeftNew 14.5s infinite ease 0s normal forwards;
animation-delay: 7s;
padding-left: 15px;
border-bottom: 100px solid #E6000A;
border-right: 50px solid transparent;
height: 0;
width: 120px;
}
.red-wrapper h3 {
font-size: 1.1em;
font-weight: 300;
margin-top: 26px;
}
.logo img {
width: 80px;
height: auto;
margin: 17px;
}
img.kitchen {
transform: translateY(-40%);
-webkit-transform: translateY(-40%);
-ms-transform: translateY(-40%);
width: 63%;
position: absolute;
left: -18px;
animation: moveUp 14.5s infinite ease 0s normal forwards;
}
img.wall {
width: 11%;
position: absolute;
left: 0;
z-index: 9;
}
#keyframes slideLeft {
20.95% {
right: -155px
}
85%,
27.19% {
right: 135px;
}
}
#keyframes slideLeftNew {
15.95% {
right: -220px
}
20.19%,
37% {
right: 0
}
42% {
right: -220px;
}
}
#keyframes fade {
0% {
opacity: 0
}
23%,
14.38% {
opacity: 1
}
26% {
opacity: 0
}
}
#keyframes fadeNew {
0% {
opacity: 0
}
30%,
14.38% {
opacity: 1
}
33% {
opacity: 0
}
}
#keyframes moveUp {
0% {
transform: translateY(-40%);
}
50% {
transform: translateY(-45%);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Hawa Sliding Solutions</title>
<meta content="text/html;charset=UTF-8" http-equiv="content-type">
</head>
<body>
<a href="http://hawa-suono.com/" target="_blank">
<div class="banner-wrap">
<div class="logo"><img src="logo.png"></div>
<div class="page-container">
<div class="text-wrapper">
<h1>Den Alltag auf stumm schalten.</h1>
<h2>Hawa Suono – die schalldichte Lösung.</h2>
</div>
<img class="wall" src="wall.png" />
<img class="kitchen" src="kitchen3.jpg" />
<div class="image-wrapper"><img src="tuer2.jpg" /></div>
<div class="red-wrapper">
<h3>Jetzt die Weltneuheit entdecken.</h3>
</div>
</div>
</div>
</a>
</body>
</html>
Now I need to check if the banner is loaded and work, and if it is not, then I need to put another image instead of the banner. I tried a lot of things, to check if image is there, to check if css is loaded, to check is the document loaded, but that solution can not work, because I must only check if the banner is loaded, not the whole document. So now, I am stacked and do not know what to do next.Also, I can not use jquery, only pure javascript.
Any help?
Thanks

If using JS,
function imgError(image) {
image.onerror = "";
image.src = "/images/wall.gif";
return true;
}
<img src="wall.png" onerror="imgError(this);"/>
Without JS,
<img src="wall.png" onError="this.onerror=null;this.src='/images/wall.gif';" />

you can do it with jquery
//check all images on the page
$('img').each(function(){
var img = new Image();
img.onload = function() {
console.log($(this).attr('src') + ' - done!');
}
img.src = $(this).attr('src');
});
working fiddle : http://jsfiddle.net/kalmarsh80/nrAPk/

how to use document.getElementsByClassName("classname") with style.animation

getElementbyID works since IDs have to be unique and thus the function always returns exactly one element (or null if none was found).
Got struck with the class name.
How can i add the style.animation to the class name ?
function myFunction() {
document.getElementsByClassName("myDIV").style.WebkitAnimation = "mynewmove 4s 2";
document.getElementsByClassName("myDIV").style.animation = "mynewmove 4s 2";
}
.myDIV {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 1s infinite;
/* Chrome, Safari, Opera */
animation: mymove 1s infinite;
}
#-webkit-keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
#-webkit-keyframes mynewmove {
from {
top: 0px;
}
to {
top: 200px;
}
}
#keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
#keyframes mynewmove {
from {
top: 0px;
}
to {
top: 200px;
}
}
<button onclick="myFunction()">Try it</button>
<div class="myDIV"></div>

getElementsByClassName returns a HTMLCollection, therefore, you either need to access specific items([0]) or iterate over them
function myFunction() {
document.getElementsByClassName("myDIV")[0].style.WebkitAnimation = "mynewmove 4s 2";
document.getElementsByClassName("myDIV")[0].style.animation = "mynewmove 4s 2";
}
.myDIV {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 1s infinite;
/* Chrome, Safari, Opera */
animation: mymove 1s infinite;
}
#-webkit-keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
#-webkit-keyframes mynewmove {
from {
top: 0px;
}
to {
top: 200px;
}
}
#keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
#keyframes mynewmove {
from {
top: 0px;
}
to {
top: 200px;
}
}
<button onclick="myFunction()">Try it</button>
<div class="myDIV"></div>

We Keep Coding

JavaScript is the programming language of the Web.

How do you use css keyframes animations with javascript - javascript

Related

how to animate movement of div when adjacent div is set to display:none

how to add loading.. on ajax response

Delay on keyframe animation

Check if banner is loaded

how to use document.getElementsByClassName("classname") with style.animation

Categories

Resources