ThemeKit Reveal
Hero Wipe image animation with fade in heading, text and optional link.
Info
ThemeKit Reveal
ThemeKit Reveal Hero Wipe
The ThemeKit Reveal Hero Wipe has a hero image, an overlay image and an overlay <article>. The overlay image animates in from the top or bottom and the text block fades in after a suitable delay.
Images
Each image is inserted in three sizes for the various devices. The images in the demo were sized to 1200 x 720px, 720 x 480px and a 9:16 aspect ratio image at 375 x 667px for phones in portrait mode before importing into EverWeb.
Article
The text block has a heading, text and an optional link. It can be aligned left, center or right on browser/device screens withs above the break point.
ThemeKit Reveal Carousel
A scrolling carousel is a much better option for displaying images than a slideshow on responsive pages. The swiping action is familiar to mobile device users and - unlike sliders - requires no Javascript that will drain batteries.
Layout
The container layout display is set to flex with overflow-x set to auto. Each item is an HTML5 <figure> element with an image with alt text, an optional caption and optional image links.
The captions can be below the image or overlay at the bottom and can show on hover when viewed on computers.
The link icon which lets mobile visitors know that the image is a link is at the top right and is displayed on hover along with ht ecaption.
The scroll icon is optional and is positioned at the bottom right. It has its own controls for size and color.
Images
The images in the demo were sized to 600 x 400px and optimised with ImageOptim before importing into EverWeb.
The maximum width to display the image can be set for each device type - computer, tablet landscape, tablet portrait and phone in landscape mode.
Lazy Load
The images in the demo have a file size of only about 35KB and should load fast if there are only about half a dozen of them. Any more than that and the lazy loading function should be turned on.
ThemeKit Reveal More
ThemeKit Reveal More Text
The average website visitor has an attention span of about 8 seconds. If they are faced with too much text they will zone out. Show the main text - preferably with an image - and hiding the less important text creates a more user friendly layout.
Items
The widget has the option to show a text wrapped image, a full width image or no image. The image width is set as a percentage value and should be sized to the maximum width it will be displayed at before importing into EverWeb.
The image width can be varied between 33% and 66%.
The image can also be made full if required by checking a box. It has controls to add a border and/or a bottom shadow and has controls for adjusting the right and bottom margins.
Text
There are three text sections - one above the image, one for the wrap text and one for the hidden text.
The main heading is an h1 since it is the first heading inside an HTML5 container.
The other two headings are inserted as h2 since they are both section headings.
Paragraph Headings
These can be created using span tags like this <span>Span Text</span> and there are controls in the widget settings panel for font size and color.
Spans have an inline display so that they can be inserted in text without creating a return.
Paragraph spacing is a simple as hitting the return key just before and after the span tag.
More/Less
The tab can be aligned left, center or right and has different text for the open and closed states.
The animation uses a small and minified accordion plugin for the open/close action.
The hidden panel can be seen when viewed on the EverWeb design canvas while entering the content and then hidden prior to publishing the page.
Reveal
The hidden section has a heading, text and an optional link which can open internal or external pages and is styled tto match the show/hide action tab.
Text Wrap
Using an image wrapped with text is a good idea when creating responsive pages since the image file only needs to be about half the width of a comparable full width version.
The image file can be reduced to about half the widget's maximum width setting. The image only becomes full width on screen widths below the break point which can be set for tablets in portrait mode without too much loss in quality.
ThemeKit Reveal Type Text
This is a really simple animation using pure CSS that emulates the typing effect that usually requires Javascript.
The heading can be h1 through h4 and has controls for font family, fallback font, font size, phone size, font weight, style and color, text align, letter spacing and text shadow radius and color.
Setuo
Enter the heading text and, after setting the font size, reduce the maximum width to fit the text and its left/right padding.
Animation
The animation is created using a single line keyframe and has controls for time and delay in seconds.
The animation can occur once or every time the item enters the viewport.
Animations are normally turned off for mobile phones but this can be turned on by checking a box.