Parallax List

  • Traditional Cuisine
  • From Lahore, Pakista
  • Charcoal Fired
  • Organic Produce
  • Mutton Karahi
  • Prepared Before You

Parallax List

The parallax list widget has an overlay with a grid layout and two columns. The list can be placed in the left or right column when viewed on browser/device screen widths above the break point. Below the break point the list is centered.
Images
The images are load in the background and are inserted in three sizes - large, medium and small. 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 portrait aspect ratio for better performance on mobile phones in portrait mode.

Parallax Image

Overlay

The overlay has a background color control with an opacity slider and has a grid layout. An HTML5 <article> element is vertically centered over the image at the left or right and has a maximum width setting. It also has controls for background color and its opacity.
The optional heading has its own controls for font size, mobile size, color and text align.
List
List items are added using a modified version of the EverWeb widget API Assets List. There are controls for font size, mobile size, color and for adjusting the line height and vertical spacing.
Markers
The list item markers are inserted using a CSS ::before element and there is a choice of fifteen marker types. The markers have controls for adjusting their size, color and horizontal spacing from the list item text.