scroll in scroll out

Scroll in & scroll out

With the “scroll in” and “scroll out” features, you could trigger actions according to differents browsings on the page.

Here are the different options proposed by Racontr that we will approach:

This kind of action allows you to launch animations in a long-form whenever an element appears or disappears on the screen.

As in the example opposite (scrolling) , you could trigger animations according scrolling place.

You gonna learn here how to play or show elements , actions and animations and make them stop or disappear.

you can use this method with all medias on Racontr : images, sounds, texts, videos.

First step: Scroll-in

Apply your actions on an element. For example here, we decided the title and the background introduction will move (X) when you will scroll until the area the hotlink is placed, using the action ?scroll-in?.

  1. Click on the element
  2. Add scroll action
  3. Choose scroll-in or scroll-out

In the preview, when you reach the scroll level where your element and its scroll-in hotlink is, your animations trigger !

You can build your entire page with this method by carefully positioning your blocks texts and give a real touch of interactivity to your projects.

Scroll-out

Unlike the scroll -in action, the scroll-out will trigger actions when the element on which they are applied is not visible anymore

  1. Click on the element
  2. Add scroll action
  3. Choose scroll-in or scroll-out

In the same way, apply scroll-out action on the hotlink concerned and choose to remove from the scene the title and the background.

Saving

Create an account

  1. OK let's do this.

Log in with your credentials

Forgot your details?