vanillafocus 1.0.0

Focus & Ratio Control

vanillafocus provides the same functionality like the jQuery plugin jQuery.FocusPoint but without any dependencies like jQuery. We also added some nice CSS ratio classes. The size of both JavaScript and CSS is only about 8kb!

Example HTML

<div class="vf-ratio vf-ratio-16x9">
    <div class="vf-container" data-focus-x="0.66"
    data-focus-y="0.36"
    data-image-w="750"
    data-image-h="498">
        <img src="https://i.imgur.com/PA09XUX.jpeg" alt="Demo">
    </div>
</div>

Example JS

var myImages = new vanillafocus({
     selector: ".vf-container",
     reCalcOnWindowResize: true
})

Included CSS

name	description
.vf-container	Default class for the container around the img tag
.vanillafocus	Fallback class for .vf-container with the same attributes
.vf-ratio	Basic class for aspect ration control
.vf-ratio-1x1 .vf-ratio-1x2 .vf-ratio-4x2 .vf-ratio-4x3 .vf-ratio-19x9 .vf-ratio-21x9	Classes to define the basic aspect ratio of the image container. You can easily add your own aspect ratio with SCSS or CSS. If you do not add other ratio classes, the ratio will be the same on all screen sizes.
.vf-ratio-{breakpoint}-{ratio}	Controls the ratio for different breakpoints according to the mobile first principle. If you want an image on a smartphone to have a 1x1 ratio, you can add .vf-ratio-1x1. If you want the same image in a 16x9 format on a tablet, you can add .vf-ratio-md-16x9 to the same container. If you want the same image in a 1x2 format on a desktop screen, you can add .vf-ratio-lg-1x2 to the same container, and so on...