[Pro] Cool background change?

Scroll all the way to the bottom of the page and check out the background change effect. How is this accomplished?


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

Essentially, their bottom image is a png with black robots and grey
zombies. Robots stand out over a grey background which obscures grey
zombies, with the opposite effect when the background is black.

http://tinyurl.com/k4xk6y9

You can see how they did this in the code. Right-click (control-click) near
the bottom of the browser to bring up the Inspect Element browser tool.
There is a lot of code related to t-shirts and coffee-mugs, but basically
the main site structure boils down to this:

  body
  div id="wrapper"
  div id="fancywrapper"
  div id="innerwrapper" (this is where FWP's PageDiv would be)
        div id="banner"
        div id="mainwrapper"
        div id="footer"

They use the first two divs and the body element just to layer the
background image. This can be repeated using Freeway Pro - it’s just code
after all. Also, I think it could be done with multiple CSS background
settings on just the body element, without the div layers.


Ernie Simpson

On Fri, Mar 21, 2014 at 12:47 AM, RavenManiac email@hiddenwrote:

Scroll all the way to the bottom of the page and check out the background
change effect. How is this accomplished?

http://www.thinkgeek.com


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


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

Here is a FW created example that doesn’t use any Markup - http://www.deltadesign.co/FW6Test/revealing-zombies.html

It is all down to selecting which item to apply the 3 core background images to

These are

http://www.deltadesign.co/FW6Test/Resources/robozombies7.png - applied to the fancywrapper div

http://www.deltadesign.co/FW6Test/Resources/bodytiletop.jpg - applied to Window Background

and http://www.deltadesign.co/FW6Test/Resources/bodytilebottom-ta.jpg - applied to Page Background

The real secret is in the careful colour selections of the zombie image and matching it with the background to the page.

D


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

Nicely done, Dave –

Imagine how this effect could be employed in one of those parallax scrolly
designs.


Ernie Simpson

On Fri, Mar 21, 2014 at 3:48 PM, DeltaDave email@hidden wrote:

Here is a FW created example that doesn’t use any Markup -
http://www.deltadesign.co/FW6Test/revealing-zombies.html

It is all down to selecting which item to apply the 3 core background
images to

These are

http://www.deltadesign.co/FW6Test/Resources/robozombies7.png - applied to
the fancywrapper div

http://www.deltadesign.co/FW6Test/Resources/bodytiletop.jpg - applied to
Window Background

and http://www.deltadesign.co/FW6Test/Resources/bodytilebottom-ta.jpg -
applied to Page Background

The real secret is in the careful colour selections of the zombie image
and matching it with the background to the page.

D


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


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

Imagine how this effect could be employed in one of those parallax scrolly designs.

I can only imagine Ernie as those are beyond my Pay Grade!

But seriously - how are we supposed to innovate with every new site. It seems as if the client wants more and more for less and less.

D


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

But seriously - how are we supposed to innovate with every new site. It
seems as if the client wants more and more for less and less.

That is why I am going to night school and learning the exciting trade of
Telephone Sanitizer!

:slight_smile:


Ernie Simpson


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

the exciting trade of Telephone Sanitizer!

Wow Ernie! - that must be up there with Encyclopaedia Salesman.

D


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

Wow Ernie! - that must be up there with Encyclopaedia Salesman.

It was a toss up between Maker, Thinker, and Telephone Sanitizer. The
others didn’t have cool uniforms or name badges.


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

The others didn’t have cool uniforms or name badges.

But got to stay at home!

Sorry I missed the reference before.

:wink:


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