How to Preload a Lectora Page with a Smooth Transition Effect?

How to Preload a Lectora Page with a Smooth Transition Effect?

With Lectora, it is not possible to give a fade in and out transition effect to a page or a title. As a result, when we press the next button to go another slide in a course developed using Lectora tool, the transition is not so smooth. I was searching online, for a solution to this, and I finally got it.

Here, I would like share that solution.

1. Create a sample course using one of these three options “New Blank Title”, “Design Wizard” and “My templates”.

Create an eLearning course in Lectora

2. Insert an HTML extension object to the root of your course.

3. Select your course title, go to “Insert” tab, and click on “HTML Extension” object as shown in the image below.

Insert an “External HTML” object into the course

4. Now double click on “External HTML Object” to get its properties. Under Properties, click on “Edit” option as shown in the image below to insert a code into it.

Edit an “External HTML object”

5. Copy the code below and paste it into the “Edit” window and click on “OK” button as shown in the image below.

<script src=”” type=”text/javascript”></script>
function exitToTarget(newPage){
$(“#pageDIV”).fadeOut(200, function() {
window.location.href = newPage;
function newgoto( newPage, bFeedback ) {
if( newPage.indexOf( “ObjLayerAction” ) >= 0 || newPage.indexOf( “.action” ) >= 0 || newPage.indexOf( “history.back()” ) >= 0) trivGoToPage = newPage
else exitToTarget(newPage)
if( !hasProcessedExitActions ) {
hasProcessedExitActions = true
setTimeout( ‘checkLeavePage()’, 100)
trivExitPage = newgoto;

 Insert a code into an “Edit” window

6. The “HTML extension” object should be top of file scripting, so that it loads first.

7. Then publish your course to “HTML” and watch the course page fade in and fade out, when you go forward or back within your course.

Final output window after publishing your course to “HTML”

Here are the links to see the fade in and out effect before and after applying the code.

Before (without script): Preload Without Effect

After (with script): Preload With Effect

That’s it. These simple steps help you to get rid of that white flash effect when the pages are preloading. I hope you find my blog useful and interesting; please do share your comments, if any.

View E-book on How to Select the Right Rapid Authoring Tool