Flipping (about the x axis) an image in a CSS animation - javascript

A friend and I are trying to find a way to rotate an image being played on a CSS animation. Every time the image changes direction, the image itself will rotate.
<!DOCTYPE html>
<html>
<head>
<style>
.a {
width: 50px;
height: 50px;
position: relative;
animation-name: box;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate;
.a { }
.left { transform: scaleX(-1); }
/*
width: 12px;
height:12px;
*/
}
}
#keyframes box {
0% { left: var(--rando0); top: var(--rando1);}
25% { left: var(--rando2); top: var(--rando3);}
50% { left: var(--rando4); top: var(--rando5);}
75% { left: var(--rando6); top: var(--rando7);}
100% { left: var(--rando8); top: var(--rando9);}
}
</style>
</head>
<body>
<img src="image.gif" alt="imagehere" class='a left' class='character'>
<script>
const root = document.querySelector(":root"); // we first get the root element
for(let i = 0; i < 10; i++) {
root.style.setProperty(`--rando${i}`, `${Math.floor(Math.random() * 200) + 1}px`);
}
</script>
</body>
</html>
I tried this but so far nothing has worked so far. Can someone please help us? Thanks
Let me know if I need to do anything to the code to make it work better (or simplified).

maybe you need html syntax structure
<!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">
<title>Document</title>
<style>
.a {
width: 50px;
height: 50px;
position: relative;
animation-name: box;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.left {
transform: scaleX(-1);
}
#keyframes box {
0% {
left: var(--rando0);
top: var(--rando1);
}
25% {
left: var(--rando2);
top: var(--rando3);
}
50% {
left: var(--rando4);
top: var(--rando5);
}
75% {
left: var(--rando6);
top: var(--rando7);
}
100% {
left: var(--rando8);
top: var(--rando9);
}
}
</style>
</head>
<img src="f.png" alt="imagehere" class='a left' class='character'>
<script>
const root = document.querySelector(":root");
for (let i = 0; i < 10; i++) {
root.style.setProperty(`--rando${i}`, `${Math.floor(Math.random() * 200) + 1}px`);
}
</script>
</body>
</html>

Related

If the object in the first animation moves within a range constantly, how do I initiate the second animation for the object in particular position?

I want to make a sea level rise up and down originally. When I press the button, it rises from the particular sea level to the top, but I don't know how to do it. Below is my code, thank you!!!
In the css part, instead of setting keyframes "rise" top:290px, is there any other way to express the current sea level?
<button id="btn" onclick="startFunction()">Click</button>
<div class="sea" id="searise"></div>
<style>
.sea {
position: absolute;
height: 650px;
left: 0;
bottom: 0;
right: 0;
background: #a4c2ef;
animation: wave 3s ease-in-out infinite;
z-index: 0;
}
#keyframes wave {
0% {
top: 300px;
}
50% {
top: 290px;
}
100% {
top: 300px;
}
}
#keyframes rise {
0% {
top: 290px;
height: 650px;
}
100% {
top: 0;
height: 850px;
}
}
</style>
<script>
function startFunction() {
var searise = document.getElementById("searise");
searise.style.animation = "rise 10s forwards";
}
</script>
you can get current sea level with the help of javascript by reading offsetTop property of the sea. to use that info in css, you need to set a custom css property or css variable, so that you use dynamically in css.
<!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">
<title>Document</title>
</head>
<body>
<button id="btn" onclick="startFunction()">Click</button>
<div class="sea" id="searise"></div>
<style>
.sea {
position: absolute;
height: 650px;
left: 0;
bottom: 0;
right: 0;
background: #a4c2ef;
animation: wave 3s ease-in-out infinite;
z-index: 0;
}
#keyframes wave {
0% {
top: 300px;
}
50% {
top: 290px;
}
100% {
top: 300px;
}
}
#keyframes rise {
0% {
top: var(--dynamic-top); /* 👈 */
height: 650px;
}
100% {
top: 0;
height: 850px;
}
}
</style>
<script>
function startFunction() {
var searise = document.getElementById("searise");
searise.style.setProperty("--dynamic-top", `${searise.offsetTop}px`); // 👈
searise.style.animation = "rise 10s forwards";
}
</script>
</body>
</html>

How to make text slide from the left (hidden to visible), then stop in the middle and then slide all the way to right and out of the page and repeat?

I am want this announcement to be animated, with the text sliding in from the left, pausing in the middle and sliding out to the right and repeat.
enter image description here
<div class="announcement-bar>
<p class="announcement-animation>Free two day Shipping</p>
</div>
Here is the css animation code I figured out. But the issue is that the text is not centering properly. It takes the starting of the element(p tag), the letter F, to the center of page and not the center of element. What am I doing wrong?
.announcement-bar p {
width: max-content;
position: relative;
left: -50px;
animation: move 8s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
#keyframes move
{
37.5% {
left: calc(50% - 25px); opacity: 1; -webkit-filter: opacity(1);
}
75% { left: calc(50% - 25px); opacity: 1;}
85% { left: 80%; opacity: 0;}
100% {opacity: 0;}
}
Not centered
My example (code below) is based on a 1920px width viewport. Which means that if you’re gonna use this animation for mobile devices it won’t work properly. If you want to change the speed of the animation you need to alter the “animation: announcement ..s linear”. If you want to change the place the animation stops midway (you’ll need to change this with the media query if you want to make this kind of animation for Mobile viewports), alter the “40% {margin-left: …px;} 60%{margin-left: …px;}”.
body {
margin: 0;
padding: 0;
}
.announcement-bar {
width: 100%;
}
.announcement-animation {
margin-left: -200px;
animation: announcement 12s linear;
animation-fill-mode:none;
animation-iteration-count: infinite;
animation-delay: 2s;
white-space: nowrap;
font-family: Arial, Helvetica, sans-serif;
}
#keyframes announcement{
0% {
margin-left: 0px;
}
40% {
margin-left: 800px;
}
60%{
margin-left: 800px;
}
100% {
margin-left: 2000px;
}
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="announcement-bar">
<p class="announcement-animation">Free two day Shipping</p>
</div>
</body>
</html>

On Load Gif Followed by Looping Gif

I want to display a gif on site load and then have it change to looping gif afterward. I tried searching StackOverflow with no luck. Any direction on how to achieve this would be appreciated.
Below are the two animated icons I created. Their classes distinguish which one is on load and which one is looping.
.on-load-gif, .looping-gif{
max-width: 335px;
position: absolute;
top: 0;
left: 0;
}
.on-load-gif{
opacity: 1;
animation: fadeInAnimation ease 3s
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-duration: 2s;
}
#keyframes fadeInAnimation {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Animation Loop</title>
</head>
<body>
<img src="https://rossettibev.wpengine.com/wp-content/uploads/2020/08/R-Animation-for-Rossetti-on-load.gif" class="on-load-gif"alt="" />
<img src="https://rossettibev.wpengine.com/wp-content/uploads/2020/08/r-animation.gif" class="looping-gif" alt="" />
</body>
</html>

How to rotate an image back and forth with JavaScript

I am trying to create a website and on the website I want the faces to rotate to certain point and then rotate back in the opposite direction until a certain point, I would like it if they could keep doing this forever but I can only get it to do a full rotation forever does anyone know how to fix this?
This is my HTML code:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BSDC</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script>
var looper;
var degrees = 0;
function rotateAnimation(el,speed){
var elem = document.getElementById(el);
if(navigator.userAgent.match("Chrome")){
elem.style.WebkitTransform = "rotate("+degrees+"deg)";
} else if(navigator.userAgent.match("Firefox")){
elem.style.MozTransform = "rotate("+degrees+"deg)";
} else if(navigator.userAgent.match("MSIE")){
elem.style.msTransform = "rotate("+degrees+"deg)";
} else if(navigator.userAgent.match("Opera")){
elem.style.OTransform = "rotate("+degrees+"deg)";
} else {
elem.style.transform = "rotate("+degrees+"deg)";
}
looper = setTimeout('rotateAnimation(\''+el+'\','+speed+')',speed);
degrees++;
if(degrees > 359){
degrees = 1;
}
document.getElementById("status").innerHTML = "rotate("+degrees+"deg)";
}
</script>
</head>
<body>
<img id="Dave" src="Images/Dave.png"/>
<script>rotateAnimation("Dave",30);</script>
<img id="Andy" src="Images/Andy.png" />
<script>rotateAnimation("Andy",30);</script>
<img id="Dan" src="Images/Dan.png" />
<script>rotateAnimation("Dan",30);</script>
<img id="Nico" src="Images/Nico.png" />
<script>rotateAnimation("Nico",30);</script>
</body>
</html>
And this is my CSS code
body {
font-family: Arial, sans-serif;
background-image: url("Images/BSDC.png");
background-repeat: no-repeat;
}
#Dave {
position: absolute;
margin-left: 3%;
margin-top: 3%;
}
#Andy {
margin-left: 3%;
margin-top: 35%;
position: absolute;
}
#Dan {
margin-left: 85%;
margin-top: 3%;
position: absolute;
}
#Nico {
margin-left: 85%;
margin-top: 35%;
position: absolute;
}
You can do this all with CSS animation. Check out this jsFiddle
the browser prefixes are annoying... and if anybody knows if this can be simplified please comment. But this is the concept, you set an animation on your element:
#box {
-webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}
and then you define your animation, you can do any property changes and make as many steps in it as possible, i just used basic values (0, 25, 50 100)
#keyframes NAME-YOUR-ANIMATION {
0% { transform: rotate(0deg); }
25% { transform: rotate(45deg); }
50% { transform: rotate(-45deg); }
100% { transform: rotate(0deg); }
}
You can read up on this stuff on MDN

JavaScript and Visibility

I'm new to JavaScript and now I'm having this problem: When I launch the webpage the "btn" is invisible (hidden), but I need it to be visible until mousedown. Here is the script:
var start= false;
var racket = document.getElementById("racket");
var btn = document.getElementById("btn");
btn.style.visibility = "visible";
btn.onmousedown = Start();
function Start() {
btn.style.visibility = "hidden";
start = true;
document.onclick = RacketClick();
}
function RacketClick() {
}
When I launch the webpage, the btn is hidden... Can you help me?
UPD 1 HTML code and CSS code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>Main</title>
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/mymain.js"></script>
</head>
<body>
<div id="racket"></div>
<div id="btn"></div>
</body>
</html>
#racket {
top: 100%;
margin-top: -200px;
left: 50%;
margin-left: -77px;
position: absolute;
background-image: url('/images/racket.png');
width: 154px;
height: 250px;
animation-name: racketanimation;
animation-iteration-count: infinite;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-duration: 4s;
animation-timing-function: linear;
animation-direction:alternate;
}
#keyframes racketanimation {
from {
transform: rotateX(40deg);
}
to {
transform: rotateX(55deg);
}
}
#btn {
top: 50%;
left: 50%;
position: absolute;
margin-top: -128px;
margin-left: -128px;
height: 256px;
width: 256px;
background-image: url('/images/playnowborder.png');
animation-iteration-count: infinite;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-duration: 10s;
animation-name: clicken;
animation-timing-function: linear;
}
#keyframes clicken {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
I'm new to this website too! I would liked your answers, but I don't have reputation to vote...
You should use your function assignment without parenthesis:
btn.onmousedown = Start;
Otherwise function Start got executed at the moment of assignment and your button becomes hidden immediately.
This line is your problem:
btn.onmousedown = Start();
You are executing the function start and assigning the result (undefined) to btn.onmousedown. You should have:
btn.onmousedown = Start;
Without parenthesis, to assign the function, not call the function.

Categories

Resources