Is a website like this even possible to build with RapidWeaver: http://www.cnn.com/interactive/2017/11/world/greenland-global-warning/
Even something like Apple’s iMac Pro page, that animates as one scrolls.
I know about Parallax, Eclipse, Screens, and Impact stacks. But this seems like something quite different… Am I wrong? Does something like this essentially have to be hand-coded?
I downloaded Sections Pro a few days ago, but I haven’t played around with it yet! I’ll give it a try, thanks! (I think @webdeer might have some projects or templates that get me started, too…)
I see something close in the Maximal.design Grummo pack page 5 from @Marten_Claridge
http://maximal.design/gummo/5/
Check the section between 6 and 7 - the scrolling section numbers 1 to 3.
I bet you can animate it as close in your Greenland example…
This site looks like a fixed video background with normal pages scrolling over it. The trick would be to make the pages have a transparent or no background so it looks like you are just scrolling content across the video.
BWD SectionsPro will do this or get you closer that anything else available for RW. A far bigger challenge will be choosing the right videos to use, how to host them, etc. That CNN site is a great example of how a video really tells a strong visual story but don’t underestimate how much money was put into those videos and how much trial and error was used to decide on the final ones used.
The Apple page would need a somewhat similar approach but in addition would need some trigger to fix SectionsPro BG and then release the fixed BG at a second marker. I can’t think how to do that exactly but use SectionsPro for the Bfs and figure out how to alter the BG Fixing between 2 markers. This is where Tav will probably jump in and point out that there is a setting just for this so it may be possible.
Again though, it is a lot of effort for gaining a visual effect that most users will ignore. I don’t think that Apple page would be less impressive without the effect. The images make that page as good as it is and not the effects IMO.
As the chaps above have said, you can do some of this with SectionsPro and other stacks out there for that matter however…
That site uses a lot of scroll controlled effects which involve scroll-jacking of the normal page behaviour. This is generally avoided by most stacks as it can create problems with other stacks and is heavy on resources in operation.
All that said, you could create something just as effective and IMO with a better UX using normal fixed position elements and background videos.
Yes, that scrolling section 1-3 is similar, but that scrolling only occurs if the mouse is over that section. If the mouse is over the elf-hand side of the page, it won’t scroll through the numbers, it will just keep scrolling down the page normally. It’s still very close to what I am looking for.
Thanks everyone; @webdeer and @tav I appreciate you steering me in the right direction, too. I will definitely take a much closer look at Sections Pro. I may not be able to recreate something like that CNN page exactly, but I think I can get close. I really appreciate your help! (I may take a few minutes to Google “scroll-jacking” out of curiosity…)
This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.