ThemeKit Float Animation

Float Animation

The float animation widgets have twelve controls for each animated item so it is important to understand what they do and how they effect the web page content.
It should be obvious that a float animated should NOT be in the viewport on page load !
Offset
This slider controls how far the item is offset at page load. The control is a slider with a minimum value of zero and a maximum value of 99. The higher the value - the more the item will be offset.
Initiate
This control sets the point at which the animation occures. The choices are enter, onload and exit.
Normally all items would be set to "onload" except for the first item on the page which would be set to "exit" and the last item would be set to "enter" .
The last item would usually be the footer with any fixed positioned items inserted below it. The ThemeKit Float Footer is set to "enter" by default.

Controls

Rotate & Translate

All the rotate and translate controls have a checkbox to reverse the direction from positive to negative.
Rotate X
Rotating an item on the X-axis will reduce its apparent height
Rotate Y
Rotating an item on the Y-axis will reduce its apparent width
Rotate Z
Rotating an item on the Z-axis will rotated the item clockwise or anticlockwise.
Translate X
Translating an item on the X-axis will move it to the left and reversing it will move it to the left.
Translate YTranslating an item on the Y-axis will move it down the page and reversing it will move it upwards.
Units
The value for rotation is expressed in degrees and the value for translate ir expressed in pixels.
Z-index (Stacking Order)
EverWeb widgets inserted using the responsive template are relatively positioned which means that an item will have a higher z-index than the one above it.
The float widgets have a control for increasing the z-index for the case where the item needs to be above the the item below it in the stacking order.
Following the link below to find out about and understand stacking order.

Z-index

Background

SVG Background

The background for this page was created with the ThemeKit Float BG SVG widget. The SVG file is tiny - 315bytes - and is repeated to cover the browser/device window background.
Follow the link below to find patterns, copy the SVG code, paste it to a blank page in TextEdit.app in plain text mode, save it with the .svg file extension and drag it into the External Files section of the EverWeb Assets List.

SVG Gallery

PNG Images

Preparing PNG Images

PNG images have a relatively large file size compared with an equivalent JPG image file. It is essential the the image size is reduced to the actual size that it will appear in the browser before importing into EverWeb.
File Size
Always assemble image in a Finder folder before importing into EverWeb. Images can them be reduced in size by opening them in Preview.app and using the Image Size function in the Tools dropdown menu.
Images with the same dimensions can be processed in bulk by selcting the all to open at once and click on the Preview sidebar and do a Commnd A.
Optimise
Even when reducued to the minimum size required PNG images still have an excessive file size. Use an image optimiser app to shrink them down by about 75%.
Although images can be optimised online it is much faster and more convenient to use the freeware ImageOptim for Mac. Just drag all the images in a folder onto the app window and the files will magically shrink.
Follow the link below to get the app.

ImageOptim

Anchor Nav

Anchor Navigation

The scroll navigation on this page uses the ThemeKit Float Anchor Nav widget. This creates any number of links which can be configured to anchors further down the page.
Navigation
The navigation links can be aligned left, center or right and there is a scroll to the top function inserted at the end.
The navigation can be inserted anywhere in the stack of widgets and will scroll with the page content and then stick at the top to always remain in view.
Anchors
In this case the ThemeKit Float In Heading widget is used to create section headings and anchors.
The ThemeKit Float Spacer and the ThemeKit Float Fade In widgets can also be configured as anchors.
The spacer can be used to create space between items to prevent an overcrowded layout.
The fade in widget is use to fade in the page content on page load to give a smooth, professional appearance and allow the items in the viewport - such as the hero item at the top of the page - time to download.