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>
Related
so I had troubles with this one for quite a long time and couldn't find a solution, will be glad if anyone could help me with it. So basically what I have troubles with: I have an image with hover made by icon, I want to get image Pop Up when this icon appears and user clicks on it.
Here's my JSFiddle:https://jsfiddle.net/rissutei/wqyd48mj/17/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="galleryPicture">
<img src="https://cdn.pixabay.com/photo/2017/02/08/17/24/fantasy-2049567__480.jpg" alt="">
<i class="fas fa-plus"></i>
</div>
<script src="https://kit.fontawesome.com/9df2c8dd8e.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</body>
</html>
*{
margin:0;
padding:0;
}
img {
display: block;
max-width: 100%;
height: auto;
}
div.galleryPicture {
padding:20px;
margin-bottom: 35px;
position: relative;
&:hover img {
opacity: 0.8;
filter: brightness(40%);
}
i {
position: absolute;
top: 50%;
left: 35%;
border-radius: 50%;
font-size: 34px;
color: #ffffff;
width: 60px;
height: 60px;
line-height: 60px;
transform: translate(-50%, -35%) scale(0);
transition: transform 0.5s 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
&:hover i {
transform: translate(-50%, -50%) scale(1);
transition: all 300ms 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
}
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 am trying to make a glitchy text effect for a website. On Stackoverflow it works completes fine. Good so far.
But the Problem is in my project folder it doesn't. If you want to check it out, heres a link to download it:
Download
Here's the HTML, CSS and jQuery code:
$(document).ready(
$('.textglitch').hover(function(){
var eLtext = $(this).text(), eLchild = $(this).find('.textglitch-link');
//console.log(eLchild);
eLchild.attr('data-content', eLtext);
eLchild.toggleClass('blur');
$(this).toggleClass('active');
}));
/*----TAGS----*/
*{
margin: 0px;
padding: 0px;
font-family: 'Roboto', monospace;
}
body{
background-color: black;
background: repeat url("../img/noise.gif");
outline:none;
list-style:none;
text-decoration:none;
}
/*----CLASS----*/
.main_div{
position: fixed;
top: 0px; left: 0px; right: 0px; bottom: 0px;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.8);
}
/*----ANIMATE----*/
.textglitch {
position: relative;
text-align: center;
margin: 0 auto;
cursor: pointer;
z-index: 1;
font-size: 5vw;
font-weight: 700;
margin: 50px 0;
}
.textglitch .textglitch-link {
position: relative;
display: inline-block;
}
.textglitch-link span {
position: relative;
z-index: 2;
color: #fff;
}
.blur {
filter: blur(1px);
-webkit-filter: blur(1px);
}
.textglitch .textglitch-link:after,
.textglitch .textglitch-link:before {
position: absolute;
top: 0px;
left: 0px;
content: attr(data-content);
visibility: hidden;
}
.textglitch.active .textglitch-link:after,
.textglitch.active .textglitch-link:before {
visibility: visible;
}
.textglitch .textglitch-link:before {
color: rgba(255, 0, 188, 0.8);
-webkit-animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) both infinite;
animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) both infinite;
}
.textglitch .textglitch-link:after {
color: rgba(0,255,255,0.8);
-webkit-animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite;
animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite;
}
#keyframes textglitch {
0% {
-webkit-transform: translate(0);
transform: translate(0)
}
20% {
-webkit-transform: translate(-3px, 3px);
transform: translate(-3px, 3px)
}
40% {
-webkit-transform: translate(-3px, -3px);
transform: translate(-3px, -3px)
}
60% {
-webkit-transform: translate(3px, 3px);
transform: translate(3px, 3px)
}
80% {
-webkit-transform: translate(3px, -3px);
transform: translate(3px, -3px)
}
to {
-webkit-transform: translate(0);
transform: translate(0)
}
}
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<link rel="stylesheet" href="../css/theme.css">
<script type="text/javascript" src="../js/master.js"></script>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main_div">
<div class="textglitch">
<a class="textglitch-link"><span>This is a Test</span></a>
</div>
</div>
</body>
</html>
I would be glad if someone could help me to fix this problem.
I looked at your code and it has the following problems:
The main file must be called index.html and it must be stored in teh root - it cannot be in a subfolder. Therefore, you will need to also update your links in the <head> (ie. js/master.js not ../js/master.js and css/theme.css not ../css/theme.css)
Change your js code to:
$(document).ready(function(){ //<=== i.e. missing the: " function(){ "
$('.textglitch').hover(
function(){
var eLtext = $(this).text(), eLchild = $(this).find('.textglitch-link');
console.log(eLchild);
eLchild.attr('data-content', eLtext);
eLchild.toggleClass('blur');
$(this).toggleClass('active');
});
});
Make sure jQuery is loaded before the master.js file.
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="js/master.js"></script>
<div class="main_div">
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>
So I need to be able to check if a specified id has a specific class, but I'm not completely sure on how to do that.
Here is my code. You can see my attempt at checking a id for a specific class in the homeTransition function.
function homeTransition()
{
if(document.getElementById("aboutContent").hasClass("animated fadeInUp")){
document.getElementById("aboutContent").className = " animated slideOutDown";
} else if(document.getElementById("projectsContent").hasClass("animated fadeInUp")){
document.getElementById("projectsContent").className = " animated slideOutDown";
} else if(document.getElementById("contactContent").hasClass("animated fadeInUp")){
document.getElementById("contactContent").className = " animated slideOutDown";
}
document.getElementById("astronaut").className = " animated fadeIn";
}
function aboutTransition()
{
document.getElementById("astronaut").className = " animated fadeOut";
document.getElementById("aboutContent").className = " animated fadeInUp";
document.getElementById("projectsContent").className = " animated fadeOutLeft";
document.getElementById("contactContent").className = " animated fadeOutLeft";
}
function projectsTransition()
{
document.getElementById("astronaut").className = " animated fadeOut";
document.getElementById("projectsContent").className = " animated fadeInUp";
document.getElementById("aboutContent").className = " animated fadeOutLeft";
document.getElementById("contactContent").className = " animated fadeOutLeft";
}
function contactTransition()
{
document.getElementById("astronaut").className = " animated fadeOut";
document.getElementById("contactContent").className = " animated fadeInUp";
document.getElementById("aboutContent").className = " animated fadeOutLeft";
document.getElementById("projectsContent").className = " animated fadeOutLeft";
}
//Menu
function expand(){
$(this).toggleClass("on");
$(".menu").toggleClass("active");
};
$(".button").on('click', expand);
body {
font-family: "Source Sans Pro", sans-serif;
color: #ccc;
z-index: -100;
background-color: black;
overflow: hidden;
}
#aboutContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: #2b2b41;
z-index: -1;
}
#projectsContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: #42424b;
z-index: -1;
}
#contactContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: #353440;
z-index: -1;
}
.menu {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
background: rgba(45, 51, 54, 0.9);
width: 18%;
box-sizing: border-box;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
text-align:center;
box-shadow: 0 0 20px #000000;
}
.active {
transform: translateZ(0) translateX(0);
transform: translateZ(0) translateX(0);
-webkit-transition: 0.4s;
transition: 0.4s;
color: #e5e5e5;
}
h1 {
margin-top:60%;
font-size: 2.5em;
cursor: default;
}
ul {
padding:0;
list-style:none;
font-size:14px;
}
li {
padding:10px 10px;
}
a {
text-decoration:none;
padding:10px 15px;
color:#fff;
font-family:"Roboto";
font-size: 1.5em;
font-weight: 300;
}
a:hover {
text-decoration: line-through;
color: #0dffec;
}
.content {
position:relative;
width:300px;
}
.button {
width:20px;
height:40px;
margin:24% 36%;
padding: 14px;
cursor:pointer;
}
.line {
width: 40px;
height: 2px;
background-color: #fff;
transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
.line.first {
transform: translateX(-10px) translateY(22px) rotate(-90deg);
}
.line.second {
transform: translateX(-10px) translateY(19px) rotate(0deg);
}
.button.on .line.top {
transform: translateX(-10px) translateY(20px) rotate(45deg);
}
.button.on .line.bottom {
transform: translateX(-10px) translateY(17px)rotate(-45deg);
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Play|Raleway" rel="stylesheet">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
<div id="wrapper">
<div class="menu">
<h1>Title</h1>
<ul>
<div id="home" onclick="homeTransition()"><li><i class="fa fa-home"></i> home</li></div>
<div id="about" onclick="aboutTransition()"><li><i class="fa fa-user"></i> about</li></div>
<div id="projects" onclick="projectsTransition()"><li><i class="fa fa-code"></i> projects</li></div>
<div id="contact" onclick="contactTransition()"><li><i class="fa fa-paper-plane"></i> contact</li></div>
</ul>
</div>
<div class="content">
<div class="button">
<div class="line first top"></div>
<div class="line second bottom"></div>
</div>
</div>
<div id="aboutContent">
</div>
<div id="projectsContent">
</div>
<div id="contactContent">
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/background.js"></script>
</body>
</html>
You can check like this
document.getElementById("projectsContent").className.indexOf("animated") !== -1 // class exists on element
But for this you can check for only one class, if you want to check for multiple classes store the className in a variable and check for all of them or write a utility function.
EDIT:
As mentioned by #Jerinaw in comment you can also use the below code, which is much shorter than above if you don't need support for < ie10
document.getElementById("projectsContent").classList.contains("animated") // class exists on element
Use vanilla Javascript
document.querySelector('#aboutContent.myclass');
This reads: Select the element with the id (id selector #) aboutContent, and that has the class (class selector .) myClass.
Read up on
CSS selectors
querySelector
I'd also like to note that you seem to be mixing vanilla javascript and jQuery. Maybe you should read up on selecting elements with jQuery.