executing function after running css animation - javascript

I am trying to get this function
var rotations = 0
function planet1rotate{
rotations = rotations + 1
document.getElementById('rotate').innerHTML = rotations
}
to play after this animation
#keyframes spin-right {
100% {transform: rotate(360deg);}
}
here is the whole code, if it helps
<html>
<head>
<title></title>
<style type="text/css">
#star{
position: absolute;
top: 50%;
left: 50%;
height: 100px;
width: 100px;
margin-top: -50px;
margin-left: -50px;
border-radius: 50%;
background-color: red;
animation: spin-right 2s linear infinite;
}
#keyframes spin-right {
100% {transform: rotate(360deg);}
}
#planet1{
background-color: red;
width: 50px;
height: 50px;
border-radius: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<script type="text/javascript">
var rotations = 0
function planet1rotate{
rotations = rotations + 1
document.getElementById('rotate').innerHTML = rotations
}
</script>
<h1 id="rotate"></h1>
<div id="star">
<div id="planet1"></div>
</div>
</body>
</html>

Check out the animation end event:
const animated = document.querySelector('.animated');
animated.addEventListener('animationend', () => {
console.log('Animation ended');
});
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event

Related

How can I make loader cover the all page

There are my codes below. I want the loader cover the all page but it just covers the top. How can I make it cover the all page? There are my codes below. I want loader cover the all page but it just covers the top. How can I make it cover the all page?
/*loader*/
.loader-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #333233;
display:flex;
justify-content: center;
align-items: center;
}
.loader {
display: inline-block;
width: 30px;
height: 30px;
position: relative;
border: 4px solid #Fff;
animation: loader 3s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 3s infinite ease-in;
}
#keyframes loader {
0% { transform: rotate(0deg);}
25% { transform: rotate(180deg);}
50% { transform: rotate(180deg);}
75% { transform: rotate(360deg);}
100% { transform: rotate(360deg);}
}
#keyframes loader-inner {
0% { height: 0%;}
25% { height: 0%;}
50% { height: 100%;}
75% { height: 100%;}
100% { height: 0%;}
}
<!--loader-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha512-AFwxAkWdvxRd9qhYYp1qbeRZj6/iTNmJ2GFwcxsMOzwwTaRwz2a/2TX225Ebcj3whXte1WGQb38cXE5j7ZQw3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="loader-wrapper">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<script>
$(window).on("load",function(){
$(".loader-wrapper").fadeOut("slow");
});
</script>
<!--loader-->
add position:fixed in main wrapper
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0

Is there a way of changing the size of an image after a loading screen?

I know how to change the size of an image, however, I have a loading screen set up and I have the text and the image set up with a so after showPage, 1500 the text and image appear however when I try to change the size of the image it won't change
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 1500);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "flex";
}
var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from {
bottom: -100px;
opacity: 0
}
to {
bottom: 0px;
opacity: 1
}
}
#keyframes animatebottom {
from {
bottom: -100px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#myDiv {
width: fit-content;
margin: 0 auto;
display: none;
text-align: center;
align-items: center;
}
<!DOCTYPE HTML>
<HTML lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/CSS" href="dropdownmenu.css">
<link rel="stylesheet" type="text/CSS" href="rainbowheading.css">
<link rel="stylesheet" type="text/CSS" href="loadingcss.css">
<script src="loading.js"></script>
<title> North Macedonia </title>
</head>
<div class="container">
<h1 class="rainbow"> The pearl of the Balkans: Macedonia </h1>
<div class="navbar">
Home
Macedonian Dispora
Cities
<div class="dropdown">
<button class="dropbtn">History
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Ancient History
Ottoman Period
Yugoslav Period
Modern History
</div>
</div>
</div>
<body onload="myFunction()" style="margin:0;">
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<div>
<h2>x</h2>
<p>x</p>
</div>
<img id="image1" src="./images/ohridindex.jpg" alt="image" />
</div>
I tried setting dimensions and etc. however the image remains static, any help will be appreciated thanks.

How to control animation time from css use jQuery

I work with animation in CSS, and I have animated clock, which are working using HTML and CSS.
But I want to control animation time using jQuery.
My code:
.face {
position: absolute;
top: 10%;
left: 69%;
transform: translate(-50%, -50%);
height: 100px;
width: 100px;
border: 5px solid #d14019;
border-radius: 50%;
}
.hand {
height: 35px;
width: 5px;
background-color: #d14019;
position: absolute;
border-radius: 20%;
top: 50px;
left: 48px;
transform-origin: 50% 0%;
animation: hourHand 3s linear infinite;
}
#keyframes hourHand {
100% {
transform: rotate(360deg);
}
}
<div class="face">
<div class="hand"></div>
</div>
As u can see at this line:
animation: hourHand 3s linear infinite;
I have time animation 3s, but this values i wanna control by jQuery code.
For example, this 3s i want to change to 14s, or 5s, or 22s.
To amend the speed with jQuery you can create some logic which controls the animation-duration property. In the example below it adds some classes to change the setting:
var $hand = $('.hand');
$('#faster').click(function() {
$hand.removeClass('slow').addClass('fast');
});
$('#slower').click(function() {
$hand.removeClass('fast').addClass('slow');
});
.face {
position: absolute;
top: 10%;
left: 69%;
height: 100px;
width: 100px;
border: 5px solid #d14019;
border-radius: 50%;
}
.hand {
height: 35px;
width: 5px;
background-color: #d14019;
position: absolute;
border-radius: 20%;
top: 50px;
left: 48px;
transform-origin: 50% 0%;
animation: hourHand 3s linear infinite;
}
.hand.fast {
animation-duration: 1s;
}
.hand.slow {
animation-duration: 5s;
}
#keyframes hourHand {
100% {
transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="face">
<div class="hand"></div>
</div>
<button id="faster">Faster</button>
<button id="slower">Slower</button>
I want to define the time. For example now I have 3s, but from JS script I want to change this value
In this case you can use css() to set the value in JS directly:
var $hand = $('.hand');
$('#faster').click(function() {
$hand.css('animation-duration', '1s');
});
$('#slower').click(function() {
$hand.css('animation-duration', '5s');
});
.face {
position: absolute;
top: 10%;
left: 69%;
height: 100px;
width: 100px;
border: 5px solid #d14019;
border-radius: 50%;
}
.hand {
height: 35px;
width: 5px;
background-color: #d14019;
position: absolute;
border-radius: 20%;
top: 50px;
left: 48px;
transform-origin: 50% 0%;
animation: hourHand 3s linear infinite;
}
.hand.fast {
animation-duration: 1s;
}
.hand.slow {
animation-duration: 5s;
}
#keyframes hourHand {
100% {
transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="face">
<div class="hand"></div>
</div>
<button id="faster">Faster</button>
<button id="slower">Slower</button>

css popup screen animation not working

I am trying to create a popup screen that triggers from clicking a button that utilizes an ActionListener inside Javascript. The animation is basically a horizontal line that expands left to right, once the horizontal line reaches its full length it will expand upwards and downwards to create a popup box. I tried using css webkit animations which are called by javascript but it seems to only make the vertical animation and then the horizontal line vanishes as well as completely ignoring the vertical expansion.
init();
function init(){
document.getElementById("Btn").addEventListener("click",function(){
document.getElementById("popup-animation").style.visibility = "visible";
document.getElementById("popup-animation").style.WebkitAnimation =
"popup-horizontal-line 3s, popup-vertical-expansion 2s 3s";
});
}
body{
background-color: black;
}
#popup-animation{
width: 0;
height: 2px;
position: absolute;
left: 30%;
top: 30%;
visibility: hidden;
background-color: white;
color: white;
}
#-webkit-keyframes popup-horizontal-line{
0%{
width: 0;
}
100%{
width: 40%;
}
}
#-webkit-keyframes popup-vertical-expansion{
0%{
height: 0;
}
100%{
height: 40%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>CSS Popup Animation</title>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
</head>
<body>
<button id="Btn">Click</button>
<div id = popup-animation>content</div>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
You need to add animation-fill-mode of forwards to both of those animations
Here's one that works in all browsers, using classes rather than "inline" style :p
init();
function init(){
document.getElementById("Btn").addEventListener("click",function(){
document.getElementById("popup-animation").style.visibility = "visible";
document.getElementById("popup-animation").classList.add('doanim');
});
}
#popup-animation{
width: 0;
height: 2px;
position: absolute;
left: 30%;
top: 30%;
background-color: red;
color: white;
}
.doanim {
animation: popup-horizontal-line 3s, popup-vertical-expansion 2s 3s;
animation-fill-mode: forwards, forwards;
}
#keyframes popup-horizontal-line{
0%{
width: 0;
}
100%{
width: 40%;
}
}
#keyframes popup-vertical-expansion{
0%{
height: 2px;
}
100%{
height: 40px;
}
}
<button id="Btn">Click</button>
<div id = popup-animation>content</div>
You need to add the "forwards" keyword in order for the element to keep the styles reached at the end of the animation
Also, get rid of the browser prefix, it's totally unnecessary. And you might want to add an overflow:hidden to the popup, so the content doesn't show while drawing the horizontal line.
init();
function init(){
document.getElementById("Btn").addEventListener("click",function(){
document.getElementById("popup-animation").style.visibility = "visible";
document.getElementById("popup-animation").style.animation =
"popup-horizontal-line 3s forwards, popup-vertical-expansion 2s 3s forwards";
});
}
body{
background-color: black;
}
#popup-animation{
width: 0;
height: 2px;
position: absolute;
left: 30%;
top: 30%;
visibility: hidden;
background-color: white;
color: black;
overflow:hidden;
}
#keyframes popup-horizontal-line{
0%{
width: 0;
}
100%{
width: 40%;
}
}
#keyframes popup-vertical-expansion{
0%{
height: 0;
}
100%{
height: 40%;
}
}
<html>
<head>
<title>CSS Popup Animation</title>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
</head>
<body>
<button id="Btn">Click</button>
<div id ="popup-animation">content</div>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

jQuery delay fadeIn taking longer than expected

I have been trying to fade out a CSS3 preloader with jQuery. I have been trying to stop the animation (which is a box rotating), and then fade in a letter inside the box then, have them both fade out, the letter fading out a little later than the box. I have had the problem where the letter fades in way later than I want it to and when it comes on if fades out really fast. Here is the code:
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('.loader-inner').css({'-webkit-animation': 'none'});
$('.loader').delay(100).css({'-webkit-animation': 'none'}); // will first fade out the loading animation
$('.letter').delay(100).fadeIn('slow');
$('.preloader').delay(2050).fadeOut('slow');// will fade out the white DIV that covers the website.
$('.letter').delay(2060).fadeOut(900);
$('body').delay(2060).css({'overflow':'visible'});
});
//]]>
body, html {
height: 100%;
text-align: center;
}
body {
background-color: #2f2f2f;
}
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
background-color: #2f2f2f;
}
.loader {
display: block;
width: 60px;
height: 60px;
position: fixed;
border: 5px solid #d5b317;
top: 50%;
left:50%;
-webkit-animation: loader 2s infinite ease;
z-index: -10;
overflow: hidden;
margin-left: -29px
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #d5b317;
-webkit-animation: loader-inner 2s infinite ease-in;
z-index: -10;
}
#font-face {
font-family: 'Adobe Gurmukhi';
src: url(/fonts/AdobeGurmukhi-Regular.ttf);
}
.letter {
display:hidden;
color: #f7d11e;
font-family: 'Adobe Gurmukhi';
font-size: 70px;
position:absolute;
top: 50%;
left: 50%;
margin-top: -17px;
margin-left: -19px;
z-index: -9;
}
#-webkit-keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">
</script>
<!--preloader-->
<div class="preloader">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<span><p class="letter">ਅ</p></span>
The z-index of .preloader (99999) is higher than that of .letter (-9). That delay you are experiencing is the delay until .preloader fades out and thus reveals .letter. As a quick fix I made the z-index of .letter higher than that of .preloader and that delay is gone.
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('.loader-inner').css({'-webkit-animation': 'none'});
$('.loader').delay(100).css({'-webkit-animation': 'none'}); // will first fade out the loading animation
$('.letter').delay(100).fadeIn('slow');
$('.preloader').delay(2050).fadeOut('slow');// will fade out the white DIV that covers the website.
$('.letter').delay(2060).fadeOut(900);
$('body').delay(2060).css({'overflow':'visible'});
});
//]]>
body, html {
height: 100%;
text-align: center;
}
body {
background-color: #2f2f2f;
}
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
background-color: #2f2f2f;
}
.loader {
display: block;
width: 60px;
height: 60px;
position: fixed;
border: 5px solid #d5b317;
top: 50%;
left:50%;
-webkit-animation: loader 2s infinite ease;
z-index: -10;
overflow: hidden;
margin-left: -29px
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #d5b317;
-webkit-animation: loader-inner 2s infinite ease-in;
z-index: -10;
}
#font-face {
font-family: 'Adobe Gurmukhi';
src: url(/fonts/AdobeGurmukhi-Regular.ttf);
}
.letter {
display:hidden;
color: #f7d11e;
font-family: 'Adobe Gurmukhi';
font-size: 70px;
position:absolute;
top: 50%;
left: 50%;
margin-top: -17px;
margin-left: -19px;
z-index: 999999;
}
#-webkit-keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">
</script>
<!--preloader-->
<div class="preloader">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<span><p class="letter">ਅ</p></span>
what you are doing is first you use delay that means you want to call fadeOut after some delay and you given the delay time 2 sec and its working correctly as expected.
Its started fading out after 2 sec.
I think its working as expected if you want to fade it out little soon then you have to reduce the delay time of remove delay.
Hope this may help you.
Thanks!!
you can try the callback function
$('.letter').delay(100).fadeIn('slow', function(){
// function called after fade in finished
setTimeout(function(){
$('.preloader').fadeOut('slow');
$('.letter').fadeOut(900);
$('body').css({'overflow':'visible'});
}, 2600);
});
Replace your code with this, both will fadeOut at same time.
// will fade out the white DIV that covers the website.
$('.letter').delay(2060).fadeOut('fast');

Categories