EVERWEB VIDEO TRAINING LIBRARY
EverWeb's Awesome Scrolling Effects Explained!
Video Transcript:
► This Video's Contents...
0:00 - Prerequisites
0:16 - Introducing Scrolling Effects
0:43 - Adding a Scrolling Effect
1:03 - Scrolling Effects Settings
To use the features shown in this video you will need to use EverWeb 4.4 or higher, for macOS or Windows.
EverWeb’s Scrolling Effects give you an easy way to keep headline, or useful information, always in view on the pages of your website. It’s also great for when you want to keep reminder information visible at the bottom of the screen, or when you want to pin social media icons to the side of your page!
Where you can use Scrolling Effects
Scrolling Effects can be applied to objects in both fixed width and responsive pages.
Adding a Scrolling Effect
To apply a Scrolling Effect, first select the object that you want to use a Scrolling Effect with.
Next, go to the Shape Options tab and click on the checkbox to the left of the Scrolling Effects section title. This will activate the Scrolling Effect settings.
Scrolling Effects Settings
Once you have activated the Scrolling Effects settings, you can apply a combination of settings to achieve the effect that you want. For the moment, though we are going to take you through each field in turn.
The first setting is Activate at scroll location. The default is set to zero so the scroll effect will activate immediately as your visitor scrolls. For example, if you set a value of 20, the scrolling effect will be triggered when the page has scrolled down 20 pixels.
Additional Settings….
When setting the value for activate at scroll location, you have two additional ways in which to enter a value…
The first way is to use a ‘+’ number: for example, if you entered +50, the scrolling effect will trigger at the current object position plus 50 pixels.
You can also use a percentage, for example, if you entered 10%, the scroll effect will trigger when the object is scrolled to 10% of the top of the browser
The second Scrolling Effect setting is Behavior. This defines the type of scrolling effect that is being applied to the selected object. There are six different scrolling effects available:
Pin To Top: The object will be pinned in the center of the top of the page
Pin Stack: The first stacked object will be pinned to the center of the top of the page. Any following stacked pinned objects on the page will stack one under the other as the page scrolls.
Pin Push: Objects are pinned to center of the top of the page. As the page scrolls, the first pinned object will be replaced by the next pinned object, the second by the third and so on.
Pin To Bottom: The pinned object will appear in the center of the bottom of the screen.
Pin To Left: The pinned object will appear at the left hand edge of the browser window.
Pin To Right: The pinned object will appear at the right hand edge of the browser window.
The third Scrolling Effect field is Spacing.
This field sets the amount of space a pinned object is, from the edge of the browser. For example, if I set a value of 10, for an object that is pinned to the left, it will appear 10 pixels in, from the left hand edge of the browser.
The next Scrolling Effect field is ‘Reverse Action on scroll up.’
If you check this box, as you scroll back up the page, the pinned object will move back to its original location.
The final field in the Scrolling Effects section, is the Scrolling Effects section. You have 7 different effects to choose from and you can combine effects as desired. For example, you could use change color to change the background color of an object together with Fade to make the object look semi-transparent.
When you combine the Scrolling Effects together, you can get some great effects, such as those shown in this video.