Fixed background/scrolling forground?

Foundry
1

I’ve seen a few posts explaining how this works, using Jumbotron. Being a relative neophyte to web design and RW, after playing with it for an hour, I still don’t understand how to make it work.

I added a picture to backdrop (Style - Image), clicked on “Lock Background”, added a Title and subtitle, which show up, as well as a few columns of text in a margins container, just to see if things scroll across the background.

They do not. I must be doing something wrong, but I don’t know what it is. I tried adding a banner above and more columns below the Jumbotron, thinking it just needed more space to scroll, but that didn’t change anything.

What now?

Ideally, even better (alhtough I’d be more than happy to live with scrolling foreground over a fixed background, and set up several “blocks” as I see many sites today do), would be parallax scrolling like what 1LD has, it’s really slick. Anyway, crawl before I walk. I know.

2

One thing to note is that your page must be long enough to scroll. If the height of your page is less than the heigh of your device, then the page can’t scroll.

If you want to use Jumbotron to scroll over a fixed page background, then you have to load a transparent image in Jumbotron because there is no opacity option for a Jumbotron colour BG.

3

Hi Webdeer,

thanks for the reply. I still can’t make it work. I added a bunch of other stuff to make sure there’s enough content to be able to scroll. I put an image i found online in the “Backdrop” section at the bottom of the configuration and checked “lock background”.

Then I enabled a title and subtitle, and added a few paragraphs of text. What am I missing?

Do I need a second image or color background under the “Background” part at the top of the configuration panel?

I’m confoosed!

Thanks for the help!

4

Hi there @Surf –

So I can clarify what you’re wanting to do before I dive into the details – are you looking to lock the background image for the entire page, or one section of the page?

Also, if you provide me with a ZIP file containing your project file and the image files I will gladly have a look when I am back in the office.

5

Hi and thanks, I hadn’t expected this much support! Very nice! I’m sure it’s something simple, I’ve been playing around with Foundry to see how the different parts work, it’s fun. Now that I have an idea how I want things to look though, it isn’t as easy to make it like I want, lol!

First what I’m trying to do is create blocks of content, just like on most modern sites, including yours at: https://foundry.elixirgraphics.com/ (alternating “blocks” with different info/topics).

Then I want to make it a bit fancier, something like this where each block has an image in the background and the content floats past it: https://woolights.com/

Bonus points if I could make things slide-in and fade-in like this: http://lemon-3d.be/

And extra super bonus points if I could figure out how to do something like the shadow of the jet passing the rooftops in this stack/theme: http://onelittledesigner.com/rapidweaver-stack/parallax-flight-2/

I can zip up my project files, right now it’s just a mock-up with no real content, and just images I found on Google, but where should I send them? I don’t see a link to attach files here in the forum, is there one?

Thanks,
Surf

6

To post it in the forum you’ll need to use something like Drop Box and create a link to the file.

Very doable with Foundry.

Also doable using Foundry’s Reveal stack.

This isn’t a feature of Foundry. If you want to do that you can use the stack you linked to. Foundry works well with other 3rd-party stacks.

7

Hi Adam,

I sent you a link to download the project and images.

Here’s another one I found that is pretty close to what I want to do: http://lazooz.org

Thanks

8

Yeah, all of that looks pretty doable in Foundry. As for troubleshooting your bug – I didn’t receive any files. You can post the download link here in this thread or send it via a private message on the forum, whichever works best for you.

9

Sent you a PM.

Let me know if you didn’t receive it.

10

Got it. Will try to look at it tomorrow. With it being a holiday here I may or may not get into the office, but will definitely try. :+1:

11

Thanks. Now I’m bogged down in details trying to figure out how to make one of those cool banners with an image background and text/icons on top, but am stuck at figuring out how to place the elements where I want them. They all end up in the wrong places… I have a lot to learn.

12

You’re viewing your page in mobile mode, as seen here:

59%20PM
59%20PM1992×1251 219 KB

Why does that matter? The stack unlocks the background for mobile devices as that feature is not natively supported by these devices because it can become a drain on processing power, believe it or not.

When you preview your page, click the down arrow on the preview button and choose Full-Width and you’ll be good to go. Was just a problem with how you were previewing your page.

1 Like
13

Lol, wow, I had no idea! That’s great, I was actually doing it correctly. Awesome, I’m going to go back and play around with it some more. Too bad about mobile, but I supposed if that’s how it is, that’s how it is.

Thanks for taking the time to look at the project and let me know what I was doing wrong (or right, in this case, ha ha ha)

14

Getting closer to getting this new site online, and it’s looking better and better (for an amateur).

I’ve managed to get the sliding sections with fixed background images working, it looks great. Have also figured out how to use Reveal. I managed to get it to “reveal” all 3 columns at once, as I wasn’t able to get it to reveal one at a time, in order, across the page. No big deal.

The parallax idea I’ve abandoned, it isn’t necessary for this site.

I’m waiting to hear back about MovingBox and SliderStack to see which one will do what I want, but the built in Foundry slider isn’t at all bad either and looks clean and professional.

Google Analytics and GoSquared code are added to the Head of the site, and seem to be working.

All that’s left (it isn’t a requirement, but I think would help the site look a touch more professional) is to figure out how to make some sort of Navigation bar that will work with a one-page site and jump from section to section. I tried Foundry’s NavBar, I like how it integrates with the banner, but it doesn’t understand one-page sites with separate scrolling sections.

Any other stacks that will do that, look good, and work across mobile and desktop (e.g. responsive)?

Thanks!

15

You can do this with mega menu (if you’ve got potion pack) and anchors.

1 Like
16

I don’t have Potion Pack, or anchors. Looking at the Mega Menu site, it looks like it creates huge menus that span the width of the site/navbar, which is not what I need.

Let me look and see if I can see a site like what I’m thinking of, basically one long scrolling page, a nav bar as part of the banner, which “sticks” to the top of the page when scrolled, and with 3-4 menu items that aren’t really menus, but simply scroll to that section of the page, and possibly an up arrow to return to the top.

17

You can create whatever menu size you like.

What you’re describing here is what Mega Menu does in conjunction with the Anchor stack. Have a look at the Mega Menu tutorials on this page.

You can do this with the Scroll To Top stack included with Foundry.

1 Like
18

here’s a site of mine that does all of that: https://versusapp.net

The blog and contact buttons go to a different page but the rest just navigate within the page. This uses mega menu and anchors.

2 Likes
19

OK, now I understand. Nice site, Mallow76!

One last question before I pull the trigger. Will it do transparent to opaque, so that it looks like an overlay at the top of the site, and turns opaque as one scrolls down and it binds to the top of the view?

Thanks,
Surph

20

@Surf – Mega Menu does not have that feature. You can set the background color, but it remains the same whether it is stuck to the top of the browser or not.