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)?
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
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
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.
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.
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?
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.
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.
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?
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.
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.