Foundation for Site Model

(G) #1

Hey all - Looking to create a site with foundation that looks this …
So the landing page is a picture and the nav bar is transparent. Seems easy - I have impact … and I host of JW stacks … but I always end up hitting a wall and it not looking and responding like the site I tagged above.

Any help would be appreciated.

(Jochen Abitz) #2

here is my quick and dirty example RapidWeaver Project File for this:

Used Stacks:

  • Foundation
  • ScrollUp - BigWhiteDuck
  • TopBar Surgeon - BigWhiteDuck
  • Grummage 2Col - BigWhiteDuck

Hope this helps.

(Andrew Tavernor) #3

Sections would be ideal for that as well - it will do the 100% height header at the top and all the banded sections of the page. It also makes it really easy to do the equal height pictures with the text below like on this page

(G) #4

Thanks - great advice

(G) #5

I did this so far … I would like the Site title to change to black when the visitor scrolls up.

Jochen sent me a project file to work with. Here is link to what I have …

Any thoughts on how I can accomplish that …

(G) #6

Thank you for the demo file …

Here is a link to what I have using your instances of TBS and Scroll up.
I would like the site title to change to a color that will show up on the white background when the visitor scrolls up … any thoughts?

(Jochen Abitz) #7

You have to override the title color in TBS.

(G) #8

Perfect! That was easy. I presume I can adjust the point that I want the background of the bar to appear. Hoping to have it fade in as the user gets to the bottom of the impact banner “hero” header

(G) #9

No luck.
2 items

  1. Is there a way for TBS not to override the site title font color as soon as I begin to scroll up. It changes as soon as I click in the banner.

  2. Is there a way to have top bar begin to loos its transparency when the user gets to the bottom of the hero header?



(Andrew Tavernor) #10

Use ScrollUp to recolour the TopBar background once you have scrolled a pre-defined amount. Have a look at the ScrollUp demo project it demonstrates several examples of this.

If you only want the Topbar title to change once ScrollUp has reached it’s transition point that you set, you can do this with a little CSS. ScrollUp adds a class called .scrolled to the container and so this will make the top-bar title yellow, for example, when scrolled.

.scrolled .top-bar .title-area .name h1{ color:yellow!important; }

(G) #11

thanks again for the suggestions and the css. The samples on the site are wonderful, I was unaware o the stack. I used the override text suggested by j and that worked, I just wanted have the effect happen when the user scrolled to the bottom of the banner.

1.) How do I set the transition point? I have been trying scroll up transitions setting, but I’m afraid all my trials just result in errors.

2.) Is the only way to get the top bar title to change after I set the transition point with the CSS you supplied … and thanks for that - wonderful, I will try that

(G) #12

Tav … I got it thanks to you. I am sure I’ll be back. Thanks for your time.

(Andrew Tavernor) #13

Good stuff. There is actually a new version of ScrollUp coming very soon that will allow you to set the transition point using markers rather than percentages - this makes it a lot easier to precisely define the point at which the transition occurs. It also allows full control of the menu colors with simple stack settings and no CSS required. The stack also integrates all the features of SlideUp and lot of new things as well, all in one package. This demo is nowhere near finished yet but it will give you an idea of the things it can do if you look at the examples

(G) #14

really great. How do I get scrollup pro and the associated project files? Really great stuff - clean

(Andrew Tavernor) #15

The key words in my post were “coming very soon” :slightly_smiling:

As soon as it is released I will announce it on the BWD website and g+ group

(G) #16

wonderful … I have it bookmarked and will be looking forward to the release. Thank you for your time :slight_smile:

(Andrew Tavernor) #18

@DMillington I saw your other post about fixed income - don’t even think about a donation, I am just glad to help.

(G) #19

So I am back … I am a school teacher and the summer has arrived and I can pick up on past projects. Tav, I see all the wonderful stacks on the BWD site. I was hoping to build off of the Magellan 2 demo site you have … with the great pic and text. I downloaded the project file. Is there any way I could get the actual project file from what is published now and I can build off of that? Thanks … my main issue is overtime I go back to building in RW, it has been a while and I have to recall how I accomplished certain effects …

(G) #20

Hey Tav, was wondering of the project file for this is available. It would be perfect for the site I am trying to build …
Thanks - I can’t wait to give this one a go … so clean

(Andrew Tavernor) #21

@genoh Sorry I missed your previous post (put an @ symbol in front of peoples names and they will get a direct notification)

I presume that you already have the download of the project file from the Header Pro product page. If so I presume that what you are missing is the effect in the page header. This is done with the ScrollMate stack. I’ve re-made that page for you with the ScrollMate setup and also with some license free images from UnSplash so that you can see the setup. The original project used Sections but as this has now been replaced by Sections Pro and to keep things simple, I’ve just used GrummagePlus stacks for the background images. Here is a link to the project file