Pure CSS Parallax

Off Topic
1

Currently trying to do this in Freeway

http://blog.keithclark.co.uk/pure-css-parallax-websites/

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

2

Did you make it?

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

3

It seems to be impossible in FW …

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

4

It’s a matter of fact I did get it to work, let’s see if I can find the files. Otherwise I’ll try to replicate it again :slight_smile:

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

5

I spend all day on this without success …
I would really appriciate, if you could share that file with me. , Richard. Thanks in advance

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

6

I’ve been moving to another workstation and -as you probably will know- when you move, you throw stuff away. I’ll try to make some time for this this week.

Richard

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

7

Thank you, Richard. Look forward to it … Have a great start into the new week :slight_smile:
Joerg

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

8

still wondering how you achived this, richard. this weekend still trying … :wink: it makes my tired.

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

9

It’ll probably be on my list to do this Tuesday, if all goes as planned. IF. :slight_smile:

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

10

Hello (again) … http://fwdemo.rvanheukelum.com/pure-css-parallax/

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

11

Actions used :

I’ve ‘just copied and pasted’ the CSS in an additional stylesheet via the source code snooper action, although you could easily add them to the standard stylesheet yourself. I (regularly) choose to add an additional stylesheet. Don’t forget to link the stylesheet in the Page HTML Markup, before .

The anonymous action is applied to all DIV’s within the groups. All styling of these div’s comes via the applied classes (select a div, CMD+X for Extended, and apply a class).

The pagediv extended action is used to apply the class ‘parallax’ to the PageDiv, the parallax container.

Because Freeway lacks the 2 other ‘Overflow’ options initial and inherit, the correct one has to bp applied via (again) the Extended option. All 7 groups now have ‘overflow: initial’ applied.

You can download the file(s) here: http://fwdemo.rvanheukelum.com/pure-css-parallax/pure-css-parallax.zip

The master.css file appeared to shoot down every attempt made. Only the ‘groups’ on this sheet are used. After some trials-and-errors it seemed that ‘overflow’ was the source of the problem. Only the value ‘inherit’ would work, but is not made available in the Freeway inspector palette, so I used the Extended option again to add the proper Overflow.

In fact, it is quite simple all together. Finding out what exactly was killing it within Freeway was the hard(er) part.

Good Luck, Richard

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

12

Richard, I’m deeply impressed! Thank you so much!!! On the first glance it really looks like rocket sience to me … Have no idea, how you did it and how to edit it. But … Wow!
I’ll have a deeper look at it on the weekend …
Again … Thanks a lot.
You made my day :wink:
Joerg

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

13

Hi Ricard,

Was playing with the Pure CSS parallax impressive work off you!

What is the easiest way to add full background pictures

Maybe a simple thought but I tried to add photo true background/image but that doesn’t work.

Erik

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

14

GENTLEMEN, PLEASE UPDATE YOUR RECORDS

On request by Erik hereby the adjusted Freeway project, now also background image included, and I made a correction on the original file where in 2 cases wrongly the style parallax–layer–base was applied in stead of parallax__layer–base. It causes the divs (the first and last ones) to only show half.

Now also included: Upload Stuff action

ADDED :

  • The background image on Group4 has been applied to the deepest layer, via the (custom) parallax-pure.css stylesheet
  • Used action ‘Upload stuff’, because the bg image was applied via the additional stylesheet, Freeway ignores the bg image itself, so you have to upload it to the Resources folder yourself.

UPDATED :

  • Correction on applied style ‘parallax__layer–base’ (was ‘parallax–layer–base’)

Good luck!

Richard

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

15

Super Richard! Thanks

Erik

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