Websites York - Template26

Template Menu

Shimmer by 1LD

Design Notes

Testing Shimmer from 1LD

The original examples in the sample project come with stacks based on a set of 1LD stacks (including a Core stack) called Deluxe.

The Deluxe stacks are all quite feature rich with numerous settings so in order to try and reduce the amount of code involved I have:

  • Swapped out the Deluxe Text stack and replaced with the F6 Text stack
  • Removed the Deluxe Core stack
  • Used swatches to create a background for an F6 Container stack

The arrow icons used are open source from https://ionic.io/ionicons and are imported by a 1LD stack called Icon Helper, which I have left in place, although it should be easy enough to download the relevant icon as an SVG image and cut out the need for an external call altogether.

The other examples, not shown here are Glass, Image and Scroll. Most of the examples rely on having a dark background.

I probably wouldn't use the Autoplay example now, seeing what it does to the performance in Lightroom but I might be tempted to use some of the other examples depending on the type of project. I can imagine using Spotlight as a banner heading with embedded text and social icons.

Hover

Optionally trigger the selected effect when the cursor hovers over the element. Unlike following the cursor directly, the effect remains centered within the element itself.
Back

Lorem Ipsum

Spotlight

Spotlight creates a magnificent radial light that emanates from the cursor, giving elements a captivating glow reminiscent of a spotlight on a stage.
Back
Lorem Ipsum

Autoplay

The effect can also play automatically. Tailor it to your preference, whether subtly elegant or attention-grabbing. Customize looping settings such as speed, easing, direction, delay, and interval to suit your needs.
Back
Lorem Ipsum

Lighthouse Scores

Animated SVG from Loaf

NB: The 95 performance score was with the Hover and Spotlight examples only. As soon as I added the Autoplay example, the performance dropped to 83/85