How to do what Scott Schiller does

[screaminmartin]

I am very new to javascript. Basically I could use some guidance on
how to replicate what Scott Schiller does with the animation on his
website (http://www.schillmania.com). I want my website to do the
sliding photo and photo-shade effect. I'd appreciate any help anyone
can give me. Thanks!

 

[Randy Webb]

(e-mail address removed) said the following on 6/4/2006 9:03 PM:

I am very new to javascript. Basically I could use some guidance on
how to replicate what Scott Schiller does with the animation on his
website (http://www.schillmania.com). I want my website to do the
sliding photo and photo-shade effect. I'd appreciate any help anyone
can give me. Thanks!

Right click> View source.

 

[screaminmartin]

Maybe I should calrify: I'm new to JAVASCRIPT. I've been coding CSS
and HTML for years, however javascript has been mostly cut-and-paste
for me.

Thank you for your suggestion, however I have already been studying the
code for weeks. Any REAL help would be appreciated. Thank you.

-Tim

 

[petermichaux]

Maybe I should calrify: I'm new to JAVASCRIPT. I've been coding CSS
and HTML for years, however javascript has been mostly cut-and-paste
for me.

Thank you for your suggestion, however I have already been studying the
code for weeks. Any REAL help would be appreciated. Thank you.

I think Randy's comment was pointing out that there is no simple answer
and that is a lot to ask for here. If you have been programming valid
HTML and CSS for years you are in a good position to start learning
about JavaScript. Buy JavaScript: The Definitive Guide by David
Flanagan from O'Reilly and start learning the basics. Learning
JavaScript is a big task. It is a bit of strange language if you are
used to C++, Java or Ruby class-based inheritance.

Someone might suggest you use www.script.aculo.us to achieve your goal.
This library depends on Prototype.js which would be very confusing for
you to learn if you don't know Ruby. It is also considered a bad choice
here.

http://www.javascripttoolbox.com/bestpractices/new.php#prototype

I'd recommend that _after_ reading the Flanagan book you check out the
Yahoo! UI animation library

http://developer.yahoo.com/yui/animation/

I haven't used it but other parts of the Yahoo! UI library are good.

Also for after reading the book, the best link I have found about
JavaScript is

http://kevlindev.com/tutorials/javascript/inheritance/index.htm

Good luck,
Peter

 

[screaminmartin]

Thanks Peter,

All I want to do is replicate the motion of the initial photo (it
slides north on the page) and the animation of the shade (when the
toggle is clicked it slides down to reveal the entire photo. Certainly
someone can help me.

In the meantime I'll take a look at the Yahoo! UI and the tutorial.
Thanks a lot for the suggestions.

-Tim

 

[petermichaux]

All I want to do is replicate the motion of the initial photo (it
slides north on the page) and the animation of the shade (when the
toggle is clicked it slides down to reveal the entire photo. Certainly
someone can help me.

I doubt someone is going to write code for you. You'll have to try
first.

In the meantime I'll take a look at the Yahoo! UI and the tutorial.

The Yahoo! UI libray will not make what you want happen in one line of
code. You'll have to dig in and learn some JavaScript. After you have
tried to code it yourself and then if you have questions about the
Yahoo! UI library the best place to ask is that mailing list

http://developer.yahoo.com/yui/#support

Good luck

Peter