How do I Make The Turkey jump On Click

How do I Make The Turkey jump On Click - javascript

I have scoured the web and all the sources that I have stumbled upon havent worked in my case. I need the turkey to jump when i click the red circle. Here is My code. Btw it is in js html and css.
function animate() {
document.getElementById("body").class = "bodyAnim";
document.getElementById("beak").class = "beakAnim";
document.getElementById("eyes").class = "eyesAnim";
document.getElementById("pupils").class = "pupilsAnim";
document.getElementById("tail").class = "tailAnim";
document.getElementById("snood").class = "snoodAnim";
document.getElementById("legRight").class = "legRightAnim";
document.getElementById("legLeft").class = "legLeftAnim";
}
.body {
padding: 30px 30px;
height: 35px;
width: 5px;
border-radius: 50%;
background-color: brown;
position: relative;
top: 0px;
animation-name: turkey;
animation-duration: 1s;
}
.beak {
padding: 1px 1px;
width: 1px;
height: 1px;
border-top: 10px solid transparent;
border-left: 25px solid #ffc800;
border-bottom: 5px solid transparent;
position: relative;
left: 40px;
top: 40px;
animation-name: beak;
animation-duration: 1s;
}
.eyes {
padding: 10px 10px;
width: 10px;
height:10px;
border-radius: 50%;
background-color: white;
position: relative;
top: -80px;
animation-name: eyes;
animation-duration: 1s;
}
.pupils {
padding: 5px 5px;
width: 3px;
height: 3px;
border-radius: 50%;
background-color:black;
position: relative;
top:-100px;
animation-name: pupils;
animation-duration: 1s;
}
.snood {
padding: 5px 5px;
width: 1px;
height: 10px;
background-color: red;
border-radius: 50%;
position: relative;
top: -254px;
right: -38px;
animation-name: snood;
animation-duration: 1s;
}
.legRight {
padding: 10px 1px;
width: 1px;
height: 5px;
background-color: black;
position: relative;
top: -219px;
right: 9px;
transform: rotate(30deg);
animation-name: legRight;
animation-duration: 1s;
}
.legLeft {
padding: 10px 1px;
width: 1px;
height: 5px;
background-color: black;
position: relative;
top: -242px;
left: 3px;
transform: rotate(30deg);
animation-name: legLeft;
animation-duration: 1s;
}
.obstacle {
height: 100px;
width: 10px;
background-color: black;
animation: obstacle 2.2s infinite;
position: relative;
top: -460px;
}
body {
background-color: lightblue;
}
<center>
<br><br><br><br><br><br>
<div class="turkey">
<tr>
<td>
<div class="turkey beak"></div>
</td>
<td>
<div class="turkey body"></div>
</td>
</tr>
<div class="turkey eyes"></div>
<div class="turkey pupils"></div>
<style>
.tail {
width: 20px;
height: 150px;
border-radius: 50%;
background-color: brown;
position: relative;
top: -200px;
right: 59px;
transform: rotate(-30deg);
animation-name: tail;
animation-duration: 1s;
}
</style>
<div class="turkey tail" id="tailId"></div>
<div class="turkey snood"></div>
<div class="turkey legRight"></div>
<div class="turkey legLeft"></div>
</div>
<style>
#keyframes turkey {
0% {
top: 0px;
}
50% {
top: -200px;
}
100% {
top: 0px;
}
}
#keyframes beak {
0% {
top: 40px;
}
50% {
top: -160px;
}
100% {
top: 40px;
}
}
#keyframes eyes {
0% {
top: -80px;
}
50% {
top: -280px;
}
100% {
top: -80px;
}
}
#keyframes pupils {
0% {
top: -100px;
}
50% {
top: -300px;
}
100% {
top: -100px
}
}
#keyframes snood {
0% {
top: -250px;
}
50% {
top: -450px;
}
100% {
top: -250px;
}
}
#keyframes legRight {
0% {
top: -219px;
}
50% {
top: -419px;
}
100% {
top: -219px;
}
}
#keyframes legLeft {
0% {
top: -242px;
}
50% {
top: -442px;
}
100% {
top: -242px;
}
}
#keyframes tail {
0% {
top: -200px;
}
50% {
top: -400px;
}
100% {
top: -200px;
}
}
</style>
<style>
.button {
height: 100px;
width: 100px;
background-color: red;
border-radius: 50%;
position: relative;
top:-210px;
overflow = scroll;
}
</style>
<div class="button" onclick="animate()"><h1>JUMP</h1></div>
<div class="obstacle"></div>
<style>
#keyframes obstacle {
from {
left: 370px;
}
to {
left: -870px;
}
}
</style>
So to restate my question, How do I make the turkey jump on the click. so in more of technical terms how do i activate the keyframes with an onclick.
Finally if My code Looks weird, please tell me. Everyone has been saying, fix your code but I do not know how.

Ok, so I'm not proud of what I've done, but I changed up a couple necessary things (like adding id properties and renaming the function) and then wrapped classList.toggle in a setTimeout and it worked. LOL. Please understand that this is all really a bad way to make a Turkey jump, but for the purposes of your question, I got the code to work.
<html>
<head>
<style>
.body {
padding: 30px 30px;
height: 35px;
width: 5px;
border-radius: 50%;
background-color: brown;
position: relative;
top: 0px;
animation-name: turkey;
animation-duration: 1s;
}
.beak {
padding: 1px 1px;
width: 1px;
height: 1px;
border-top: 10px solid transparent;
border-left: 25px solid #ffc800;
border-bottom: 5px solid transparent;
position: relative;
left: 40px;
top: 40px;
animation-name: beak;
animation-duration: 1s;
}
.eyes {
padding: 10px 10px;
width: 10px;
height:10px;
border-radius: 50%;
background-color: white;
position: relative;
top: -80px;
animation-name: eyes;
animation-duration: 1s;
}
.pupils {
padding: 5px 5px;
width: 3px;
height: 3px;
border-radius: 50%;
background-color:black;
position: relative;
top:-100px;
animation-name: pupils;
animation-duration: 1s;
}
.snood {
padding: 5px 5px;
width: 1px;
height: 10px;
background-color: red;
border-radius: 50%;
position: relative;
top: -254px;
right: -38px;
animation-name: snood;
animation-duration: 1s;
}
.legRight {
padding: 10px 1px;
width: 1px;
height: 5px;
background-color: black;
position: relative;
top: -219px;
right: 9px;
transform: rotate(30deg);
animation-name: legRight;
animation-duration: 1s;
}
.legLeft {
padding: 10px 1px;
width: 1px;
height: 5px;
background-color: black;
position: relative;
top: -242px;
left: 3px;
transform: rotate(30deg);
animation-name: legLeft;
animation-duration: 1s;
}
.obstacle {
height: 100px;
width: 10px;
background-color: black;
animation: obstacle 2.2s infinite;
position: relative;
top: -460px;
}
body {
background-color: lightblue;
}
</style>
</head>
<body>
<center>
<br><br><br><br><br><br>
<div class="turkey">
<div id="beak" class="turkey beak"></div>
<div id="body" class="turkey body"></div>
<div id="eyes" class="turkey eyes"></div>
<div id="pupils" class="turkey pupils"></div>
<style>
.tail {
width: 20px;
height: 150px;
border-radius: 50%;
background-color: brown;
position: relative;
top: -200px;
right: 59px;
transform: rotate(-30deg);
animation-name: tail;
animation-duration: 1s;
}
</style>
<div id="tail" class="turkey tail" id="tailId"></div>
<div id="snood" class="turkey snood"></div>
<div id="legRight" class="turkey legRight"></div>
<div id="legLeft" class="turkey legLeft"></div>
</div>
<style>
#keyframes turkey {
0% {
top: 0px;
}
50% {
top: -200px;
}
100% {
top: 0px;
}
}
#keyframes beak {
0% {
top: 40px;
}
50% {
top: -160px;
}
100% {
top: 40px;
}
}
#keyframes eyes {
0% {
top: -80px;
}
50% {
top: -280px;
}
100% {
top: -80px;
}
}
#keyframes pupils {
0% {
top: -100px;
}
50% {
top: -300px;
}
100% {
top: -100px
}
}
#keyframes snood {
0% {
top: -250px;
}
50% {
top: -450px;
}
100% {
top: -250px;
}
}
#keyframes legRight {
0% {
top: -219px;
}
50% {
top: -419px;
}
100% {
top: -219px;
}
}
#keyframes legLeft {
0% {
top: -242px;
}
50% {
top: -442px;
}
100% {
top: -242px;
}
}
#keyframes tail {
0% {
top: -200px;
}
50% {
top: -400px;
}
100% {
top: -200px;
}
}
</style>
<style>
.button {
height: 100px;
width: 100px;
background-color: red;
border-radius: 50%;
position: relative;
top:-210px;
overflow = scroll;
}
</style>
<div class="button" onclick="jump()">
<h1>JUMP</h1>
</div>
<div class="obstacle"></div>
<style>
#keyframes obstacle {
from {
left: 370px;
}
to {
left: -870px;
}
}
</style>
</center>
<script type="text/javascript">
function jump() {
document.getElementById("body").classList.toggle("body");
document.getElementById("beak").classList.toggle("beak");
document.getElementById("eyes").classList.toggle("eyes");
document.getElementById("pupils").classList.toggle("pupils");
document.getElementById("tail").classList.toggle("tail");
document.getElementById("snood").classList.toggle("snood");
document.getElementById("legRight").classList.toggle("legRight");
document.getElementById("legLeft").classList.toggle("legLeft");
setTimeout(() => {
document.getElementById("body").classList.toggle("body");
document.getElementById("beak").classList.toggle("beak");
document.getElementById("eyes").classList.toggle("eyes");
document.getElementById("pupils").classList.toggle("pupils");
document.getElementById("tail").classList.toggle("tail");
document.getElementById("snood").classList.toggle("snood");
document.getElementById("legRight").classList.toggle("legRight");
document.getElementById("legLeft").classList.toggle("legLeft");
}, 0)
}
</script>
</body>
</html>

Related

Inserting pictures into circles using JavaScript, HTML and CSS

From this question ("Rotate objects around circle using CSS?"), I copied the following code, but is it possible to insert pictures into the code? I would like to insert pictures into the circles so that one picture orbits another. For example, Earth orbiting the sun.
Earth: https://i.imgur.com/Eo52CF0_d.webp?maxwidth=760&fidelity=grand
Sun: https://media.beam.usnews.com/5a/5e/5a739e244b289049e789d7752975/170531-sun-editorial.jpg
How do I modify the code in such a way as to make the earth orbit the sun instead of the blank circles?
<!DOCTYPE html>
<html>
<head>
<style>
.outCircle {
width: 200px;
height: 200px;
background-color: blue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: ccircle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
background-color: pink;
display: block;
}
#-webkit-keyframes circle {
from {-webkit-transform: rotateZ(0deg)}
to {-webkit-transform: rotateZ(360deg)}
}
#-webkit-keyframes ccircle {
from {-webkit-transform: rotateZ(360deg)}
to {-webkit-transform: rotateZ(0deg)}
}
</style>
</head>
<body>
<script>
.outCircle {
width: 200px;
height: 200px;
background-color: blue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: circle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
background-color: blue;
display: block;
}
#-webkit-keyframes circle {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(360deg)
}
}
#-webkit-keyframes ccircle {
from {
-webkit-transform: rotateZ(360deg)
}
to {
-webkit-transform: rotateZ(0deg)
}
}
</script>
<div class="outCircle">
<div class="rotate">
<div class="counterrotate">
<div class="inner">Hello</div>
</div>
</div>
</div>
</body>
</html>
EDIT:
This is the output when I add the images:
<!DOCTYPE html>
<html>
<head>
<style>
.outCircle {
background-image: url("https://media.beam.usnews.com/5a/5e/5a739e244b289049e789d7752975/170531-sun-editorial.jpg");
width: 200px;
height: 200px;
background-color: blue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: ccircle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
background-color: pink;
display: block;
background-image: url("https://i.imgur.com/Eo52CF0_d.webp?maxwidth=760&fidelity=grand");
}
#-webkit-keyframes circle {
from {-webkit-transform: rotateZ(0deg)}
to {-webkit-transform: rotateZ(360deg)}
}
#-webkit-keyframes ccircle {
from {-webkit-transform: rotateZ(360deg)}
to {-webkit-transform: rotateZ(0deg)}
}
</style>
</head>
<body>
<script>
.outCircle {
width: 200px;
height: 200px;
background-color: blue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: circle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
background-color: blue;
display: block;
}
#-webkit-keyframes circle {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(360deg)
}
}
#-webkit-keyframes ccircle {
from {
-webkit-transform: rotateZ(360deg)
}
to {
-webkit-transform: rotateZ(0deg)
}
}
</script>
<div class="outCircle">
<div class="rotate">
<div class="counterrotate">
<div class="inner">Hello</div>
</div>
</div>
</div>
</body>
</html>

i just add background-image css to both element. And linking the earth and moon picture from Wikipedia to that element.
body{
background:#000;
}
.earth, .moon{
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: 120%; /* Resize the background image to cover the entire container */
-moz-border-radius: 50%; /* to make circle shape */
-webkit-border-radius: 50%;
border-radius: 50%;
}
.earth {
background-color: blue;
background-image:url( "https://upload.wikimedia.org/wikipedia/commons/9/90/Small_Earth.jpg" );
position: absolute;
width: 200px;
height: 200px;
box-shadow:0 0 20px dodgerblue;
margin:50px;
}
.moon {
position: relative;
background-color: white;
background-image:url( "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/631px-FullMoon2010.jpg" );
width: 100px;
height: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50%;
height: 50%;
-webkit-animation: ccircle 10s infinite linear;
}
#-webkit-keyframes circle {
from {-webkit-transform: rotateZ(0deg)}
to {-webkit-transform: rotateZ(360deg)}
}
#-webkit-keyframes ccircle {
from {-webkit-transform: rotateZ(360deg)}
to {-webkit-transform: rotateZ(0deg)}
}
<div class="earth">
<div class="rotate">
<div class="counterrotate">
<div class="moon"></div>
</div>
</div>
</div>

You could try adding each image as a background-image right in the CSS rules that define their size/shape.

Add a background image to your elements. Open your inspector and click on the element and it will highlight the elements border-box, identify which element is what and then in your CSS, add a background:url(link to the image) to the selector/element you wish to have an image on.
.outCircle {
width: 200px;
height: 200px;
background-color: blue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
background: url(https://cdn.pixabay.com/photo/2017/05/12/22/48/mouse-2308339__180.jpg) no-repeat;
border-radius: 50%;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: circle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
display: block;
background: center url(https://as1.ftcdn.net/jpg/00/31/01/02/220_F_31010244_P6FGF9nfBY1oaGFndhdHhUUIfjHqMoib.jpg) no-repeat white;
background-size: 90%;
}
#-webkit-keyframes circle {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(360deg)
}
}
#-webkit-keyframes ccircle {
from {
-webkit-transform: rotateZ(360deg)
}
to {
-webkit-transform: rotateZ(0deg)
}
}
<div class="outCircle">
<div class="rotate">
<div class="counterrotate">
<div class="inner">Hello</div>
</div>
</div>
</div>

How can I get two separate animations to play upon a single onclick?

Let me start off by saying I am new to CSS/HTML coding in general. Mostly learned by breaking down others codes and rebuilding them. So, I am by no means a professional and maybe in well over my head for this. My terminology may be off as well. Sorry in advance.
What I would like to do is open two separate animations upon clicking one button, is that possible? I have a feeling I will need to learn Javascript to do this but I wasn't too sure if there was a way to do it strictly via CSS.
So the "Where are you?" and the 'BEHIND' animation wouldn't play until the button is clicked instead of the "Where are you?" just playing upon load.
#Screen {
position: fixed;
left: 0px;
right: 5px;
top: 0px;
bottom: 330px;
margin: auto;
Height: 100px;
width: 210px;
border-radius: 10px;
background-color: #909090;
background-image: url('https://www.transparenttextures.com/patterns/dotnoise-light-grey.png');
border: 2px solid #111;
z-index: 2
}
#Button1 {
position: fixed;
left: 0px;
right: 175px;
top: 0px;
bottom: 110px;
margin: auto;
Height: 15px;
width: 35px;
border-radius: 30px;
border: 1px solid #333;
background-image: url('https://i.pinimg.com/600x315/ef/a4/54/efa454458c927ff79e21b898bbd446f0.jpg');
background-color: #101010;
z-index: 3;
}
.tab div {
display: none;
position: fixed;
left: 0px;
right: 5px;
top: 0px;
bottom: 330px;
margin: auto;
Height: 100px;
width: 210px;
border-radius: 10px;
padding: px;
background-color: #F0FFF0;
background-image: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
box-shadow: 1px 1px 10px 1px #ffffff;
z-index: 4;
overflow: hidden;
}
.tab div:target {
display: block;
}
/*Flicker-in-1 is for the screen to "flicker on"*/
.flicker-in-1 div {
display: none;
position: fixed;
left: 0px;
right: 5px;
top: 0px;
bottom: 330px;
margin: auto;
Height: 100px;
width: 210px;
border-radius: 10px;
padding: px;
background-color: #F0FFF0;
background-image: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
box-shadow: 1px 1px 10px 1px #ffffff;
z-index: 4;
overflow: hidden;
-webkit-animation: flicker-in-1 2s linear 1s both;
animation: flicker-in-1 2s linear 1s both;
}
/*Minified this block of code*/
#-webkit-keyframes flicker-in-1 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
10.1% {
opacity: 1;
}
10.2% {
opacity: 0;
}
20% {
opacity: 0;
}
20.1% {
opacity: 1;
}
20.6% {
opacity: 0;
}
30% {
opacity: 0;
}
30.1% {
opacity: 1;
}
30.5% {
opacity: 1;
}
30.6% {
opacity: 0;
}
45% {
opacity: 0;
}
45.1% {
opacity: 1;
}
50% {
opacity: 1;
}
55% {
opacity: 1;
}
55.1% {
opacity: 0;
}
57% {
opacity: 0;
}
57.1% {
opacity: 1;
}
60% {
opacity: 1;
}
60.1% {
opacity: 0;
}
65% {
opacity: 0;
}
65.1% {
opacity: 1;
}
75% {
opacity: 1;
}
75.1% {
opacity: 0;
}
77% {
opacity: 0;
}
77.1% {
opacity: 1;
}
85% {
opacity: 1;
}
85.1% {
opacity: 0;
}
86% {
opacity: 0;
}
86.1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.text-focus-in {
position: fixed;
left: 0px;
right: 600px;
top: 0px;
bottom: 330px;
margin: auto;
Height: 100px;
width: 210px;
border-radius: 10px;
background-color: #909090;
background-image: url('https://www.transparenttextures.com/patterns/dotnoise-light-grey.png');
border: 2px solid #111;
z-index: 2 -webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
#-webkit-keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
#keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
h1 {
font-family: "Orbitron";
text-align: center;
}
<div id="Screen"></div>
<div class="text-focus-in">Where are you? </div>
<a href="#Behind">
<div id="Button1"></div>
</a>
<div class="flicker-in-1 tab">
<div id="Behind">
<h1>BEHIND</h1>
</div>
</div>

You can use this little trick. It relies on a checkbox next to the animatable thing and tracking its state ( using a selector like #toggle:checked ~ #animatable_element). You can toggle it clicking the label.
#animatable_element {
width: 100px;
height: 100px;
background: orange;
}
#toggle {
display: none; /* optional */
}
#toggle:checked ~ #animatable_element {
animation-name: example;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#keyframes example {
0% {background-color: orange;}
50% {background-color: yellow;}
100% {background-color: orange}
}
#animatable_element_2 {
width: 100px;
height: 100px;
background: blue;
}
#toggle:checked ~ #animatable_element_2 {
animation-name: example_2;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#keyframes example_2 {
0% {background-color: blue;}
50% {background-color: purple;}
100% {background-color: blue}
}
<label for='toggle'>Click me to start or stop the animation</label>
<input id='toggle' type='checkbox'/>
<div id='animatable_element_2'></div>
<div id='animatable_element'></div>

CSS
.animation-box {
background-color:gray;
width: 250px;
height: 250px;
}
HTML
<div class="animation-box">
<span class="fade-in-and-fade-out-animation">"Where are you?"</span>
<h1 class="pop-up-blinking-animation">RIGHT BEHIND YOU!!</h1>
</div>
<button class="btn">Start Animation</button>
Solution Trigger animation using the button element and layer the animations on the same container, or you may need to dig into JavaScript, specifically into JS queues.

This works by using javascript: element.classList.add("flicker-in-1");
Adding the class's when button is clicked.
function here() {
var element = document.getElementById("here");
var element2 = document.getElementById("Behind");
element.classList.add("flicker-in-1");
element.classList.add("tab");
element2.classList.remove("hide");
}
#Screen {
position: fixed;
left: 0px;
right: 5px;
top: 0px;
bottom: 330px;
margin: auto;
Height: 100px;
width: 210px;
border-radius: 10px;
background-color: #909090;
background-image: url('https://www.transparenttextures.com/patterns/dotnoise-light-grey.png');
border: 2px solid #111;
z-index: 2
}
#Button1 {
position: fixed;
left: 0px;
right: 175px;
top: 0px;
bottom: 110px;
margin: auto;
Height: 15px;
width: 35px;
border-radius: 30px;
border: 1px solid #333;
background-image: url('https://i.pinimg.com/600x315/ef/a4/54/efa454458c927ff79e21b898bbd446f0.jpg');
background-color: #101010;
z-index: 3;
cursor: pointer;
}
.tab div {
display: block;
position: fixed;
left: 0px;
right: 5px;
top: 0px;
bottom: 330px;
margin: auto;
Height: 100px;
width: 210px;
border-radius: 10px;
padding: px;
background-color: #F0FFF0;
background-image: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
box-shadow: 1px 1px 10px 1px #ffffff;
z-index: 4;
overflow: hidden;
}
/*Flicker-in-1 is for the screen to "flicker on"*/
.flicker-in-1 div {
display: block;
position: fixed;
left: 0px;
right: 5px;
top: 0px;
bottom: 330px;
margin: auto;
Height: 100px;
width: 210px;
border-radius: 10px;
padding: 0px;
background-color: #F0FFF0;
background-image: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
box-shadow: 1px 1px 10px 1px #ffffff;
z-index: 4;
overflow: hidden;
-webkit-animation: flicker-in-1 0s linear 0s both;
animation: flicker-in-1 0.5s linear 0s both;
animation-delay: 0s;
}
/*Minified this block of code*/
#-webkit-keyframes flicker-in-1 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
10.1% {
opacity: 1;
}
10.2% {
opacity: 0;
}
20% {
opacity: 0;
}
20.1% {
opacity: 1;
}
20.6% {
opacity: 0;
}
30% {
opacity: 0;
}
30.1% {
opacity: 1;
}
30.5% {
opacity: 1;
}
30.6% {
opacity: 0;
}
45% {
opacity: 0;
}
45.1% {
opacity: 1;
}
50% {
opacity: 1;
}
55% {
opacity: 1;
}
55.1% {
opacity: 0;
}
57% {
opacity: 0;
}
57.1% {
opacity: 1;
}
60% {
opacity: 1;
}
60.1% {
opacity: 0;
}
65% {
opacity: 0;
}
65.1% {
opacity: 1;
}
75% {
opacity: 1;
}
75.1% {
opacity: 0;
}
77% {
opacity: 0;
}
77.1% {
opacity: 1;
}
85% {
opacity: 1;
}
85.1% {
opacity: 0;
}
86% {
opacity: 0;
}
86.1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.text-focus-in {
position: fixed;
left: 0px;
right: 600px;
top: 0px;
bottom: 330px;
margin: auto;
Height: 100px;
width: 210px;
border-radius: 10px;
background-color: #909090;
background-image: url('https://www.transparenttextures.com/patterns/dotnoise-light-grey.png');
border: 2px solid #111;
z-index: 2 -webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
#-webkit-keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
#keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
h1 {
font-family: "Orbitron";
text-align: center;
}
.hide {
display: none;
}
<div id="Screen"></div>
<div class="text-focus-in">Where are you? </div>
<button id="Button1" onclick="here();"></button>
<div id="here">
<div class="hide" id="Behind">
<h1>BEHIND</h1>
</div>
</div>
PS: You have to Expand snippet to see it correctly.

How Do I make A Function To Check If an animation passes a certain point

Ok so I know the title is nonsense buT how do i check if the obstacle passes a certain point and active a function because of It?
Here is my code so far
function jump() {
jumpDetect = false;
document.getElementById("body").classList.toggle("body");
document.getElementById("beak").classList.toggle("beak");
document.getElementById("eyes").classList.toggle("eyes");
document.getElementById("pupils").classList.toggle("pupils");
document.getElementById("tail").classList.toggle("tail");
document.getElementById("snood").classList.toggle("snood");
document.getElementById("legRight").classList.toggle("legRight");
document.getElementById("legLeft").classList.toggle("legLeft");
setTimeout(() => {
document.getElementById("body").classList.toggle("body");
document.getElementById("beak").classList.toggle("beak");
document.getElementById("eyes").classList.toggle("eyes");
document.getElementById("pupils").classList.toggle("pupils");
document.getElementById("tail").classList.toggle("tail");
document.getElementById("snood").classList.toggle("snood");
document.getElementById("legRight").classList.toggle("legRight");
document.getElementById("legLeft").classList.toggle("legLeft");
}, 0);
winDetection();
}
function winDetection() {
jumpDetect = true;
console.log(jumpDetect)
}
.body {
padding: 30px 30px;
height: 35px;
width: 5px;
border-radius: 50%;
background-color: brown;
position: relative;
top: 0px;
animation-name: turkey;
animation-duration: 1s;
}
.beak {
padding: 1px 1px;
width: 1px;
height: 1px;
border-top: 10px solid transparent;
border-left: 25px solid #ffc800;
border-bottom: 5px solid transparent;
position: relative;
left: 40px;
top: 40px;
animation-name: beak;
animation-duration: 1s;
}
.eyes {
padding: 10px 10px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: white;
position: relative;
top: -80px;
animation-name: eyes;
animation-duration: 1s;
}
.pupils {
padding: 5px 5px;
width: 3px;
height: 3px;
border-radius: 50%;
background-color: black;
position: relative;
top: -100px;
animation-name: pupils;
animation-duration: 1s;
}
.snood {
padding: 5px 5px;
width: 1px;
height: 10px;
background-color: red;
border-radius: 50%;
position: relative;
top: -254px;
right: -38px;
animation-name: snood;
animation-duration: 1s;
}
.legRight {
padding: 10px 1px;
width: 1px;
height: 5px;
background-color: black;
position: relative;
top: -219px;
right: 9px;
transform: rotate(30deg);
animation-name: legRight;
animation-duration: 1s;
}
.legLeft {
padding: 10px 1px;
width: 1px;
height: 5px;
background-color: black;
position: relative;
top: -242px;
left: 3px;
transform: rotate(30deg);
animation-name: legLeft;
animation-duration: 1s;
}
.obstacle {
height: 100px;
width: 10px;
background-color: black;
animation: obstacle 3s infinite;
position: relative;
top: -460px;
}
body {
background-color: lightblue;
}
<html>
<head>
</head>
<body>
<center>
<br><br><br><br><br><br>
<div class="turkey">
<div id="beak" class="turkey beak"></div>
<div id="body" class="turkey body"></div>
<div id="eyes" class="turkey eyes"></div>
<div id="pupils" class="turkey pupils"></div>
<style>
.tail {
width: 20px;
height: 150px;
border-radius: 50%;
background-color: brown;
position: relative;
top: -200px;
right: 59px;
transform: rotate(-30deg);
animation-name: tail;
animation-duration: 1s;
}
</style>
<div id="tail" class="turkey tail" id="tailId"></div>
<div id="snood" class="turkey snood"></div>
<div id="legRight" class="turkey legRight"></div>
<div id="legLeft" class="turkey legLeft"></div>
</div>
<style>
#keyframes turkey {
0% {
top: 0px;
}
50% {
top: -200px;
}
100% {
top: 0px;
}
}
#keyframes beak {
0% {
top: 40px;
}
50% {
top: -160px;
}
100% {
top: 40px;
}
}
#keyframes eyes {
0% {
top: -80px;
}
50% {
top: -280px;
}
100% {
top: -80px;
}
}
#keyframes pupils {
0% {
top: -100px;
}
50% {
top: -300px;
}
100% {
top: -100px
}
}
#keyframes snood {
0% {
top: -254px;
}
50% {
top: -450px;
}
100% {
top: -254px;
}
}
#keyframes legRight {
0% {
top: -219px;
}
50% {
top: -419px;
}
100% {
top: -219px;
}
}
#keyframes legLeft {
0% {
top: -242px;
}
50% {
top: -442px;
}
100% {
top: -242px;
}
}
#keyframes tail {
0% {
top: -200px;
}
50% {
top: -400px;
}
100% {
top: -200px;
}
}
</style>
<style>
.button {
height: 100px;
width: 100px;
background-color: red;
border-radius: 50%;
position: relative;
top: -210px;
overflow=scroll;
}
</style>
<div class="button" onclick="jump()">
<h1>JUMP</h1>
</div>
<div class="obstacle"></div>
<style>
#keyframes obstacle {
from {
left: 1000px;
}
to {
left: -870px;
}
}
</style>
</center>
</body>
</html>
Btw a snood is the turkey's thing under its beak. So to restate the question, How do i detect if the obstacle passes the turkey and see if the turkey jumps or not? Thanks

cannot restart the css animation onclick in chrome

I have search on the topic about restarting animation and that can be done by remove and add class again. But when I test it myself with the same method, I found that it doesn't work in many browsers. It only work in Edge. Is there something I did wrong?
here is the html:
function(elem) {
elem.classList.remove("animation");
setTimeout(function(){
elem.classList.add("animation");
elem.style.animationName = "transformOuter";
elem.style.webkitAnimationName = "transformOuter";},1)
}
div.wrapperL {
float: left;
width: 40px;
height: 38px;
background: rgb(255, 255, 255);
position: relative;
border: 1px solid white;
margin: 0 1px 5px 0;
}
div.wrapperLeft {
width: 40px;
height: 38px;
background: white;
position: relative;
border: 1px solid lightgrey;
}
div.animation {
-webkit-animation-name: none;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: 1;
animation-name: none;
animation-duration: 5s;
animation-iteration-count: 1;
}
#-webkit-keyframes transformOuter {
0% {background-color: #FFFFFF; width: 40px; height: 38px; left: 0px; top: 0px; z-index: 10;}
40% {width: 120px; height: 114px; left: -40px; top: -38px; font-size: 30px;}
60% {width: 120px; height: 114px; left: -40px; top: -38px; font-size: 30px; transform: rotateY(0deg); }
100% {width: 0px; height: 0px; left: 20px; top: 19px; background-color: #FFFFFF; transform: rotateY(360deg); z-index: 0; font-size: 0px;}
}
<div class = "wrapperL">
<div class= "wrapperLeft" onclick = functionAnime(this)></div>
</div>
I also have another keyframe without -webkit- but same thing inside.The animation do trigger once in chrome but when I click again, nothings happen.

You have to remove style as well same as you did with class see working example: And yes your function name was incorrect I assumed it was a typo.
function functionAnime(elem) {
elem.classList.remove("animation");
elem.style = '';
setTimeout(function(){
elem.classList.add("animation");
elem.style.animationName = "transformOuter";
elem.style.webkitAnimationName = "transformOuter";
},100)
}
div.wrapperL{
float: left ;
width: 40px;
height: 38px;
background: rgb(255, 255, 255);
position: relative;
border: 1px solid white;
margin: 0 1px 5px 0;}
div.wrapperLeft{
width: 40px;
height: 38px;
background: white;
position: relative;
border: 1px solid lightgrey; }
div.animation{
-webkit-animation-name: none;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: 1;
animation-name: none;
animation-duration: 5s;
animation-iteration-count: 1;}
#-webkit-keyframes transformOuter{
0% { background-color: #FFFFFF; width: 40px; height: 38px; left: 0px; top: 0px; z-index: 10;}
40% { width: 120px; height: 114px; left: -40px; top: -38px; font-size: 30px;}
60% { width: 120px; height: 114px; left: -40px; top: -38px; font-size: 30px; transform: rotateY(0deg); }
100% { width: 0px; height: 0px; left: 20px; top: 19px; background-color: #FFFFFF; transform: rotateY(360deg); z-index: 0; font-size: 0px;}}
<div class = "wrapperL">
<div class= "wrapperLeft animation" onclick = functionAnime(this)></div>
</div>

Spin a div but make its content not go upside down

Is there a way to make a div spin, aswell as its content, but make the content not go upside-down while rotating ?
What I mean is that the div-childs would follow the rotation of the mother-div spinning, but while remaining in the same direction (top on top, bottom on bottom).
My english isn't goog enough to articulate properly what I want to do, so here is an exemple :
.spin {
margin: 50px;
width: 200px;
height: 200px;
background: orange;
animation: spin 10s infinite linear;
}
#div1 {
border: 1px solid blue;
width: 50px;
height: 50px;
}
#div2 {
border: 1px solid red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
}
#div3 {
border: 1px solid black;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
}
#div4 {
border: 1px solid green;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
right: 0;
}
.spin:hover {
animation-play-state: paused;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
<div class="spin">
<div id="div1">hello
</div>
<div id="div2">hello
</div>
<div id="div3">hello
</div>
<div id="div4">hello
</div>
</div>
In the exemple above, the child divs are following the rotation and the spin.
I would like them not to "spin upside-down" and just follow the rotation.
I've seen these type of animation in several websites but I can't recall where exactly.
Is there a way to do this in css/js/jquery/php... ?

You can apply the same animation to the four children, but in reverse. That way, the rotation of the children counteract the rotation of the parent and the children remain upright.
For clarity, I've used animation-direction to reverse the animation:
animation-direction: reverse;
But you could include the direction in your animation shorthand, like:
animation: spin 10s reverse infinite linear;
Here's an example:
.spin {
margin: 50px;
width: 200px;
height: 200px;
background: orange;
animation: spin 10s infinite linear;
}
.spin div {
width: 50px;
height: 50px;
animation: spin 10s infinite linear;
animation-direction: reverse;
}
#div1 {
border: 1px solid blue;
}
#div2 {
border: 1px solid red;
position: absolute;
top: 0;
right: 0;
}
#div3 {
border: 1px solid black;
position: absolute;
bottom: 0;
left: 0;
}
#div4 {
border: 1px solid green;
position: absolute;
bottom: 0;
right: 0;
}
.spin:hover,
.spin:hover div {
animation-play-state: paused;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
<div class="spin">
<div id="div1">hello</div>
<div id="div2">hello</div>
<div id="div3">hello</div>
<div id="div4">hello</div>
</div>

Following #showdev answer, if you want the borders around the inner divs to follow the spin of the outer block and only make the text inside to stay "fixed" in position - you can use a bit of jQuery for that:
$('.spin div').each(function() {
$(this).contents().wrap('<span></span>');
});
I also added a bit of css, you can check inside the snippet:
$('.spin div').each(function() {
$(this).contents().wrap('<span></span>');
});
.spin {
margin: 50px;
width: 200px;
height: 200px;
background: orange;
animation: spin 10s infinite linear;
}
.spin div {
text-align: center;
line-height: 50px;
}
.spin div span {
animation: spin 10s infinite linear;
animation-direction:reverse;
display: inline-block;
}
#div1 {
border: 1px solid blue;
width: 50px;
height: 50px;
}
#div2 {
border: 1px solid red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
}
#div3 {
border: 1px solid black;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
}
#div4 {
border: 1px solid green;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
right: 0;
}
.spin:hover, .spin:hover span {
animation-play-state: paused;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spin">
<div id="div1">hello</div>
<div id="div2">hello</div>
<div id="div3">hello</div>
<div id="div4">hello</div>
</div>

I understood you also wanted each of 4 elements to stay in the area of their corners. This might need some extra animation to have them run around the parent edges.
Below the idea of what i understood:
.spin {
margin: 50px;
width: 200px;
height: 200px;
background: orange;
position: relative;
animation: spin 10s infinite linear;
}
.spin div {
width: 50px;
height: 50px;
}
#div1 {
border: 1px solid blue;
animation: spin1 10s infinite linear;
position: absolute;
top: 0;
left: 0;
}
#div2 {
animation: spin2 10s infinite linear;
border: 1px solid red;
position: absolute;
top: 0;
right: 0;
}
#div3 {
animation: spin3 10s infinite linear;
border: 1px solid black;
position: absolute;
bottom: 0;
left: 0;
}
#div4 {
animation: spin4 10s infinite linear;
border: 1px solid green;
position: absolute;
bottom: 0;
right: 0;
}
.spin:hover,
.spin:hover div {
animation-play-state: paused!important;/* or used id and several selectors to avoid the important and overide div#div1 {...}*/
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
#keyframes spin1 {
0% {
transform: rotate(0deg);
}
25% {
top: 150px;
left: 0
}
50% {
left: 150px;
top: 150px
}
75% {
left: 150px;
top: 0;
}
100% {
transform: rotate(-359deg);
}
}
#keyframes spin2 {
0% {
transform: rotate(0deg);
}
25% {
top: 0;
right: 150px
}
50% {
right: 150px;
top: 150px
}
75% {
top: 150px;
right: 0;
}
100% {
transform: rotate(-359deg);
}
}
#keyframes spin3 {
0% {
transform: rotate(0deg);
}
25% {
bottom: 0;
left: 150px
}
50% {
left: 150px;
bottom: 150px
}
75% {
bottom: 150px;
left: 0;
}
100% {
transform: rotate(-359deg);
}
}
#keyframes spin4 {
0% {
transform: rotate(0deg);
}
25% {
right: 0;
bottom: 150px
}
50% {
right: 150px;
bottom: 150px
}
75% {
right: 150px;
bottom: 0;
}
100% {
transform: rotate(-359deg);
}
}
<div class="spin">
<div id="div1">top left</div>
<div id="div2">top right</div>
<div id="div3">bottom left</div>
<div id="div4">bottom right</div>
</div>

Add this rule to each numbered div:
counterspin 10s infinite linear;
and then this keyframes animation
#keyframes counterspin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-359deg);
}
}

.spin {
margin: 50px;
width: 200px;
height: 200px;
background: orange;
animation: spin 10s infinite linear;
position:relative;
}
.spin div {
margin:10px;
animation: spin 10s infinite ease-in-out;
animation-direction: reverse;
}
#div1 {
border: 1px solid blue;
width: 50px;
height: 50px;
position:absolute;
top:0;
left:0;
}
#div2 {
border: 1px solid red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
}
#div3 {
border: 1px solid black;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
}
#div4 {
border: 1px solid green;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
right: 0;
}
.spin:hover {
animation-play-state: paused;
}
.spin:hover div {
animation-play-state: paused;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
<div class="spin">
<div id="div1">hello
</div>
<div id="div2">hello
</div>
<div id="div3">hello
</div>
<div id="div4">hello
</div>
</div>
you may try this
.spin {
margin: 50px;
width: 200px;
height: 200px;
background: orange;
animation: spin 10s infinite linear;
position:relative;
}
.spin div {
margin:10px;
animation: spin 10s infinite ease-in-out;
animation-direction: reverse;
}
#div1 {
border: 1px solid blue;
width: 50px;
height: 50px;
position:absolute;
top:0;
left:0;
}
#div2 {
border: 1px solid red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
}
#div3 {
border: 1px solid black;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
}
#div4 {
border: 1px solid green;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
right: 0;
}
.spin:hover {
animation-play-state: paused;
}
.spin:hover div {
animation-play-state: paused;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}

Develop Reference

JavaScript is the programming language of the Web.

How do I Make The Turkey jump On Click - javascript

Related

Inserting pictures into circles using JavaScript, HTML and CSS

How can I get two separate animations to play upon a single onclick?

How Do I make A Function To Check If an animation passes a certain point

cannot restart the css animation onclick in chrome

Spin a div but make its content not go upside down

Categories

Resources