Slide in Text with Lectora

by Jonathan Shoaf

There is not much worse than static text in online learning. Learners go online to get immersed and engaged. They pick up a book to read text. So I try to be careful about how I use text when I am developing a course. I like text to be timely, simple, and sparse. One way to be smart about using text is to have it slide in when you want it and slide out when you are done. This post shows how to do that.

Group Text and Container

The first step is to create your text and place on a container.

• Add a Text Block to your page
• Add a Shape or Image as the text container

In this example, I added a transparent PNG image.  The text should be placed on top of the image so that it is visible. Once you have the text positioned as desired on the image, group them together by doing the following.

• Select the Image and Text Block items (use control-click)
• Right-click and select Group
• Name the group "Text Slider"
• Uncheck Initially Visible (we do not want to see the text until we say so!)

The text slider is now ready to go.

Animate the Text Slider

Let's set it up so the text will animate from the top of the screen. First, put the Text Slider in the position you want it when it is to be read by the learner. Since we want the text to appear to be sliding in, not moving in, the text should be placed so the Text Slider top is at the top of the page (i.e. y = 0).

Next, we'll use transitions for the sliding behavior. Since we want the text and its container image to work in tandem, we'll edit the transition for the Text Slider group (not each individual item).

• Select the Text Slider group
• Go to the Properties and click the Transitions tab
• Check Transition In and set the Type to Fly Top
• Optionally, set the transition speed towards the slower end (my preference)

This will animate the Text Slider into position when it is shown. Now, we need to show it. To do this, I created a new text block and added an on mouse click action to it.

• Set the action to occur on Mouse Click
• Set the Action to Show
• Set the Target to Text Slider

Now save and run the project. When you click on the link, the text box should appear to slide out of the top of the page.

So, how do you make the Text Slider slide back off the page? It is pretty similar to what you just did. Go back to the Transitions tab in the properities for the Text Slider. Check the Transition Out box with the same settings. Create another text box with an action set to Hide this time. Now it will slide in and out. Click here to see the final working example.