Wipe effect on page elements on scroll (scrollytelling)

  • 25 June 2021
  • 7 replies
  • 33 views

Hello!

Check this out: https://www.imperial.ac.uk/stories/mission-to-the-sun/

Scroll down until you hit the circular graphic on the left with numbered copy on the right. As you scroll there is a wipe effect that shifts the graphic and text that are visible on screen. Is an effect like this possible in Unbounce?

Thanks,


7 replies

I love this idea!!!, and though I cannot say with 100% certainty that it can be done, I can think of several ways of doing it. Unfortunately I don’t have the time to test them at the moment, but I’ll fiddle with it this week and see what comes of it. By default, this feature doesn’t exist, but I can say that playing around with the parallax feature for the different sections, is definitely a good place to start.

In terms of the link you posted…whew! That’s a LOT of scripting. I looked at the source code and it’s massive. There’s a lot going on to make those animated sequences happen. What I’m thinking of is a somewhat “cheaper,” version of that, but I think it’d be a method that most unBounce users can handle without all the complex scripting.

Super appreciate any time you’re able to dedicate to messing around and seeing what you’re able to come up with!

Ok, so this is SUPER crude, but it gives you a good idea for how this would work.

So the first section has that first slide (there’s 5) as the background. the next section has parallax applied to it and uses slide 2, so on through slide 5. You’ll want to make sure that your slides are all the same width and height exactly or they won’t line up one on top of the other. This example is 3300w x 1080h, so it’s made to look best on 1920x1080 resolutions. But of course you can scale it down. The only thing you’ll never be able to account for is the height of the person viewing the graphics, but I feel that having it be at 1080 will be fairly safe for any monitor since the amount of information being viewed is well within a 768h area. If none of that makes sense, I apologize lol!

The only real big problem with this is that obviously it’s not going to scroll and hold on the image, it just keeps scrolling to the next slide. In my honest opinion, given the limitations, this works as good as it’s probably going to 😃

So take a look and let me know what you think. I can go into more detail if you need to but the above steps are very much how I did it.

http://unbouncepages.com/test-parallaxeffect-test/

Nice! Is there there a way to make the mobile experience parallax as well?

So that’s where the fun ends unfortunately.

UnBounce doesn’t support parallax for mobile. Maybe that’s something they’ll do in the future, but I’ve only been using it for a couple months now and I haven’t had the time to deep-dive the page code and see if there’s a way of making it work for mobile. If I ever do, I’ll definitely post the results here!

For now, it’s just desktop 😦

Trust me, there’s a TON of stuff I’m trying to make work, sticky navigation bars, more complex parallax actions, triggered events, etc… Just takes time because it’s not exactly a free-for-all with the code, there’s a lot that has to be pre-loaded which weighs down the pages more, and things have to just be built differently because there’s no access to the unBounce container code outside of inspecting it.

Got it, thanks so much for taking the time to do this!

Best,

No problem at all, happy to help and love trying out new ideas!

I’ll let you know if I ever get it to be more advanced or figure out a work-around to it.

Reply