scrolling image

Hi all,

I’m looking for a way to let a png (the original file is an ai) scroll smoother than the one I’ve made. Any suggestions?

Thank you,
Bart

http://users.telenet.be/freeway/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I wrote the original code a while back, and it works really smoothly on my example page. I think part of the issue may simply be the size of the image. Have you tried with a smaller GIF?

Walter

On Oct 5, 2012, at 12:19 PM, Bart wrote:

Hi all,

I’m looking for a way to let a png (the original file is an ai) scroll smoother than the one I’ve made. Any suggestions?

Thank you,
Bart

http://users.telenet.be/freeway/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I actually went back and looked at it today, and I can see similar hop-and-skip going on in the transition there, too. There seems to be an issue with using window.setTimeout in a modern (scary-fast) JavaScript engine that the older browsers weren’t exposing. The best way to do this would be with CSS3 transforms, and a fallback to the JavaScript for the browsers that don’t support them. I just rewrote the effect using Prototype and Scriptaculous, which is the highest-performance way to do this that I know of, and I’m still seeing the issue there a bit, too.

http://scripty.walterdavisstudio.com/endless/prototype.html

Walter

On Oct 5, 2012, at 12:39 PM, Walter Lee Davis wrote:

I wrote the original code a while back, and it works really smoothly on my example page. I think part of the issue may simply be the size of the image. Have you tried with a smaller GIF?

Walter

On Oct 5, 2012, at 12:19 PM, Bart wrote:

Hi all,

I’m looking for a way to let a png (the original file is an ai) scroll smoother than the one I’ve made. Any suggestions?

Thank you,
Bart

http://users.telenet.be/freeway/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You can also try moving the image by 6 pixels on every frame change (the distance between the dots) rather than 1. This should relieve the burden on the script a bit although you will have to rewrite the catch to check for the top limit (5278). The other benefit is that the dots won’t change position as the text animates.

If you can afford to just target modern browsers then I’d be inclined to use CSS transitions and set the div position when the page loads. The burden is then on the browser, rather than the script, to animate the element over the given time frame.

Have you considered doing this all in JavaScript and do away with the large image altogether?
Regards,
Tim.

On 5 Oct 2012, at 17:19, Bart wrote:

I’m looking for a way to let a png (the original file is an ai) scroll smoother than the one I’ve made. Any suggestions?


Experienced Freeway designer for hire - http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you for the answers.
If I place a gif the image is no longer sharp and the motion doesn’t seems to be smoother. I’m not smart enough to do this in JavaScript. I’m thinking to make an animation in Photoshop but I’m afraid this will be to large. If anyone have a better suggestion I’ll be happy to hear.

Bart


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options