An HTML element that keeps the contents filling the container, but with a configurable focus point.
Useful for layouts with big full screen image/video backgrounds, which have areas that text should avoid.
<script src="https://unpkg.com/focus-panel[@version]></script> ([@version] is optional, but recommended)
or
npm install focus-panel, require('focus-panel')
Call the global focusPanelInit({mobileBreakpoint: ...}) to attach to all
elements with the class name focus-panel.
e.g.
<div class="focus-panel"
data-max-height="500">
<video autoplay loop muted playsinline>
<source src="https://nordprojects-static.s3.amazonaws.com/lantern/lantern-hero-mobile.mp4" type="video/mp4">
<source src="https://nordprojects-static.s3.amazonaws.com/lantern/lantern-hero-mobile.webm" type="video/webm">
</video>
</div>
<script src="https://unpkg.com/focus-panel"></script>
<script>
focusPanelInit();
</script>Options are specified with data attributes.
| Option name | Example | Description |
|---|---|---|
data-background |
/img/bg.jpg |
An image to use as the background of the element. If omitted, uses the first child element. |
data-aspect-ratio |
16:9 |
The desired aspect ratio of the panel. Sets the height according to the width of the container. |
data-max-height |
500 |
The max height of the element, in pixels. Limits the height, regardless of aspect ratio. |
data-offset |
2.0% -10.0% |
The amount to offset the image by, relative to the anchor point. Tweak with dev mode. |
data-anchor-point |
90.0% 50.0% |
The amount to offset the image by, relative to the anchor point. Tweak with dev mode. |
data-background-width |
1500 |
The desired background width, in pixels. This is a minimum, it's ignored if the background must grow to fill the container. Tweak with dev mode. |
All options accept mobile/desktop modifiers. For example, you can set
data-aspect-ratio-mobile and
data-aspect-ratio-desktop and they'll change at the breakpoint.
Once you've got the image panels in, with set aspect ratio, view the page with ?dev to use dev mode. Hold 'shift' and hover the mouse over a panel to select it. Then use:
| mouse click | Sets the focus point relative to the container |
| ↑ ↓ ← → | Moves the image relative to the focus point |
| + - | Grow/shink the background |
The settings you tweak can then be copied from the overlay on the panel into your HTML.