On Load Gif Followed by Looping Gif - javascript

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>

Related

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

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>

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>

How do I fade 2 images with jQuery on mouseenter and mouseleave?

I have a custom button (code below). I want it to:
rotate quickly 360 on mouseenter (currently working fine)
fade quickly to a darker image on mouseenter (also currently working fine)
NOT un-rotate on mouseleave (currently working fine)
I can't yet figure out how to:
fade back to the original image on mouseleave (not working yet)
I have tried so many variations of jQuery including .hover, .fadeToggle, fadeIn, fadeOut as well as animate but none have seemed to work for me.
Am I missing something really simple and obvious?
NOTE: I have just used the Apple logo for demonstration here. If I can get the 'fade back on mouseleave' working I can just transfer it to my real life situation.
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(500).queue(function() {
$(this).removeClass("change").dequeue();
});
});
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;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="main">
<img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg">
</div>
<p id="dis"></p>
</body>
</html>
Thanks in advance!
is this what you want. hope this 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;
}
</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(){
$(this).addClass("change").fadeTo('fast',0.7).delay(5000).queue(function(){
$(this).removeClass("change").fadeTo('slow',1.0).dequeue();
});
});
</script>
</body>
</html>
I'm not 100% certain what you are after... I think this is close. Rotates 360° and opacity dims to 60%, then rotates back to 0° and full opacity.
No clue why you even needed the opacity class or the associated jQuery for it.
$("div.main").hover(
function() {
$(this).addClass('change').addClass('myopacity');
},
function() {
$(this).removeClass('myopacity')
});
body { padding: 40px; }
div.main {
width: 100px;
height: 100px;
opacity: 1;
transition: all .5s;
transition: all .5s;
background: url(https://image.freepik.com/free-icon/apple-logo_318-40184.jpg) no-repeat center center;
background-size: cover;
}
div.main img {
width: 100%;
height: 100%;
}
.main.change {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
transition: all .5s;
background: url(https://image.freepik.com/free-icon/windows-8-logo_318-40228.jpg) no-repeat center center;
background-size: cover;
}
.change.myopacity {
opacity: .6; }
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="main">
</div>
<p id="dis"></p>
</body>
</html>
If you want the images in the actual HTML, then you can use the jQuery hover function to alter the image sources.
Found it.
Trying to manage two transitions on the exact same element was making it too complicated.
I ended up having to add one class to the img element and another to the div element. The img element now manages the rotation and the div element manages the fade through simple CSS :hover transitions.
This makes the jQuery much more simple.
See updated code below:
$("div.main").mouseenter(function() {
$(".image").addClass("change").delay(500).queue(function() {
$(".image").removeClass("change").dequeue();
});
});
// jQuery now much more simple. No need for variables or the if/else statement
div.main {
width: 100px;
height: 100px;
-webkit-transition: all .5s ease-in;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-in;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-in;
-o-transition: all .5s ease-out;
}
/* This will take care of the fade transition on :hover */
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;
} */
/* The .myopacity class is no longer necessary as it's taken care of through the div.main:hover class below */
div.main:hover, div.main:active, div.main:focus {
opacity: 0.6;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="main">
<img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg" class="image">
</div>
<p id="dis"></p>
</body>
</html>
Kind of cheated with not using jQuery for the fade transition (as originally hoped for) but this works equally as well!

Crossfading a PNG sprite

I have this PNG:
http://imgur.com/DbVFiyW
And I'm trying to make an animation with this png through CSS, I want the images to crossfade so it creates the illusion of only the petals fading in. For now the images do change correctly, but I have no idea how to make the new petals fade in. At this point I'll accept any approach with Javascript/jquery, although css only would be perfect.
This is my Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS Sprite Animation</title>
</head>
<style type="text/css">
#spriteContainer {
width: 700px;
height: 507px;
display: block;
background-image: url("karuna_animation.png");
animation: sprite 3s steps(12) infinite;
}
#keyframes sprite {
100% {
background-position: -8520px;
}
}
</style>
<body>
<div id="spriteContainer"></div>
</body>
</html>
Maybe you could use several divs with different opacities?
.spriteContainer {
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 507px;
display: block;
background-image: url("http://i.imgur.com/DbVFiyW.png");
animation: sprite 3s steps(12) infinite;
}
#spriteContainer1 {
opacity: 0.3;
animation-delay: 0.08s;
}
#spriteContainer2 {
opacity: 0.6;
animation-delay: 0.16s;
}
#spriteContainer3 {
opacity: 1;
animation-delay: 0.24s;
}
HTML:
<div id="spriteContainer1" class="spriteContainer"></div>
<div id="spriteContainer2" class="spriteContainer"></div>
<div id="spriteContainer3" class="spriteContainer"></div>
jsfiddle
Maybe a way to do the fadeIn is to cut your sprite as many pictures you have with petals and then use a function in jQuery to fade them ?
So you will have a structure like this :
<div id="spriteContainer">
<img src="yourFirstPetal" alt="1st-petal" />
<img src="yourSecondPetal" alt="2nd-petal" />
<!-- and so on -->
</div>
And in CSS, you position your images in absolute position, one above the precedent one and play with fadeIn() and fadeOut() to show them with jQuery (or CSS but I don't know the method) ?
See an example of what I'm meaning here

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