Slide Up Grid Items
Scroll down to see the animated slide up grid in two different styles.
EverWeb Widgets
Hero Header
The hero image has three overlay items - a transparent layer that animates over the image, a text block with outline animation and a heading with optional logo.
Image
The images are available in three different sizes - one for each device type. The images used in this page were cropped to 1600px, 1200px and 800px respectively before importing into EverWeb.
Each image has a control for setting the fixed height. When the page is viewed on a mobile phone in portrait mode the image fills the height of the screen.
Heading
The heading can overlay at the top or bottom and the text can be aligned left, center or right. There is an option for a logo which is positioned to the left.
The font can be web safe or non websafe or Google hosted with a web safe fallback. There are controls for the font size, weight, style, color, letter spacing, padding and text align.
The background has controls for adjusting the color and opacity.
Overlay
The optional image overlay has controls for adjusting the background color and its opacity. A fade in animation can be turned on by checking a box and entering the animation time and delay in seconds.
Text Area
The text block has a heading and a paragragh. It is vertically centered and can be positioned left, center or right when viewd on computers. The horixontal position is determined by column span so for "left" select "1/3", center "2/5" and for right select "4/6" from the drop down.
On mobile devices the text block is centered horizontally.
The animation which draws a line around the text is optional and has controls for settings the width, color and animation time in milliseconds.
Animated Slide Up Grid Items
Grid Layout
The grid shows four items per row on wider screens reducing to two and then one on narrower devices.
Grid Items
Each item has an icon link with optional scale animation, a heading and text.
Animation
Each item has a slightly longer delay than the one on its left to stagger the slide in.
Iteration
Animations can be set to fire once or every time they enter the viewport and defeated on mobile phones if required.
Icons
The example above is set up with round icons with a fixed width. These can be links if required and can have a box shadow animation on hover.
Each grid item can also have an optional heading and optional text.
The items animate upwards as they are scrolled into view. Each item can have a different animation delay. In the above example the delays are set to increase by 0.1 sec from left to right.
The animation can fire just once when the grid is scrolled into view or every time it is scrolled out and back in to the viewport.
The animation can be prevented from firing when the page is viewed on a mobile phone.
When two or more widgets are inserted on the same page, only one of them needs to be be set to animate.
Image Album
A lightbox image album for displaying a large number of images in a lightbox slider without having to use a thumbnail grid.
Image Grid
An image grid with one large image and four smaller which rearrange themselves at different browser and device widths.
Gallery Grid
The grid can be set up with the thumbnail images to other pages or to open a lightbox slideshow. The captions are below the images and can extend to any number of lines.
Random Image Grid
An image grid for odd sized images which can be set up as links to open other pages or a lightbox slideshow. The images have captions below and can be set to display round/oval.
Images
The example above is set up with images which are links to other pages of the site. In this case, the images are responsive.
Note how the grid items in any row all maintain the same height despite varying amounts of content. This is achieved automatically when using the CSS Grid Layout Module and javascript is not necessary making the grid more efficient and faster to download in the browser.