Stack for stationary background image?


(Chad) #1

I’m working with this theme–

http://preview.weaverthemes.com/shift/

On the demo site for that theme, there’s a nice effect where the text and content slide upward as you scroll, while the background image stays in place – (a common effect nowadays with single-page site designs).

I’m guessing the effect as shown in the demo site is accomplished with a third-party stack, because the RW6 files that came with my purchase do not include that effect–the image scrolls upward along with other content.

Does anyone have an idea what stack is being used to create that effect (or maybe it’s just some CSS)?


(Fray) #2

That’s called a “Parallax effect”. @joeworkman has a Parallax stack that accomplishes this.


(Andrew Tavernor) #3

Sorry to be pedantic but that is simply a fixed background image. Parallax is where the background moves at a different rate to the foreground.
There are many stacks that will do a fixed background effect (including my free Sections stack), but yes it is just some very CSS as described here on CSS tricks with some codepen examples


(Fray) #4

(I might be wrong, but I think @Moonspinner meant the parallax effect further down the page, not the static banner image.)


(Andrew Tavernor) #5

Sorry if I got it wrong but I just don’t see any parallax - the only thing I see is a fixed background of some boats on water which is most definitely a fixed background image - here is the code from the page
background-attachment: fixed; background-image: url("images/bg.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover


(Fray) #6

Oh yeah, I guess you’re right @tav. A parallax image would also scroll up, but at a different rate. That IS just a fixed image. The effect is similar, but you’re absolutely right.


(Andrew Tavernor) #7

Hey, no problem. I just wanted to be sure that @Moonspinner got the right stack for the job. Just for the record, Parallax is a great stack, an excellent execution within RW. Easy to use and efficient.


(Chad) #8

Thanks guys. Fray–from your post, it looks like the CSS in the posted page is different than what’s provided in the download file for the purchased theme . . . . because in the downloaded file, the background image isn’t fixed–it scrolls with everything else.

So–if I add to the page the CSS that you posted, should I get the same results as what’s shown on the demo page for the theme?


(Vitor Costa) #9

@Moonspinner

You should get that effect by default, no additional CSS needed.
What’s happening is maybe you are previewing your site on a MacBook 13 and it is triggering the mobile version of the Banner that scrolls with everything else on a larger screen you get a different effect.

Best


(Chad) #10

I’m viewing on a 15" Macbook Pro.


(Chad) #11

Is it possibly a feature that will only be visible in a published/exported site, but doesn’t show up in the Rapidweaver Preview mode?


(Paul Russam) #12

This is Parallax, it was a silly test I did when @joeworkman released his Parallax stack
This is Fixed Image (scroll down the page) using BigWhite Duck’s Sections stack.
What you should note is that on mobile (phones and tablets) the Parallax effect will not work and you will get a static image.


(Vitor Costa) #13

@Moonspinner

No, not at all, you shoud see this in preview mode also.
Is your RapidWeaver window full screen, can you do that? Put RapidWeaver in fullscreen and test it?


(Fray) #14

Yeah; I’m on a 27" iMac and even Safari wouldn’t display the fixed banner until my browser window was widened to fill nearly half the screen.


(Chad) #15

On my 15" Macbook Pro, I put RW in fullscreen and tested the demo file. I even re-downloaded the demo file, just to make sure I hadn’t corrupted or changed it. Same results—

When I scroll (in Preview mode, full screen), the mountain image scrolls with the other content; it does not remain fixed (as it does on your demo page).

Also----The other background image that appears further down the page (image of boats)—that image DOES stay fixed when scrolling, and creates the depth effect as things move over the top of it. That second image is appearing in my RW file just as it does on your demo site.

With the top image though (mountains), what I’m seeing in the demo RW file is not what I’m seeing on the demo page on the WeaverThemes website.


(Chad) #16

Must be something glitchy related to that banner image, because there’s another issue–

When I replace the banner image with my own image (using instructions from the site tutorial), then export the site . . . . . The exported site doesn’t contain my image in the banner (or any image).

Weaver—please contact me so we can troubleshoot . . . . I like the theme but so far it’s been sloggy progress.


(Vitor Costa) #17

Ok, I will send you a private Message now.


(kris ) #18

This post was flagged by the community and is temporarily hidden.


(Scott Brickert) #19

I like how the image onthis page behaves, except I want the image to remain fixed. On my page, there will nothing to scroll down to see.

What tricks do I need to make it happen in RW7?

So far, the themes I’ve tried crop the image, rather than resizing it.

thanks,
Scott