Parallax Scrolling Effect is basically nothing more than playing a timeline forwards and backwards Therefore, what you need first is a clear idea of how your timeline can be divided into different "slides”
Each slide will be where the timeline will pause during the playback. This means you will have to include some "Pause Timeline Actions” where appropriate in your timeline, like the illustration below.
Visit SurveyLegend
Get started
Make sure your navigation buttons are placed on the highest layers.Otherwise they might be covered by other objects.
When a button is covered by another object in Hype, it will not be clickable anymore.Even if the covering object is invisible (has 0% opacity).This might happen especially in responsive layouts.To avoid this, make sure you have all your navigation buttons at the highest layers.
Enable scrolling with mouseby adding a JavaScript code to your Hype project.Set your timeline to run the following JavaScript on scene load:
Navigation buttons make Hype to “jump” to a certain time.So no frames between the two points of time will be played
Therefore, you will need to provide other "Next" and "Back" buttons as well.This make it easy for the visitor to smoothly navigate to the next paue in the timeline.
Add navigation buttons, to make it easy for visitors tonavigate, and also to understand how much is left to see
These gray buttons on the side are all set to go to different times in the timelines.It means the first button has an action that takes the visitor to the first pause in the timeline,the second button takes you to the second, and so forth…For instance, the second navigation button in this document is set to jump to 00:04.00
This tutorial is designed by SurveyLegendand we hope you enjoyed it!We’re building the best online survey solution, and for that we use only the best programs, like Hype ;)Feel free to Download a Hype copy of this tutorial and use it for your future personal or commercial projects. You can also read more about the JavaScript code inside the Hype file.For a live example of how the parallax scrolling effect can be incorporated, please visit www.SurveyLegend.com
Environmental page
and for touchscreen devices, you can use an “On Drag” action for your document.
For the same reason, you can provide two invisible buttons with the same function;which are located on top of the navigation buttons and change their position according to your timeline.
404 page
Now start bringing in your contents and animate them nicely in a way that
each of scene shows only the elements you choose.
Make sure what you want your visitors to focus on in each slide
is totally visible when the timeline reaches each pause action;
and additional images are either out of the view, or are invisible (have 0% opacity).
function wheel2(event) { // other browsers
event.preventDefault();
if (event.detail < 0 && (hypeDocument.currentTimeInTimelineNamed('Main Timeline') > 2)) {
hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionReverse);
} else if (event.detail <= 0) {
hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward) }
}
function wheel(event) { // Firefox
event.preventDefault();
if (event.wheelDeltaY > 0 && (hypeDocument.currentTimeInTimelineNamed('Main Timeline') > 2)) {
hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionReverse);
} else if (event.wheelDeltaY <= 0) {
hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward) }
}
window.onmousewheel = document.onmousewheel = wheel;
window.addEventListener("DOMMouseScroll", wheel2, true);
document.addEventListener("DOMMouseScroll", wheel2, true);
How to make a nice parallax scrolling effect in Hype
To see a live example of the parallax effect visit SurveyLegend.com
↓ our other cool Hype pages ↓
In Hype, you don’t scroll the viewport on the scene--What you do instead, is bring the elements into the viewport!
In a traditional webdesign, you have a long vertical HTML page with contents, and you move the browser's viewport on them by scrolling up and down. But in Hype you have a fixed viewport, and you have to bring the contents in and then take them out, to create the scrolling feeling.
Don’t forget to add creative transitions effects
as you move from one slide to next, to enrich your parallax effect.
Conventionally, when you scroll in a web page, contents come into viewfrom the bottom of the screen and go out from top. But in Hype you can have unlimited
ways of bringing your contents in the view and taking them out.
You can even apply 3D effects for a cooler and better parallax effect.
Be creative and impress everyone!
Download this file