I have a gif image that I want to stretch by making the height and/or width variable. However, I want the image stretching to be done at a speed I set, so it is progressive and visible as it occurs on the screen. The code below works, but it renders the image immediately as a complete image, with no stretching visible. So I thought: insert some kind of timer function to slow down the execution of the "stretching" code. I have tried setTimeout and setInterval (using 1/100 sec delays), but I have not been able to make either work. What am I doing wrong here guys?
$(window).load(function(){
setInterval(function(){
var i=1;
for (i;i<400;i++) {
$("#shape1").html('<img src="image.gif" width="'+i+'" height="40">');
}
},10);
});
The problems with your code are that
at each interval iteration, you repeat the whole for loop
you never stop the interval looping
You may fix your existing code like this :
var i=1;
function step() {
$("#shape1").html('<img src="image.gif" width="'+i+'" height="40">');
if (i++<400) setTimeout(step, 10);
}
step();
Instead of replacing the #shape1 content each time, you could also simply change the width :
var i=1;
var $img = $('<img src="image.gif" width=1 height="40">').appendTo('#shape1');
function step() {
$img.css('width', i);
if (i++<400) setTimeout(step, 10);
}
step();
Demonstration
But jQuery has a very convenient animate function just for this kind of things.
As Dystroy suggested. Use jQuery animate instead
setInterval(function(){
var i=1;
for (i;i<400;i++) {
$("#shape1").animate({
width : i
},10);
}
}, 10);
Here is a jsfiddle
CSS3 transitions are great if your browser supports it.
.resize {
width: 200px;
height: 50px;
transition: width 1s ease;
}
Just add the class to an element to make it stretch out.
img.className = "resize";
css demo
Related
I'm trying to make some DOM element rotate smoothly around a fixed point. I'm writing this from scratch using jQuery and no matter what update speed I choose for the setInterval or how small I go with the amount of degrees the orbit advances on each loop, I get this janky staircase animation effect. I've tried using jquery's .animate instead of the .css hoping it would smooth things out but I cant seem to get it to work. Any help is appreciated.
In other words, it's not as smooth as rotating an image in HTML5 canvas. I want to make it smoother.
Here is a jsFiddle demonstrating the issue.
Notice how the animation is not quite smooth?
For reference, here is the code:
HTML
<div id="div"></div>
<div class="dot"></div>
<button class="stop">STOP</button>
<button class="start">START</button>
CSS
#div{
position:absolute;
height: 20px;
width: 20px;
background-color: #000;
}
.dot{
position:absolute;
width: 5px;
height: 5px;
background-color: #000;
}
button{
position:absolute;
}
.stop{
top:200px;
}
.start{
top:225px;
}
THE ALL IMPORTANT JAVASCRIPT
$(document).ready(function(){
$('#div').data('angle', 90);
var interval;
$('.stop').on('click', function(){
if(interval){
clearInterval(interval);
interval = undefined;
}
});
$('.start').on('click', function(){
if(!interval){
interval = setBoxInterval();
}
});
interval = setBoxInterval();
});
function drawOrbitingBox(degrees){
var centerX = 100,
centerY = 100,
div = $('#div'),
orbitRadius = 50;
//dot might not be perfectly centered
$('.dot').css({left:centerX, top:centerY});
//given degrees (in degrees, not radians), return the next x and y coords
function coords(degrees){
return {left:centerX + (orbitRadius * Math.cos((degrees*Math.PI)/180)),
top :centerY - (orbitRadius * Math.sin((degrees*Math.PI)/180))};
}
//increment the angle of the object and return new coords through coords()
function addDegrees(jqObj, degreeIncrement){
var newAngle = jqObj.data('angle') + degreeIncrement;
jqObj.data('angle', newAngle);
return coords(newAngle);
}
//change the left and top css property to simulate movement
// I've tried changing this to .animate() and using the difference
// between current and last position to no avail
div.css(addDegrees(div, degrees), 1);
}
function setBoxInterval(){
var interval = window.setInterval(function(){
drawOrbitingBox(-0.2); //This is the degree increment
}, 10); //This is the amount of time it takes to increment position by the degree increment
return interval;
}
I'd rather not resort to external libraries/plugins but I will if that's the accepted way of doing this kind of stuff. Thank you for your time.
That's because the value you set for top and left properties is rounded up. You should try using CSS Transforms.
Combining CSS Animations/Transitions and CSS Transforms you should also be able to get the animation without JavaScript.
Oh, I run into that myself!
There is actually nothing you can do, the stuttering you see is the pixel size. The pixel is the minimal step for css based animations, you can't do "half pixels" or "0.2 pixels". You will see that the same keeps happening with css3 animations.
The only solution is to speed up your animation, i'm afraid.
Also, cosndsider using rquestAnimationFrame instead of interval: https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame
I have conversation screen to be developed i have planned to change the background images for every millisecond so that it looks like a animation. I tried using jquery settimeout and setinterval but both the ways stack of images changing in small interval hangs the browser, any ideas of how to accomplish my task.
function change_background(new_image_source) {
var myimage = $( '#spriteanim' );
myimage.attr('src','style/images/Sprites/Screen1/'+new_image_source+'.png');
console.log(myimage.attr('src'));
timer = setTimeout( function () {
new_image_source = new_image_source+1;
change_background(new_image_source);
}, 50);
if(new_image_source>=10899){
change_background(new_image_source);
clearTimeout(timer);
}
}
Changing the src attribute will never work as you want. That's because the browser needs time to load the image. Even it is cached it is still too slow for animating. I'll suggest to combine your images into sprite and change the background-position. You can even do that with pure css transition.
For example -> http://jsfiddle.net/krasimir/uzZqg/
HTML
<div class="image"></div>
CSS
.image {
background: url('...');
width: 200px;
height: 200px;
transition: all 4000ms;
-webkit-transition: all 4000ms;
}
.image:hover {
background-position: -500px 0;
}
You can even use keyframes.
Here is how you can preload your images http://jsfiddle.net/krasimir/DfWJm/1/
HTML
<div id="preloader"></div>
JS
var images = [
'http://www.australia.com/contentimages/about-landscapes-nature.jpg',
'http://www.australia.com/contentimages/about-landscapes-nature.jpg',
'http://www.australia.com/contentimages/about-landscapes-nature.jpg',
'http://www.australia.com/contentimages/about-landscapes-nature.jpg',
'http://www.australia.com/contentimages/about-landscapes-nature.jpg',
'http://www.australia.com/contentimages/about-landscapes-nature.jpg'
];
var preloader = document.getElementById("preloader");
var preloadImages = function(callback) {
if(images.length == 0) {
callback();
return;
}
var image = images.shift();
var img = document.createElement("IMG");
img.setAttribute("src", image);
preloader.appendChild(img);
img.addEventListener("load", function() {
console.log("image loaded");
preloadImages(callback);
});
}
preloadImages(function() {
// your animation starts here
alert("Images loaded");
});
Of course you may hide the #preloader div with display: none;
Checkout http://spritely.net/
It'll handle the details of animating a spritesheet. Let's you set FPS and control playback.
I think 'every millisecond' is a bit too fast.
Image load takes some time. I think, you should load all the images once, before starting the animation. It will take some time, since number of images you are using seems to be 10899. And just hide all but one every few milliseconds. 'Few milliseconds', instead of 'every millisecond', should do your job.
UPDATE:
Name your images spriteanim0, spriteanim1... like this. After all the images have been loaded, and all have been assigned display: none, call this js function:
var new_image_source1;
function change_background(prev_image_source, new_image_source) {
document.getElementById('spriteanim' + prev_image_source).style.display = 'none';
document.getElementById('spriteanim' + new_image_source).style.display = 'block';
if (new_image_source >= 10899)
new_image_source1 = 0;
else
new_image_source1 = new_image_source + 1;
window.setTimeout(
function () {
change_background(new_image_source, new_image_source1);
},
50);
}
You can try this and change the setTimeout interval value accordingly, as needed.
I am trying to animate a div moving 200px horizontally in JavaScript.
The code below makes it jump the pixels, but is there a way to make it look animated without using jQuery?
function () {
var div = document.getElementById('challengeOneImageJavascript');
div.style.left = "200px";
}
Here is a basic animation setup:
function animate(elem,style,unit,from,to,time) {
if( !elem) return;
var start = new Date().getTime(),
timer = setInterval(function() {
var step = Math.min(1,(new Date().getTime()-start)/time);
elem.style[style] = (from+step*(to-from))+unit;
if( step == 1) clearInterval(timer);
},25);
elem.style[style] = from+unit;
}
To use:
animate(
document.getElementById('challengeOneImageJavascript'),
"left","px",0,200,1000
);
This example will animate the given element to slide linearly from 0px to 200px over a time of 1 second (1000 ms).
You can easily do this through CSS3-Transition :
#challengeOneImageJavascript {
-webkit-transition: left .2s;
-moz-transition: left .2s;
-o-transition: left .2s;
transition: left .2s;
}
Though, it is not supported by IE9 and earlier browser versions.
I did a ton of research, and I finally learned how to do it really well.
I like to place my program in a window.onload function, that way it dosn't run the code until the page has finished loading.
To do the animation, make a function(I'll call it the draw function) and call it what ever you want except reserved words, then at the very end of the draw function call the requestAnimationFrame function and give it the name of the function to be called next frame.
Before the requestAnimationFrame function can be used it must be declared.
See the code below:
window.onload = function() {
function draw() { // declare animation function
context.fillStyle = "white";
context.fillRect(0, 0, 400, 400);
requestAnimationFrame(draw); // make another frame
}
var requestAnimationFrame = // declare the
window.requestAnimationFrame || // requestAnimationFrame
window.mozRequestAnimationFrame || // function
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
draw(); // call draw function
}
Note: Nothing after the line that calls the draw function will run, so you need to put everything you want to run before the line that calls the draw function.
You would have to use a javascript timeout function, and change the css value a little at a time. The easiest way would be to increment by a set amount each time until a threshold is reached, which would give you a linear animation, which would look clunky and amateurish compared to jQuery's default swing animation which follows a bezier curve approximately like an s-curve.
Untested code should do the linear animation
var lefty = 0;
var animate = function(){
lefty += 20;
var div = document.getElementById('challengeOneImageJavascript');
div.style.left = lefty +"px";
if(lefty < 200)
setTimeout(animate(),100);
}
animate()
n.b. there are lots of improvements to make to that block of code, but it should get you going...
With JavaScript, you will have to use setInterval function or this is how it can be done in jQuery:
$('#challengeOneImageJavascript').animate({left: '=-5'});
Adust value (5) as per your needs as well as direction via =- or =+
With Vanilla JavaScript:
var interval;
var animate = function(id, direction, value, end, speed){
var div = document.getElementById(id);
interval = setInterval(function() {
if (+(div.style) === end) {
clearInterval(interval);
return false;
}
div.style[direction] += value; // or -= as per your needs
}, speed);
}
And you can use it like:
animate('challengeOneImageJavascript', 'left', 5, 500, 200);
To stop animation any time, you would do:
clearInterval(interval);
Note: This just a very quick way to do it to give you an idea.
Simplest way via css.
https://jsfiddle.net/pablodarde/5hc6x3r4/
translate3d uses hardware acceleration running on GPU.
http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css
HTML
<div class="movingBox"></div>
CSS
.movingBox {
width: 100px;
height: 40px;
background: #999;
transform: translate3d(0,0,0);
transition: all 0.5s;
}
.moving {
transform: translate3d(200px,0,0);
background: #f00;
}
JavaScript
const box = document.getElementsByClassName('movingBox')[0];
setTimeout(() => {
box.className += ' moving';
}, 1000);
CustomAnimation is a small libary for animating html elements which is written in pure js.You can use this libary.
I need help with an animated PNG in Javascript.
I found how to animate a PNG background with Javascript here on Stack Overflow. But my problem is that I only need the animation onmouseover and onmouseout. And the animation should play only once, not in a loop, so when the user moves the mouse over a div the the animation in the background should play once and stop at the last frame, but when the user goes off the div, a reverse animation should play once and stop at the last (first) frame. The script I found here is:
The style:
#anim {
width: 240px; height: 60px;
background-image: url(animleft.png);
background-repeat: no-repeat;
}
The HTML:
<div id="anim"></div>
Javascript:
var scrollUp = (function () {
var timerId; // stored timer in case you want to use clearInterval later
return function (height, times, element) {
var i = 0; // a simple counter
timerId = setInterval(function () {
if (i > times) // if the last frame is reached, set counter to zero
i = 0;
element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up
i++;
}, 100); // every 100 milliseconds
};
})();
// start animation:
scrollUp(14, 42, document.getElementById('anim'))
I hope anyone can help me, Thank you
To stop the animation after the first set of frames you do want to change the if condition to not reset the counter to zero but instead to clear the interval and stop it from reoccuring.
To only let it play when you enter an element you can attach the animation function as an event listener and play the whole thing in reverse with another function that you plug into your onmouseout event.
Depending on your target browser and since your question is fairly vague I can recommend two alternatives to you:
Use jQuery animate (all browsers, include ref to jquery)
//Animate to x,y where x and y are final positions
$('#anim').mouseenter(function(e) {
$(this).animate({background-position: x + 'px ' + y + 'px'}, 4200);
})
//Do same for mouseleave
Use a css3 animation (using -webkit browser here)
<style>
#-webkit-keyframes resize {
100% {
height: 123px;
}
}
#anim:hover {
-webkit-animation-name: resize;
-webkit-animation-duration: 4s;
}
I would choose option 2 if you are doing mobile development or can choose only css3 capable browsers.
How can we increase or Decrease width of a DIV using setTimeout() ??
setTimeout(function() { document.getElementById('foo').style.width = '300px' },
2000);
a related blog and spec:
http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/
https://developer.mozilla.org/en/DOM/window.setTimeout
If you want to increase or decrease first by getting the current width, then you can look into clientWidth():
https://developer.mozilla.org/en/DOM/element.clientWidth
or use jQuery's width():
http://api.jquery.com/width/
jQuery is becoming very popular and even used by big corporations, so you can consider using it.
<div id="progressbar" style="background-color:green; margin-top: 10px; width:0px; height:10px;"></div>
<script>
// set var to rep width of progress bar div
var dwidth=0;
// declare global variable for instance of Interval Timer so other funcs can access it.
IntervalId =0;
// grow progress bar each second
IntervalId = setInterval(function() { dwidth +=5; document.getElementById('progressbar').style.width = dwidth+'px';}, 1000);
// stop progress bar after 10 seconds
/* in real world an event handler would do this when iframe handling upload script loads response from upload */
setTimeout(function() { clearInterval ( IntervalId ); document.getElementById('progressbar').style.display='none' , 10000);
</script>