How to get falling leaves javascript into background?

JavaScript
1

Hi,

I have a website (http://www.97centhosting.com) and would like to put a falling leaves effect javascript (http://www.dynamicdrive.com/dynamicindex3/leaves.htm) into the background BUT within the DIV Container and behind the 3 boxes of services im selling. ($0.97, $14.97, and $4.97 boxes)

How do I do this?

Thanks!

2

I think you should be able to do it by giving a position and higher z-index to the boxes you want to keep above the leaves.
You might have to give a lower z-index to the leaves.
ps you might want to tone done the leaves speed and color intesitiy. they most likely would be a bit distracting. and out of place once the season change.

3

How do I get the leaves to stay within the container on 97centhosting.com?

Thanks!

4

OK I updated http://www.97centhosting.com with the falling leaves script how do I get the leaves to just show in the container?

Thanks!

5

It doesn’t look as though that script has that functionality built in.

You could make it happen with some css but this is pretty fragile.

#outer{
    position:relative;
    overflow:hidden;
}

The above assumes that you don’t have any content that needs to show outside of #container and that you don’t add position :relative to any other child elements either. To create the effect you want without that css will need the help of one of the JS experts around here :smile:

Do you think it wise to distract the users from your products by making leaves fall over them? I’m sure most users will switch to somewhere else if they see that effect (unless it was just for Christmas week).

Also stop giving me popups to betting sites!!

6

That worked! now how do I set the z-index in the CSS for the boxes so the leaves fall behind them?

Thanks!

7

Which boxes?

8

The box that says $0.97/month, the box that says $14.97/Year, and the box that says $4.97/month. I want the leaves to fall behind the them.

Thanks!

9

Set the z-index for the pricing boxes.

.pricing,.pricing2,.pricing3{z-index:99;background:transparent}

Remove background:transparent if you don’t want to see the leaves at the back of those elements.

10

I agree.
I don’t want to be harsh, but I would never buy hosting off a company that showed popups of any kind.

11

Works Thank You!

12

One more thing how do I get the leaves to fall behind text?

Thanks!

13

You know…sometimes you have to kill your darlings. I see you are really focused on the leaves…but…unto themselves leaves have nothing to do with hosting. And like myself and Paul have pointed out. They might clash w/the viewer’s present timezone and/or event. will you have to change leaf colors per seasons every year?
What about your logo instead if you must?
& yeah…that pop up.

14

Made it all work, thanks! sorry about the pop-ups im just testing the site out on a free server.

Thank you!

1 Like
15

My thought was if falling leaves in a text content area might be distracting and make reading more difficult.

Cool visuals are cool, but what’s the main focus, seeing falling leaves or reading the message?

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.