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>
Related
I am working on a hamburger animation. I have done the animation with a simple css animation with a class, that I toggle in the js. The only problem with that of course is that the animation plays only when I toggle the class, and when I close it the div doesn't contain the class with the animation. I understand the problem, and I have done research but I couldn't find any that works with animation. Is it even possible to make it work with that?
Thanks!
Here is what I have so far:
const Close = () =>{
const burger = document.querySelector('.burger');
const line1 = document.querySelector('.line1');
const line2 = document.querySelector('.line2');
const line3 = document.querySelector('.line3');
burger.addEventListener('click', () =>{
line1.classList.toggle('line1-active');
line2.classList.toggle('line2-active');
line3.classList.toggle('line3-active');
});
}
Close();
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background-color: black;
}
.burger{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.burger div{
background-color: white;
height: 5px;
width: 45px;
margin: 5px;
}
.line1-active{
position: relative;
top: 10px;
animation: top 0.3s ease-in both;
}
.line2-active{
opacity: 0;
transition: opacity 0.3s ease-out;
}
.line3-active{
position: relative;
bottom: 10px;
animation: bottom 0.3s ease-in both;
}
#keyframes top{
0%{
top: 0px;
}
33%{
top: 10px;
}
66%{
transform: rotate(0deg);
}
100%{
transform: rotate(45deg);
}
}
#keyframes bottom{
0%{
bottom: 0px;
}
33%{
bottom: 10px;
}
66%{
transform: rotate(0deg);
}
100%{
transform: rotate(-45deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Burger animation</title>
</head>
<body>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<script src="main.js"></script>
</body>
</html>
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
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.
I have the following code
<!DOCTYPE html>
<html>
<head>
<title>GalacticCraft</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="shortcut icon" type="image/png" href="favicon.ico">
</head>
<body>
<div id="staff"></div>
<div id="portal">
<img id="logo" src="assets/logo.png">
<div id="buttons">
<div class="button" id="button1"></div><div class="button" id="button2"></div><div class="button" id="button3"></div><div class="button" id="button4" onclick="staff()"></div><div class="button" id="button5"></div>
</div>
</div>
</body>
</html>
<script>
function staff() {
document.getElementById('staff').innerHTML = `
<div class="popup" onclick="close()"></div><img src="assets/close.png" class="close-icon" onclick="close()"><div class="popup-menu"><img src="assets/apply.png" class="apply"><p>Apply to become a member of staff</p><hr><img src="assets/staff.png" class="list-staff"><p>View Staff Members</p></div>
`
}
</script>
and CSS
.popup {
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
position: absolute;
z-index: 5;
opacity: 0.5
}
.popup-menu {
top: 0;
width: 700px;
height: 99.6%;
background-color: #fff;
position: absolute;
z-index: 10;
left:calc(50% - 351px);
border: 2px solid #808080;
-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s; /* Firefox < 16 */
-ms-animation: fadein 1s; /* Internet Explorer */
-o-animation: fadein 1s; /* Opera < 12.1 */
animation: fadein 1s;
padding-left: 20px;
}
.apply {
width: 350px;
height: 350px;
position: relative;
left: calc(50% - 185px);
}
.popup-menu p {
color: #009AFF;
text-align: center;
font-size: 35px;
}
.popup-menu a {
text-decoration: none
}
.list-staff {
width: 350px;
height: 350px;
position: relative;
left: calc(50% - 185px);
}
.close {
position: absolute;
top: 2px;
right: 2px;
}
html {
background-image: url("assets/bg.png");
background-size: 100%;
overflow: hidden;
width: 100%;
height: 100%;
}
#portal {
bottom: 0;
height: 550px;
left: 0;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 1000px;
}
#buttons {
bottom:75px;
height:200px;
position:absolute;
width:1000px;
}
.button {
background-position:center;
background-repeat:no-repeat;
background-size:190px;
cursor:pointer;
display:inline-block;
height:200px;
transition:background-size .2s ease;
width:200px;
}
.button:hover {background-size:200px}
.button:active {background-size:180px}
#button1 {background-image:url("assets/forums.png")}
#button2 {background-image:url("assets/store.png")}
#butt
on3 {background-image:url("assets/rules.png")}
#button4 {background-image:url("assets/staff.png")}
#button5 {background-image:url("assets/vote.png")}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Here is a JSFiddle for that https://jsfiddle.net/vgjvzmp5/
As you can see, when you click "Click me", a popup window comes up. It's working how I'd like it to, but how would I close it when the faded background is clicked, or when the close icon in the corner is clicked? I'm using plain Javascript.
Here's a simple working example. You don't need to append a bunch of html on click. You can just add it directly to your html with display:none and use js to show & hide:
function show() {
document.getElementById('popup').style.display = 'block';
}
function hide() {
document.getElementById('popup').style.display = 'none';
}
https://jsfiddle.net/vgjvzmp5/3/
You should use stopPropagation() .
Preview availabe in codepen !
I am trying to rotate a 'back to top' button 360 degrees on hover WITHOUT un-rotating on mouseleave. I have tried multiple variations of jQuery code that I've found but I still can't seem to get it working. Here's the real example of where I've gotten so far (CSS hover between images as well).
I have tried changing the jQuery to mouseenter, mouseover, hover as well as including and omitting the ; after the rotate number, to no avail. Is it a simple jQuery syntax mistake that I'm making?
HTML:
<div class="scrollup">
<img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e099d215d5dbdafb6373aa/1474337234028/top-circleonly.png" class="scrollImg1 scrollup-circle"/>
<img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e09a11f5e2318fad09f16f/1474337297146/top-hover-circleonly.png" class="scrollImg2 scrollup-circle"/>
<img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e099f3f5e2318fad09f010/1474337267982/top-textarrowonly.png" class="scrollImg1 scrollup-textarrow"/>
<img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e09a17f5e2318fad09f1a5/1474337303397/top-hover-textarrowonly.png" class="scrollImg2 scrollup-textarrow"/>
</div>
CSS:
.scrollup {
width: 45px;
height: 45px;
display: block;
margin-left: auto;
position: relative;
cursor: pointer;
}
.scrollup img {
position: absolute;
}
.scrollImg2 {
opacity: 0;
}
.scrollup:hover > .scrollImg1 {
opacity: 0;
}
.scrollup:hover > .scrollImg2 {
opacity: 1;
}
JQuery:
$(".scrollup").mouseover(function() {
$(".scrollup-circle").rotate(360);
});
you can do it using jQuery like below
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
div.main{
width: 100px;
height: 100px;
}
div.main img{
width: 100%;
height: 100%;
}
.change{
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
transition-duration: 5s;
}
</style>
<body>
<div class="main">
<img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg">
</div>
<p id="dis"></p>
<script type="text/javascript">
$("div.main").mouseenter(function(){
$(this).addClass("change").delay(5000).queue(function(){
$(this).removeClass("change").dequeue();
});
});
</script>
</body>
</html>
NOTE:(AFTER) ---> I didn't get what you ask really in your last comment. but try this for your comment question :) .hope it will help to you.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
div.main{
width: 100px;
height: 100px;
}
div.main img{
width: 100%;
height: 100%;
}
.change{
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
transition-duration: 5s;
}
.myopacity{
opacity: 0.6;
}
</style>
<body>
<div class="main">
<img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg">
</div>
<p id="dis"></p>
<script type="text/javascript">
var thevalue = 1;
$("div.main").mouseenter(function(){
thevalue = thevalue+1;
if(thevalue%2==0)
{
$(this).addClass("myopacity");
}
else
{
$(this).removeClass("myopacity");
}
$(this).addClass("change").delay(5000).queue(function(){
$(this).removeClass("change").dequeue();
});
});
</script>
</body>
</html>
You can use css transform with rotate animation
.scrollup {
width: 45px;
height: 45px;
display: block;
margin-left: auto;
position: relative;
cursor: pointer;
}
.scrollup img {
position: absolute;
-webkit-transition: -webkit-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.scrollImg2 {
opacity: 0;
}
.scrollup:hover{
}
.scrollup:hover > img {
opacity: 0;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.scrollup:hover > .scrollImg2 {
opacity: 1;
}
You can use css animation, .hover(), animationend event. Set animation-name of element to name of #keyframes at .hover() event handler, set animation-name of element to empty string at animationend event
$(".scrollup")
.hover(function() {
$(this).css({"animationName":"rotate",
"mozkitAnimationName":"rotate",
"webkitAnimationName":"rotate"});
})
.on("animationend.rotate", function() {
$(this).css({"animationName":"",
"mozkitAnimationName":"",
"webkitAnimationName":""});
});
.scrollup {
width: 45px;
height: 45px;
display: block;
margin-left: 50%;
position: relative;
cursor: pointer;
animation-duration: 2s;
-moz-animation-duration: 2s;
-webkit-animation-duration: 2s;
}
.scrollup img {
position: absolute;
}
.scrollImg2 {
opacity: 0;
}
.scrollup:hover > .scrollImg1 {
opacity: 0;
}
.scrollup:hover > .scrollImg2 {
opacity: 1;
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#-webkit-keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollup">
<img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e099d215d5dbdafb6373aa/1474337234028/top-circleonly.png" class="scrollImg1 scrollup-circle" />
<img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e09a11f5e2318fad09f16f/1474337297146/top-hover-circleonly.png" class="scrollImg2 scrollup-circle" />
<img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e099f3f5e2318fad09f010/1474337267982/top-textarrowonly.png" class="scrollImg1 scrollup-textarrow" />
<img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e09a17f5e2318fad09f1a5/1474337303397/top-hover-textarrowonly.png" class="scrollImg2 scrollup-textarrow" />
</div>