Javascript image fade slideshow

Published | 15.49, 29th of August 2008, by Jay Vincent | Technical

Check out http://www.rumseys.co.uk for a look at my javascript fade-in/out image slideshow!

I finally cracked my issues in looping the slideshow and its all working very smoothly. Using setTimeout, each image appears for 3 seconds, before a new image is dynamically created, absolutely positioned on top of it but with an opacity value of 0. This value is then incremented every 0.01 second using setInterval until it reaches 100. The opacity attribute is then removed to avoid the microsoft opacity filter bug (see earlier blog), and the image below the new one is dynamically deleted.

This loop works through an array of images, and loops the array. The same effect as flash, but much more manageable, and dare I say... web 2.0?!

Comments welcome.

4 comments | Make a comment (Average rating | 4.50 / 5)

Javascript animation and motion equations

Published | 16.08, 8th of August 2008, by Jay Vincent | Technical

Recently, I've been looking at the way I can improve and optimise my javascript animations.

A good example would be the 'Apply for job' scroll down on http://www.dnarecruit.com/jobdetails/3180 - clicking the apply for job scrolls a hidden form into view - the scroll is a continuous motion with no acceleration, no deceleration, not even a time parameter. I simply increment the height of the element until it reaches its DOM scrollHeight property.

I've always wanted to script a smooth accelerate/decelerate toggle function, so in a little bit of free time I got to work. I started by reading the research of one Scott Schiller, who's javascript animation tutorial raises some very interesting points on CPU-usage and the most efficient methods for animation looping.

I decided to use the setInterval method with a 25 millisecond time parameter, essentially creating a framerate of 40 frames per second for the animation.

For the motion, I used the trigonometric function Math.sin(x) between -90 and 90 degrees, which gives a smooth trough to peak curve - I extracted the y value, and manipulated it to be within a set range, instead of -1 and 1. (I set the range from 0 to 200 in my example). I then applied this value to an objects style.top attribute.

Perhaps best to view the example, the red box is following the sine curve, the blue box is following the cosine curve, and out of curiousity - I've set the green box to follow the tan curve.

I see quite a lot of potential in this - smooth colour fades, toggle scripts, bounce effects - I even decided to have a play with gravity effects using Math.exp(-x) (example) - bit this needs a bit more attention I feel.

Sure wish I could remember more of my A level maths...

1 comment | Make a comment (Average rating | none)

Showing blog entries 1-2 of 2.

Page | 1 | 2 | 3 | 4 | 5