how i can start the gradient of image when push a button? - javascript

i have a problem with gradient code, i code it in css and everything is work perfect but the problem is that the gradient of image is start automatically, so i want to make the gradient start when i press the button
i tried to connect it with function in java script but it didn't work
<style>
.image {
width: 50vw;
height: 70vh;
position relative;
margin-top: -49%;
background: linear-gradient(-135deg, #ffffff, #ffffff, #ffffff, #ffffff,
#d9d9d9, #b3b3b3, #8c8c8c, #595959, #333333, #000000 ,#000000 ,#000000);
background-size: 400% 400%;
-webkit-animation: Gradient 5s ;
-moz-animation: Gradient 5s ;
animation: Gradient 5s ;
animation-fill-mode: forwards;
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
100% {
background-position: 100% 50%
}
}
</style>
<body>
<input type="radio" name="switch" value="on" onclick="changeImage()" />
<input type="radio" name="switch" value="off" checked="checked"
onclick="changeImage()"/>
</div>
<div class = "image">
<img src="image/bef_logo.png" id="myImage" style= "width: 10vw; position:
absolute; margin: 11% 0% 0% 19%;">
</div>
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("image/bef_logo.png")) {
image.src = "image/aft_logo.png";
}
else {
image.src = "image/bef_logo.png";
}
}
</script>
</body>
this is my code , the image and gradient .. all i want is to start gradient (which is appear in css code .image) when function changeimage() is applied


You can make the animation independent of the image by creating a new class in CSS:
.switch-animation{
-webkit-animation: Gradient 5s ;
-moz-animation: Gradient 5s ;
animation: Gradient 5s ;
animation-fill-mode: forwards;
}
Everything animation related is taken out and added to that class.
Once you have the class, add the line of code below somewhere in your changeImage() function, this will toggle the animation.
<script>
function changeImage() {
if (image.src.match("image/bef_logo.png")) {
//Code to toggle animating class:
document.querySelector('.image').classList.toggle('switch-animation');
image.src = "image/aft_logo.png";
}
else {
image.src = "image/bef_logo.png";
}
}
</script>

Related

How to play animation on div with javascript

Here is my script so far:
Html:
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css">
</head>
<body>
<div id="test"></div>
</body>
</html>
Css:
#test {
background-color: blue;
width: 100px;
height: 100px;
}
/* Here is the animation (keyframes) */
#keyframes fading {
0% { opacity: 1; }
100% { opacity: 0; }
}
But how do i get the css animation (keyframes) to play on the div #test using some javascript?

Try to add 'animation' css property from js:
document.getElementById('test').style.animation = 'fading 2s infinite'

Add the animation to a class in CSS.
.fade {
animation: fading 1s forwards; // "fading" is the keyframe animation you created
}
[forwards][1] makes it so the element remains in the final state of the animation.
Then in Javascript when you want to animate your div, add the class to the element.
var el = document.getElementById('test'); // get a reference to the targeted element
el.classList.add('fade'); // add the class name to that element
document.getElementById('fader').addEventListener('click', function() {
var el = document.getElementById('test');
el.classList.add('fade');
});
#test {
background-color: blue;
width: 100px;
height: 100px;
}
.fade {
animation: fading 1s forwards;
}
/* Here is the animation (keyframes) */
#keyframes fading {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div id="test"></div>
<button type="button" id="fader">fade out</button>

You have to add the animation keyframe fading to the div.
Have a look at this
#test {
background-color: blue;
width: 100px;
height: 100px;
position: relative;
-webkit-animation: fading 5s infinite;
animation: fading 5s infinite;
}
/* Here is the animation (keyframes) */
#keyframes fading {
0% { opacity: 1; }
100% { opacity: 0; }
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css">
</head>
<body>
<div id="test"></div>
</body>
</html>

.cube {
width:40px;
height:40px;
background:#000;
animation:spin 3s;
animation-iteration-count:infinite;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
<div class="cube"><div>
Like this give youre animation name like me(spin) and use this variable in animation selector with css. :)

You just declared the animation and did not used. You have to call it with "animation" keyword:
#test {
background-color: blue;
width: 100px;
height: 100px;
animation: fading 1s;
}

There is no need to use JS when you use #keyframes css
To add the #keyframes faded animation to the div just add those additional 2 lines to #test css . This will create 5s animation
#test {
background-color: blue;
width: 100px;
height: 100px;
-webkit-animation: fading 5s; /* Safari 4.0 - 8.0 */
animation: fading 5s;
}
You can add 'infinite' to loop the animation
-webkit-animation: fading 5s infinite; /* Safari 4.0 - 8.0 */
animation: fading 5s infinite;

Cross-fading background images with Javascript [duplicate]

I've placed three background images in a div. I'm trying to make all three of them cycle through on a timer that fades in and out. I've actually found similar quesitons on here, but I cannot get them to work. Anyway, here's the relevant code:
HTML
<div id="slideshow">
</div>
CSS
#slideshow{
position:relative;
top:0;
width:100%;
height:635px;
background:
url("car4.jpg"),
url("city.jpg"),
url("host3.jpg");
background-repeat:no-repeat;
background-size:100%;
}
I'm hoping to do this in CSS, but I'm guessing it requires JQUERY; which I don't have much experience in. But that's OK.
I'd really appreciate any help. Let me know if I can give you any more information. Thank you.
*** I've tried css animations but I didn't get the results. Here's what I changed it to:
#slideshow{
position:relative;
top:0;
width:100%;
height:635px;
background:url("car4.jpg");
background-repeat:no-repeat;
background-size:100%;
animation-name: one;
animation-duration: 4s;
}
#keyframes one {
from {background: url("car4.jpg");}
to {background: url("city.jpg");}
}
This looks correct, but it still only showing the original image "car4.jpg"
Thanks

Try creating array from css background-image value , fading in , fading out first background image ; removing faded out background image from array , placing removed background image at last index of array ; resetting background image value to array joined by comma; fading in , fading out next , now first indexed background image ; cycling through fading in , fading out all background images ; recursively calling function , to attempt to create displayed effect of an "infinite" fade in , fade out "slideshow"
$(function() {
// set `$.fx.interval` at `0`
$.fx.interval = 0;
(function cycleBgImage(elem, bgimg) {
// `elem`:`#slideshow`
// set, reset, delay to `1000` after background image reset
elem.css("backgroundImage", bgimg)
// fade in background image
.fadeTo(3000, 1, "linear", function() {
// set `delay` before fadeing out image
// fade in background image
$(this).delay(3000, "fx").fadeTo(3000, 0, "linear", function() {
// split background image string at comma , creating array
var img = $(this).css("backgroundImage").split(","),
// concat first background image to `img` array,
// remove first background image from `img` array
bgimg = img.concat(img[0]).splice(1).join(",");
// recursively call `cycleBgImage`
cycleBgImage(elem, bgimg);
});
});
}($("#slideshow")));
});
body {
width: 400px;
height: 400px;
}
/* set `#slideshow` parent background color */
.slideshow {
background: #000;
display:block;
width:inherit;
height:inherit;
}
#slideshow {
width: 100%;
height: 100%;
display: block;
opacity: 0.0;
background-color: #000;
/*
set background images as `url(/path/to/image)` here,
separated by commas
*/
background-image: url("http://lorempixel.com/400/400/cats/?1"),
url("http://lorempixel.com/400/400/animals/?2"),
url("http://lorempixel.com/400/400/nature/?3"),
url("http://lorempixel.com/400/400/technics/?4"),
url("http://lorempixel.com/400/400/city/?5");
background-size: cover, 0px, 0px, 0px;
/* set transtitions at 3000ms
-webkit-transition: background-image 3000ms linear;
-moz-transition: background-image 3000ms linear;
-ms-transition: background-image 3000ms linear;
-o-transition: background-image 3000ms linear;
transition: background-image 3000ms linear;
*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="slideshow">
<div id="slideshow"></div>
</div>
jsfiddle http://jsfiddle.net/gkjL6mdj/15/

From the answer here and suggestion from #guest271314 try defining CSS 3 key frames for animation:
#slideshow{
position:relative;
top:0;
width:100%;
height:635px;
background:
url("car4.jpg"),
url("city.jpg"),
url("host3.jpg");
background-repeat:no-repeat;
background-size:100%;
-moz-animation: swim 2s linear 0s infinite;
-webkit-animation: swim 2s linear 0s infinite;
animation: swim 2s linear 0s infinite;
}
#-moz-keyframes swim {
from { background-position: 200% 0, 0 0; }
to { background-position: -100% 0, 0 0; }
}
#-webkit-keyframes swim {
from { background-position: 200% 0, 0 0; }
to { background-position: -100% 0, 0 0; }
}
#keyframes swim {
from { background-position: 200% 0, 0 0; }
to { background-position: -100% 0, 0 0; }
}

CSS
#background-slideshow {
transition: background 1.5s ease;
background-position: center top, center top, center top;
background-size: cover, cover, cover;
background-repeat: no-repeat, no-repeat, no-repeat;
background-image: url(img/background-1.jpg), url(img/background-2.jpg), url(img/background-3.jpg);
}
JS
var i = 1;
setInterval(function() {
e = document.getElementById('background-slideshow');
switch (i) {
case 0:
e.style.backgroundPosition = 'center top, center top, center top';
break;
case 1:
e.style.backgroundPosition = window.innerWidth + 'px top, center top, center top';
break;
case 2:
e.style.backgroundPosition = window.innerWidth + 'px top, ' + window.innerWidth + 'px top, center top';
break;
}
i++;
if (i > 2) i = 0;
}, 3000);

HTML/CSS image rotate and multi spin and ease out

I tried so many CSS code snippets, but all do only parts of what I want.
Here's what I'm trying to achieve within function myspin(x){}
1.) on click rotate image x degrees invisibly
2.) and then animate spin 800 degrees visible
3.) stop with slow ease out
4.) clear all necessary so on next click on button works again
function myspin() {
var x = 800;
document.getElementById("arrowid2").style.transform = "rotate(" + x + "deg)";
document.getElementById("arrowid2").style.animation = "arrowspin 2s ease-out 1 normal";
}
#arrowid2 {
position: absolute;
top: 100px;
left: 100px;
-webkit-transition: -webkit-transform 2s ease-out;
}
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<input type="button" value="click" onclick="myspin();" />
<br/>
<br/>
<br/>
<img id="arrowid2" src="arrow001.png" alt="" border="0" width="87" height="306">
</body>

all rotation is done in css, js only adds/removes animated class after 2500ms(animation duration). why do you want 800 deg? it will jump in that case to existing position, I made 360*3 instead as of now so animation ends where it starts
$('img').click(function() {
$(this).addClass('animated');
var that = this;
setTimeout(function() {
$(that).removeClass('animated');
}, 2500)
});
img {
width: 400px;
height: 135px;
}
img.animated {
animation: spin ease-out 2.5s;
}
#keyframes spin {
0% {
opacity: 0;
transform: rotate(20deg);
}
10%{
opacity: 0;
}
20% {
opacity: 1;
}
100% {
transform: rotate(1080deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src='https://puu.sh/tTsnZ/9294a8c88e.png' />

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

resume animation css3 from start

i trying to make a button that stop a css3 animation and start it again
i tried the function
object.style.animationPlayState="paused";
but the problem that i wanna to stop and rerun it again from the start not to resume it from the last place.
also i tried to manipulate object.style.left value before stop also starts from the last place it was.
my last try was setting the count with 0 but no luck so far
any ideas about this problem?
the code
<html>
<head>
<title>Move 3 pic's</title>
</head>
<style>
#div1{position: relative; top:100px;}
#div2{position: relative ; top:100px;left:290px;}
#div3{position: relative ; top:250px; left:50px;}
#divmain
{
width: 400px; height:300px; border: 10px solid navy; margin: 5px;
}
.animate1
{
animation: movingdiv1 5s infinite alternate;
animation-timing-function:linear;
}
.animate2
{
animation: movingdiv2 5s infinite alternate;
animation-timing-function:linear;
}
.animate3
{
animation: movingdiv3 5s infinite alternate;
animation-timing-function:linear;
}
#-moz-keyframes movingdiv1
{
from {left: 0px;}
to {left: 300px;}
}
#-moz-keyframes movingdiv2
{
from {left: 300px;}
to {left: 0px;}
}
#-moz-keyframes movingdiv3
{
from {top: 240px;}
to {top: 0px;}
}
</style>
<script>
var x=0;
function start()
{
document.getElementById("div1").style.animationIterationCount="infinite";
document.getElementById("div2").style.animationIterationCount="infinite";
document.getElementById("div3").style.animationIterationCount="infinite";
if(x==1)
{
document.getElementById("start").value="Stop";
document.getElementById("div1").style.animationPlayState="running";
document.getElementById("div2").style.animationPlayState="running";
document.getElementById("div3").style.animationPlayState="running";
x=0;
}
else
{
document.getElementById("start").value="Start";
document.getElementById("div1").style.animationPlayState="paused";
document.getElementById("div2").style.animationPlayState="paused";
document.getElementById("div3").style.animationPlayState="paused";
x=1;
}
}
function reset()
{
/*what i tried here*/
document.getElementById("div1").style.animationPlayState="paused";
document.getElementById("div2").style.animationPlayState="paused";
document.getElementById("div3").style.animationPlayState="paused";
document.getElementById("div1").style.left="0px";
document.getElementById("div2").style.left="297px";
document.getElementById("div3").style.top="250px";
document.getElementById("div1").style.animationIterationCount="0";
document.getElementById("div2").style.animationIterationCount="0";
document.getElementById("div3").style.animationIterationCount="0";
}
</script>
<body>
<div id=divmain>
<span class="animate1" id=div1>
<img src="icon1.gif" id="icon1" width="50" height="50"/></span>
<span class="animate2" id=div2>
<img src="icon2.gif" id="icon2" width="50" height="50"/></span>
<span class="animate3" id=div3><img src="top.jpg" id="icon3" width="50" height="50"/></span>
</div>
<input id=start type=button onClick=start() value='Stop'>
<input id=reset type=button onClick=reset() value='Reset'>
</body>

If you want to rerun the animation from the start, remove the 'alternate' in the animation property.
.animate1
{
animation: movingdiv1 5s infinite;
animation-timing-function:linear;
}
.animate2
{
animation: movingdiv2 5s infinite;
animation-timing-function:linear;
}
.animate3
{
animation: movingdiv3 5s infinite;
animation-timing-function:linear;
}
EDIT:
Maybe I didn't understand your question earlier. You want to stop and rerun it again from the start, whenever the button is clicked. For that, I have modified the start function(). Whenever the Stop button is pressed the animate classes are removed from the moving divs. And when the start button is pressed, the animate classes are added.
function start()
{
document.getElementById("div1").style.animationIterationCount="infinite";
document.getElementById("div2").style.animationIterationCount="infinite";
document.getElementById("div3").style.animationIterationCount="infinite";
if(x==1)
{
document.getElementById("start").value="Stop";
document.getElementById("div1").className = "animate1";
document.getElementById("div2").className = "animate2";
document.getElementById("div3").className = "animate3";
x=0;
}
else
{
document.getElementById("start").value="Start";
document.getElementById("div1").className = "";
document.getElementById("div2").className = "";
document.getElementById("div3").className = "";
x=1;
}
}

Categories

Resources