Donate SIGN UP

how is this website working

Avatar Image
mollymoo | 19:41 Mon 17th Nov 2008 | Technology
7 Answers
Hi

I am trying to achieve a similar effect as this website. When you make the browser smaller the bg image moes slightly to the left so that the glowing pathway bit moves to the left as well but as soon as it hits the left sie it stops moving left.

now it is not an image but is set as a bg tag. i cannot for the life of me get the same effect. anyone help me.

plus i would sooo love to be able to program it so that i have a div tag (or whatever it is that does it to move the same amount to the left.. as you see the nav strip and text do so that everything alsways moves together with the BG image.

please help.. here is the site i am talking about. please also bear in mind i am a big novice in css coding and html in your explainations if you can help

ok here is the site http://www.monumedios.com.ar

thanking in advance
Gravatar

Answers

1 to 7 of 7rss feed

Best Answer

No best answer has yet been selected by mollymoo. Once a best answer has been selected, it will be shown here.

For more on marking an answer as the "Best Answer", please visit our FAQ.
we all ask the same question daily!

it's quite pretty

the sparklies are a flash animation
combines with a java overlay
on a background
http://www.monumedios.com.ar/images/fondo.jpg

and these (plus others)
http://www.monumedios.com.ar/swf/1.swf
http://www.monumedios.com.ar/swf/2.swf
http://www.monumedios.com.ar/swf/3.swf
http://www.monumedios.com.ar/swf/4.swf
http://www.monumedios.com.ar/images/1.png
http://www.monumedios.com.ar/images/2.png
http://www.monumedios.com.ar/images/3.png
http://www.monumedios.com.ar/images/4.png
my label
my label
my label


easiest way to see how
is file | save as | and save as webpage complete
you'll get the .html, .js and .css code
which will open in a text editor

the backgrounds are in the .css files

the measurements are a mix of absolute and relative
so
Remember, you are not allowed to use any part of that sites design due to copyright!
Question Author
thanks..

yes i got the image for the bg but if you resize the browser you will see that it moves slightly to the left then stops... this is the bit i am struggling with..

also i can get the html and the css files but cannot downlaod the js files...
Question Author
jam97 I am very aware of copyright and am not stealing their site. I am asking how they did it cos i have a design idea of my own that would use a silialr setup of how it moves when you resize that is all.. hence why i am asking for the help rather then just grabbin all the code and puttingin my own words....
Question Author
ok so i got all the files and i still cannot see how the image bg moves to the right then stops... to see what i mean let me try to explain it again...

if you set the browser so you can move it smaller, as you make it smaller you will see that teh bg image moves with it watch the glare/bubble bits move to the left then it stops once the pink glowing stringy bits are on the far left it moves no more.

the pink bits are part of the bg... does this make sense..

thanks
if you look at the js code it does say it's free for use ....
the images ... less easy to decide but you have the right attitude

the answer to your question is fixed and relative size/measurement

the screen is set somewhere round 720 pixels with a 50% overlap and margins

so if the screen is over 720 pixels
it keeps it's proportion

below that ... it does the best it can ... but won't go below the absolute left margin so will retain a 50% overlap until the gap is 10px and then the margin freezes so only the right of the screen can move
Question Author
ACtheTROLL thanks for your help glad someone actually replies to questions as they are intended rtaher then to just make stupid comments.

i have been havin a look at the glider.js file and worked out what that relates to very cool effect.

not quite sure what you mean by all the overlaps and stuff.. most of the coding is very new to me. but i think i will have a go in the morning at fiddling around trying to understand your 2nd post and see what results i get.

seeing as you seem to knwo so much i have designed another site i seem to be having issues with in safari.

www.sarahhood.co.uk/movies/about.htm

now if you view it in IE you see the lighter green bg but in safari and firefox it appears as white. i have tried to sort the code but with no luck so if you can see any errors please help.

once again thanks for all your help so far really appreciate it

thanks
mollymoo

1 to 7 of 7rss feed

Do you know the answer?

how is this website working

Answer Question >>