• 0

[JavaScript or Flash/XML/AS] Conveyor belt banner with reflection


Question

Hello guys,

i'm trying to create a banner just like the one that appears onwww.sergiobattista.it since i'm redoing the site using some properly coded CSS and HTML and not crappy iWeb and so far i created the basic layout at www.sergiobattista.it/index2.html.

By searching for info i've found that i can do that with a simple JavaScript that i found at this url http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm and that i could do the reflection using another JavaScript at this url http://cow.neondragon.net/stuff/reflection/. Problem is i don't know how to integrate the reflection script into the other one without messing everything up.

Another option could be Flash but i'd like to have external images loaded and a preloader. That means an XML driven banner with reflection, animation and all other things coded in ActionScript which is unknown to me. The only thing i found is how to do the reflection effect (http://www.everydayflash.com/blog/index.php/tutorials/reflection-effect/) and some info about loading external assets but nothing about the "conveyor belt" effect that i'm trying to do.

Hope somebody can help me at least with the JS version or if somebody is willing to help me with the Flash version i'll be even happier. That way i can learn something.

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

There are scripts available that can rotate images. So all you need to do for the shadow is to clone the image and append it after the original, rotate it and set the opacity. Once that is done set the conveyor belt script. That should do it.

Link to comment
Share on other sites

  • 0

sweetsam i don't think you have got the point to what i want to do. There is no rotation or shadow. If you check out the links that i posted you will see what i mean.

Link to comment
Share on other sites

  • 0

I actually do have a good idea of what you are after. I think you did not understand what I meant with my reply. The conveyor belt has a series of images with a reflection underneath moving towards the left continuously. Now it wouldn't make sense to have duplicate images in the markup since it is there only for the effect so if js is disabled it would look odd to have duplicate images.

So in order to generate the reflection for the images I recommended generating duplicating image elements and appending it to the dom. These can then be rotated and set to lower opacity to generate the reflection which I mistakenly referred to as shadow. Once the reflections are in place I think your script from dynamic drive will create what you are after.

You will need reasonably good js skills to get this to work. A frame work like jquery will be immensely helpful.

Link to comment
Share on other sites

  • 0

Ok well post what your plan is so that we can give you directions. Getting your hands dirty is the only way to learn. Somebody may give you the code but next time you have a situation you won't be any better. So try to start something and we will guide you.

Here is something to start with. There are two ways to do this. One way would be to create a strip longer that the visible area and move it across and recycle the images. The other way to scroll the strip across with a reset at the end.

Link to comment
Share on other sites

  • 0

well, basically i took the first script, the conveyor belt, and modified it to suit my needs. This part is pretty easy because the script let's you set up the width, height, speed, gap and images. Everything was working pefectly.

Then i took the reflection script and tried to implement it the way you are supposed to using the class statement inside the <img> tag but that obviously didn't work because the conveyor belt was already a script.

The next approach was to include the reflection script inside the conveyor belt script to use it as a function so all i did was copy the entire reflection script and paste it at the end of the conveyor belt script and use the class statement in the <img> tag and that kinda worked.

I don't understand much but i suppose that the way the conveyor script calculates the position of the next image is messed up by the reflection script.

Here attached is what i tried to do. Please be kind :p

script_test.zip

Link to comment
Share on other sites

  • 0

Making these two scripts work together is going to be a significant investment of time which I don't have. With the assistance of jquery the conveyor belt will be a lot shorter and easier to create. My suggestion would be create a conveyor belt script which has the reflection script integrated in to it.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.