Simplest Custom Parallax Module for Content That "Flies In" During Scroll?


#1

We are trying to achieve a parallax "fly in" effect for different text boxes over a statically placed screenshot as the user scrolls down the page. Example of a similar effect on a different website: http://www.izoncam.com/. (Scroll down to the iPhone)

We know HubSpot COS can achieve this with custom coding. We have an excellent front-end developer in-house who's very familiar with jQuery and other web technologies needed for this. We already know about tutorials at w3schools, etc.

After searching the forum here, we read over this past post, but we are specifically looking for other HubSpot COS customers who have implemented parallax scrolling like this and to see what the simplest solution is before sinking lots of dev time into it.

Thanks!


#2

Hi @bluematador,

Sounds like you already have a good handle on what's possible here; I look forward to hearing what's worked well before from other community members! To try and start things off: @pmanca are there any examples you've come across that come to mind?


#3

I found this excellent tutorial, but it's still not quite what we're looking for. This one deals with parallax backgrounds. We're looking for parallax foregrounds. https://designers.hubspot.com/docs/snippets/design/implement-a-parallax-effect


#4

Hi @bluematador,

I have also heard great things about Skrollr.js; that library might be worth checking out. The following stack overflow thread has some quick tips for parallax fly-ins, as well as links to Skrollr.js:


#5

Thanks, we'll take a look.