EverWeb Widgets

Animate In

PhotoKit Parallax Animated In Image — PhotoKit Animated In Image

Animate In Image

The image is centered in the browser with a maximum width setting and can animate in every time it enters the viewport. It is inserted in an HTML5 <figure> element and has alt text and an optional caption.
Images
The images are inserted using an HTML5 <picture> element to allow changing the image file depending on device screen width. The images used in the example were cropped to 1200px x 720px, 800px x 480px and 375 × 667px.
Note how the small image has been cropped to a 9:16 portrait aspect ratio for better performance on mobile phones in portrait mode.
Animation
The animation is turned on by checking a box. There are controls for selecting the animation type and setting the time and delay in seconds.
The animations use a custom style sheet with a choice of 15 animation types.

Animate In Two Images

This is similar to the single image version except there are individual controls for animating each image, a control for setting the grid gap and a control for setting the break point at which the right image moves below the left.
Animation
Note that the animations used in these widgets is NOT the same as used by the EverWeb default animations. They are much more efficient and have been made specifically fto be suitable for responsive pages.

Animated Text & Image

Optional Span

The image and the text have separate animations and their positions can be switched so that the image is on the right,
At screen widths bleow the break point the image can be above or below the text.

Widgets

Animated Text & Image

Text On Top

In this example, the text is located above the image on screen widths below the break point.

Widgets

Animate In Text & Image

The text area can be located to the left or right of the image. Below the breakpoint the image or the text can be on top.
The text section has a heading, an optional span for price/date, a paragraph and an optional link. The link can be aligned left, center or right and open internal or external pages and has a new window option.