I have a .gif that is animated to begin from the left of the screen to a few hundred pixels to the right. The animation lasts 5 seconds and I have set it so it doesn't return to its initial spot.
What I want is for the .gif to start once the CSS animation is finished. I realise that some forums give codes for a mouseover effect so that it changes from a .jpg source of the animation to the .gif. But I can't find anything that gives you a timer instead of mouseover.
It's been a few years since I've worked on websites and I've forgotten so much, so this has been a struggle.
Any help is appreciated. Cheers.
The way to change an <img> source via javascript is fairly simple, the syntax looks like img.src = "new/source.gif".
Having the change to a GIF match up with the end of your animation can be achieved a variety of ways, but I would do it by adding the animation to your element as a class at the same time you set a time out in your javascript.
HTML
<img id="image" src="path/to/static.jpg">
JAVASCRIPT
var img = document.getElementById("image");
function photoSwitch(){
// begin your CSS animation by applying class
img.setAttribute("class", "some-animation");
// have javascript wait 5s before switching the image source
setTimeout(function(){
img.src = "path/to/moving.gif";
},5000);
}
photoSwitch();
Related
I have a background image as a map. I want a list of testimonials (absolutely positioned divs) to appear and disappear one after the other on said map. Once all have been shown it needs to repeat.
How would I implement this using css3 animations?
You can use CSS3 animations and by delaying them you can create a full element animation, and then use JS setInterval to restart the animation. This is a commonly used way to do AdWords ads.
A good library with predefined animations is animate.css and you need to calculate the time all animations pass and are complete and set a interval that is removing the class and adding it back every time the animations are done(total time needed for all animations to be completed).
a trick that i like to use is to iterate through each element you wish to show and offset the animation by a length of time * the element index. You could wrap this in a function and call it after time * element array length. This would effectively loop it forever. Some generic code based on half second animations would look like:
function runThrough() {
$('.your-elements').each(function(i,v) {
var current = $(this);
setTimeout(function() {
// do your animation e.g. $(current).fadeIn(500);
}, i * 500);
});
setTimeout(runThrough(), $('.your-elements').length * 500 );
}
I'm using animate.css for doing some animations. If an error occurs, the element should bounce:
$target.addClass('animated bounce');
That's working well. But if the user is doing the same thing, there won't be a second animation, as the classes are already added.
So I try to remove the classes after the animation like this:
$target.addClass('animated bounce');
setTimeout(function(){
$target.removeClass('animated bounce');
}, 1000);
My question is, if this is how it should be done (I don't know how long the animation is exactly), or is there another solution for repeating animations?
You need to do this:
$('#target').removeClass().addClass('bounce animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});
$('#target') is in this case the ID of your element, change this to your needs.
there is a shorter solution , you have to 'refresh' the animated element each time
function refreshElement(id){
var el = $(id);
el.before( el.clone(true) ).remove();
}
and that way you can run an animation on that element again
Run on mouse enter AND exit:
$target.stop().toggleClass('animated bounce');
the animation class is added & removed based on the mouse's hover (enter/exit) action. The class will not be left active after exiting the item.
The .stop() will stop the animation from repeating multiple times if someone hovers/exits many times before an animation is complete.
A lot of people need to restart their CSS3 animations; Well I want the exact opposite:
If I start an animation by adding the proper css class, the animation starts; If I then sort my container using a series of parentNode.insertBefore calls (and reusing the very same node instances), the animations restart every time.
Is there anything I can do to prevent this behavior?
Here's a fiddle showing this behavior: http://jsfiddle.net/v66G5/17/
Click on Add all, let the animation plays for a few seconds then click shuffle: Any node that moved has its animation restarted.
container.insertBefore(node, childrenClone[Math.floor(Math.random() * childrenClone.length)]);
Why manipulate DOM elements, when you can shuffle their CSS positions instead?
http://jsfiddle.net/v66G5/19/
children.each(function() {
var $node = $(this),
$node2 = $(children[Math.floor(Math.random() * children.length)]),
tmp = $node.position().top;
$node.css("top", $node2.position().top + 'px');
$node2.css("top", tmp + 'px');
});
Taking from http://dev.w3.org/csswg/css3-animations/
An animation specified on an element by modifying the style after the document has loaded will start when the style is resolved. That may be immediately in the case of a pseudo style rule such as hover, or may be when the scripting engine returns control to the browser (in the case of style applied by script).
An animation applies to an element if the element has a value for ‘animation-name’ that references a valid keyframes rule. Once an animation has started it continues until it ends or the ‘animation-name’ is removed. The values used for the keyframes and animation properties are snapshotted at the time the animation starts. Changing them during the execution of the animation has no effect
Removing and inserting nodes causes the elements to recalculate the style, so I don't think what you want is possible by simple css.
A possible way to achieve it using jQuery, would be to take a snapshot of opacity and time left till the end of animation when removing the node, and setting it back after inserting it (ie. for 10s animation, after 5s if shuffle was clicked, start from 50% opacity, with the duration of the animation at 5s)
Hi am making a small HTML5 canvas demo.
I initiated the canvas using modernizer from O'Reilly's HTML5 text.
This is for iPad so my canvas is 1024 by 768.
I then load in a background image in my DrawScreen function.
var backgroundImage = new Image();
backgroundImage.src = "images/background.jpg";
backgroundImage.onload = function(){
context.drawImage(backgroundImage,0,0);
}
I want to add text to this then. So I do:
function drawText(){
context.fillStyle ="gray";
context.font = "28px Helvetica";
context.fillText(message, 260, 700);
}
I then call both functions:
DrawScreen();
DrawText();
However my background image totally over writes my text. Or is on top of it. If I disable DrawScreen(); I can see the text. Changing the function order doesn't make a differnce...
How to do this? I feel so stupid that am stuck on something that seems so elementary.
Thanks
The problem is that your image is being drawn after -- and therefore on top of -- your text. This is because of the time it takes the image to load. Basically, what's happening is this:
You call your DrawScreen function
You start loading your background image by assigning the src attribute
You assign the onload() handler to fire once the image has finished loading.
DrawScreen exits, having completed all its work
You call DrawText, which immediately draws the text
At some point later, the image finishes loading, fires the onload() event, and you draw the background image.
I'd suggest restructuring your code so that all the drawing is kicked off by the successful loading of the image. That way, nothing asynchronous will be going on, and the image will be drawn, followed by the text.
Here's a quick example, on jsFiddle.
I have an image in Flex I want to change the image with actionscript to show some other image say every 3 seconds or so. I also want to make transition between the image and the next one for instance fade in/out. What is the best way to do so?
If you want to fade in the new image while at the same time fading out the old, use a Parallel object:
var p:Parallel = new Parallel();
var fadeOut:Fade = new Fade(image1);
fadeOut.alphaFrom = 1;
fadeOut.alphaTo = 0;
var fadeIn:Fade = new Fade(image2);
fadeIn.alphaFrom = 0;
fadeIn.alphaTo = 1;
p.addChild(fadeOut);
p.addChild(fadeIn);
p.duration = 1000; //time in ms
p.play();
Picking things up when you already have an image up:
Use the Fade effect on the first image. Make its alphaFrom="1.0" and its alphaTo="0.0". It willthen dispatch an EffectEnd event. In your handler for that event, switch the target image source and call another Fade effect, that switches the alphaFrom and alphaTo values and switches the image source. Then just use a timer or setTimeout (or setInterval) to stay on the image a certain length of time, then rinse and repeat. Look at the example in the link provided above. It's really not hard.
Use a timer to change the image source attribute in conjunction with Fade Effects.
The general gist is:
Timer Ends
Start Fade Out Effect
On Fade Out Effect complete, change image source
Start Fade In Effect
On Fade in Complete, restart timer