Scroll Banner
The ThemeKit Scroll Banner is shown here with a gradient background and no animation
Image Banner
ThemeKit Scroll
Page Scrolling
Scroll Animation
Most website animations occur on hover or when the animated item appears in the viewport.
ThemeKit Scroll
These animations start when the item appears in the viewport and continue on page scroll until the reveal is completed.
Animation
This type of animation is more user friendly since the visitor controls its speed unlike animations that occur in view which causes motion sickness for a fairly large percentage of website visitors.
Scroll Menu
The ThemeKit Scroll Menu widget creates a horizontal navigation bar with links to smooth scroll to anchors further down the page. It has the option to add a smooth scroll to the top function. The scroll down and the scroll to the top times are asjusted separately and are set in milliseconds.
Sticky
The menu can be placed anywhere in the page and will scroll and stick to stay in view when it reaches the top.
Anchors
Anchors can be created using the ThemeKit Scroll anchor widget or the ThemeKit Scorll heading widget which has the option to be configured as an anchor.
When using the heading as an anchor it should be configured as an h3 heading which is the correct type for a section heading.
ThemeKit Scroll Article
The two column grid has an image and a text block. The layout can be switched and the column gap adjusted.
Breakpoint
Below the breakpoint the items are stacked and the text can be above or below the image.
Container Styles
The items have their own controls for adding a border and/or a bottom box shadow
Scroll Image
The ThemeKit Scroll Image widgets have all the essentials for inserting image in responsive pages.
Image Size
Full width images need to be inserted in three size ans a content width image needs two sizes of image file.
Images should be resized to the maximum size it will be displayed at and optiomised before importing into EverWeb.
Image File Type
Avoid using PNG images. If they mjust be used optimising them can reduce their file size by up to 50%.
Never use PNG images for icons on a responsive web page.
Image Links
If a responsive image is configured as a hyperlink it must show an icon to indicate that it is a link for mobile touch device users.
Scroll [2] Images
Scroll Two Images
The ThemeKit Scroll Image [2] widget has two images with alt text and captions. Each image can be configured as an internal link if required and this is indicated by an icon at the top right.
The caption and icon can appear on hover on computers if required.
The containers can have a border and/or a box shadow and the images have a lazy loading option which should be turned on if the item is not in the viewport on page load.
Animation
Each image has its own controls for setting up the animation. In this case they are translated and rotated in opposite directions with a perpective setting of 150vw.
Perspective
Along with the bottom box shadow perspective helps to add a sense of deoth to the page layout.
EverWeb Widgets use viewport units for the perspeve setting since this is the most suitable for responsive page designs. In this case the perspective is set to 150vw (viewport width). The lower the setting the more the effect until zero is reached where the effect is removed.
Menu