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 | 3.80 / 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)

A franchise in web design, what is the web coming to?

Published | 12.35, 22nd of July 2008, by Chris van Aurich | Business

A recent trend of companies offering franchises in web design are becoming all too familiar. Our concern as a company that has been around since 1985, is that they will only bring the standards of  web design down and further dilute this specialist industry. As an agency striving to meet the latest web standards and designing real business tools for our clients, we use our passion, experience and training to deliver quality projects.

One thing is key, any business looking to invest in its next web project must make sure they are talking to industry professionals, with a real passion for what they do.

1 comment | Make a comment (Average rating | 3.50 / 5)

Troubles with Microsoft opacity filter

Published | 14.51, 18th of July 2008, by Jay Vincent | Technical

Ergh! I just spent about a few hours creating a javascript fade-in slideshow for jpg images, and what seemed to be random white pixels kept appearing in the photographs.

After changing the containing element's background colour, I noticed that these random pixels were transparent - a very interesting occurrence for a jpg image - a format 'seemingly' incapable of transparency.

I did a little searching online and found that this isn't a very well documented bug, but a few other developers had experienced the same problem.

Turns out that when the MS-only opacity filter is used (either through CSS or javascript), areas of true black colour (#000000) incorrectly become fully transparent, no matter what the opacity value for the image. This problem occurs in both IE6 and IE7 - IE8 is expected to deprecate this non-standard approach and comply to W3C standards of opacity by implementing the 'opacity' style property - which netscape engines use without problem.

The only solution I can find is to edit the image in photoshop to slightly brighten any true black pixels, however, due to jpg compression, it can sometimes take a few attempts to rid the image of any #000000 occurrences.

No comments | Make a comment (Average rating | 5.00 / 5)

A hello from the new guy!

Published | 09.00, 24th of June 2008, by Jay Vincent | Random

I'm finding it difficult to hide my enthusiasm and excitement about joining Artlines Media, for you see, I've joined at rather exciting times.

Established in 1985 (pre-web), Artlines Media was a small partnership focusing on print and branding design for SME local businesses. 2002 saw it become a limited company under the direction of Chris and venture into the virtual world of the internet and web design.

2002 sure was an interesting time for the internet - about the time a buzzword 'web 2.0' started being mentioned. A typical website was running on ugly invalid code and inconsistencies between web browser engines caused headaches for web designers and developers all over the world. HTML tables for entire page layouts and non-semantic code meant viewing a webpage on anything but an all-functions-enabled browser was out of the question, and accessibility was on no-ones mind.

The W3C (World Wide Web Consortium) set about creating web standards in code structure, accessibility, the DOM (Document Object Model) and general compliance. These standards ensure everybody can enjoy the wonders of the web, whether they have difficulty reading small text, require screen-readers or are viewing a webpage from a handheld device. To me, the term 'web 2.0' is a blanket term which describes design and development which adheres to modern web standards and best practises.

The possibilities web 2.0 technologies can bring to a website are limited only by imagination (and timescales!) Take our new website for example! Its the simple things we're most proud of - this custom-made blog, the AJAX newsletter sign up and our new, clean and crisp logo - just to name a few.

This new look reflects a new objective and focus in Artlines Media, to improve and expand, so that we can be at the forefront of not only the local web agency scene, but the London and national scene too. What exciting times...

No comments | Make a comment (Average rating | 4.57 / 5)

Showing blog entries 56-60 of 60.

Page | 8 | 9 | 10 | 11 | 12