Page Effects

The easiest way to slide in elements while scrolling on the page.

Whether on your own CMS pages or apps that we have adapted such as articles, forum, gallery, filebase, blog or the shop.

You can create your own effects or effects that have been prepared by us with this plug-in, elements will be displayed as soon as they are in the browser window.

In order to increase the transition of the effect, the following code must be inserted and adapted in the (S) CSS.

.lwObserve,
.yourClass* {    transition: all 3s ease-in-out;
}

[tt].yourClass *[/ tt] The class that has been selected / specified must be used here.

[tt]transition: all 3s ease-in-out[/ tt] The values [tt]3s[/ tt] and [tt]ease-in-out[/ tt] can be adjusted here.

[infohint]Custom Classes[/ infohint]

You can specify your own classes to create your own effects that have to be declared in the (S) CSS.

To do this, select [tt]custom[/ tt] under Effect and enter the [tt]class name[/ tt] without [tt].[/ Tt] under Custom CSS (see picture).

Example

.yourClass {    
    opacity: 0;    
    visibility: hidden;    
    transform: translateX(-50%) translateY(-20px) rotate(5deg);
}

If animations are used via [tt]@keyframes[/ tt], these must also be specified retrospectively in the [tt].lwObserve[/ tt] class.

Example with animation

If we assume that we have entered the class [tt]anim[/ tt] in [tt]Custom CSS[/ tt], then the code could look like this.

// ANIMATION MAIN CLASS //
@keyframes animIn {    
    0% {        
        transform: scaleX(0) scaleY(0);    
    }    
    50% {        
        transform: scaleX(.5) scaleY(.1);    
    }    
    100% {        
        transform: scaleX(1) scaleY(1);    
    }
}
// ANIMATION CUSTOM CLASS //
@keyframes animOut {    
    0% {        
        transform: scaleX(1) scaleY(1);    
    }    
    50% {        
        transform: scaleX(.5) scaleY(.1);    
    }    
    100% {        
        transform: scaleX(0) scaleY(0);    
    }
}

// TIMING VALUE //
$animTime: 500ms;

// MAIN CLASS //
.lwObserve {    
    transition: none;    
    animation: animIn $animTime forwards;
}

// CUSTOM CLASS //
.anim {    
    animation: animOut $animTime forwards;
}

[infohint]How does the structure of the main class look like[/ infohint]

The class [tt].lwObserve[/ tt] is structured as follows.

If your own classes or classes provided by us are to be edited, it is good to know what happens when the effect class is removed.

.lwObserve {    
    opacity: 1;    
    visibility: visible;    
    transform: none;    
    transition: all 0.3s ease-in-out;
}

[infohint]CMS page settings[/ infohint]

Page Effects is activated on all pages that have the page type HTML, Template or System.

Under [tt]ACP> Content> Pages> Your Page[/ tt] another tab Page Effect is added. Effect instances can be added there, by clicking on the [tt]+[/ tt] next to the Page Effect Instance (see infographic).

Individual instances can be deleted using the [tt]X[/ tt] icon next to the instance (see infographic).

Instances can be opened and closed by clicking on the toggle icon (arrow up / down) (see infographic).

[infohint]Recommendations and information[/ infohint]

Viewport / element trigger

We recommend selecting this setting no higher than 10% in order to prevent visitors from seeing empty content before the element is displayed. Unless you plan to do just that on your own CMS pages.

Recommended setting: between 0% - 5%

Unique observer

With this setting you can determine how often the desired elements are shown / hidden when scrolling up and down.

If the setting is set to [tt]Yes[/ tt], the desired element will always be shown / hidden.

If the setting is set to [tt]No[/ tt], the desired element is only displayed once when scrolling.

Recommended setting: No.

[infohint]Information[/ infohint]

Effects like fading in elements should be chosen carefully, not every visitor to a website likes it when elements are repeatedly faded in / out when scrolling on every page.

The effect as well as the code is only integrated if the browser supports it.

The CSS class must be specified in the [tt]Container class[/ tt] field.

Example [tt]body [data-page-id = "104"] .section> .box[/ tt]