Parallax Website


(Erik) #1

I’m looking to create a parallax website for a small film festival. Are there any tutorials on how to create a parallax website with Hype with no coding involved?

What I’m want the user to experience is to scroll down and see an image. As the user scrolls, several frames of that image moves and then blurs with a description of the film. The user continues to scroll and the next film appears in the same way.

It’s also important to have the website fit to the device screen be it phone, tablet, or desktop.

My limited skills have thus far only came up with this antiquated-looking design: http://www.aprilinparis.org/

Any advice is much appreciated.


#2

With Viewport Actions, you could run any type of action when scrolling down: https://tumult.com/hype/documentation/3.0/#viewport-actions

So you would create a timeline with image blurring & movement & any text you want. This should be paused when first loading the document – and then also create a ‘continue timeline’ action when you hit a certain point in the scroll position. I Hype this is called a ‘Viewport Action’. Scrolling can be set to either jump to a time in a timeline, or continue it. There are also a lot of cool tricks on the forums if you want a 1:1 relationship between the scroll position and an animation.

Responsive Layouts will be a good place to start for creating different layouts for different device widths: https://tumult.com/hype/documentation/3.0/#responsive-layouts

While you can do all these things without code, it also might be possible that Hype isn’t the perfect tool for creating a film festival website. You may also want to check out Webflow or Wordpress.com as well.


(Erik) #3

Thanks Daniel!


(kerguelen) #4

Hi @ebowen
Years ago I made an animation with parallax.
https://www.laurentgontier.com/Krakow/Krakow.html
It’s basically an animation controlled with a click/drag function that commands the timeline speed and direction. It might not be exactly what you are looking for but here’s the file if it can be of some help.


(Erik) #5

Very cool! Thanks!