A custom UIkit component for scrollable images on hover

aspect-ratio.js

(function(addon) {
    var component;

    if (window.UIkit) {
        component = addon(UIkit);
    }

    if (typeof define == "function" && define.amd) {
        define("uikit-aspect-ratio", ["uikit"], function(){
            return component || addon(UIkit);
        });
    }
})(function(UI){

    "use strict";

    // helper utility
    UI.Utils.crossMultiply = function(data) {

        var $return = 0;
        data = UI.Utils.options(data);

        // Eg:  x1 {1_1} == y1 {1_2}
        //      x2 {2_1} == y2 {2_2}
        data = UI.$.extend({
            'x1': null,
            'y1': null,
            'x2': null,
            'y2': null
        }, data);

        if (data['x1'] == null) {
            $return = (data['y1'] * data['x2']) / data['y2'];
        }
        else if (data['y1'] == null) {
            $return = (data['x1'] * data['y2']) / data['x2'];
        }
        else if (data['x2'] == null) {
            $return = (data['x1'] * data['y2']) / data['y1'];
        }
        else if (data['y2'] == null) {
            $return = (data['y1'] * data['x2']) / data['x1'];
        }

        return Math.ceil($return);
    };

    UI.component('aspectRatio', {

        defaults: {
            'ratio': '16:9',
            'fix': 'height',
            'speed': '2.5s',
            'animation': 'linear'
        },

        boot: function() {
            // init code
            UI.ready(function(context) {

                UI.$("[data-uk-aspect-ratio]", context).each(function(){

                    var ele = UI.$(this);

                    if (!ele.data("aspectRatio")) {
                        UI.aspectRatio(ele, UI.Utils.options(ele.attr("data-uk-aspect-ratio")));
                    }
                });
            });
        },

        init: function() {
            var $this = this;

            // init + on resize & orientationchange event
            UI.$win.on('resize orientationchange', (function() {

                var fn = function() {
                    $this.process();
                };

                UI.$(function() {
                    fn();
                    UI.$win.on("load", fn);
                });

                return UI.Utils.debounce(fn, 20);
            })());

            this.element.data("aspectRatio", this);
        },

        process: function() {

            var $this = this,
                element = this.element,
                arHoverElem = this.element.children('.uk-aspect-ratio-hover').first();

            this.ratio  = this.options.ratio.split(":");
            this.fix    = this.options.fix;
            if (this.fix == 'height') {
                this.origWidth = element.width();
                this.origHeight = null;
                element.css('overflow-y', 'hidden');
            }
            else if (this.fix == 'width') {
                this.origWidth  = null;
                this.origHeight = element.height();
                element.css('overflow-x', 'hidden');
            }

            var calcData = UI.Utils.crossMultiply({
                'x1': this.ratio[0], // ratio mini-width
                'y1': this.ratio[1], // ratio mini-height
                'x2': this.origWidth,
                'y2': this.origHeight
            });
            // Sets the width/height
            element[this.fix](calcData);

            if (arHoverElem) {
                // Sets the animation type & speed
                arHoverElem.css('transition', 'transform '+this.options.speed+' '+this.options.animation);

                element.hover(function() {
                    if ($this.fix == 'height') {
                        arHoverElem.css('transform', 'translateY(-'+(arHoverElem.height()-calcData)+'px)');
                    }
                    else if ($this.fix == 'width') {
                        arHoverElem.css('transform', 'translateX(-'+(arHoverElem.width()-calcData)+'px)');
                    }
                }, function() {
                    if ($this.fix == 'height') {
                        arHoverElem.css('transform', 'translateY(0)');
                    }
                    else if ($this.fix == 'width') {
                        arHoverElem.css('transform', 'translateX(0)');
                    }
                });
                //arHoverElem.attr('data-uk-ar', arHoverElem[this.fix]()-calcData+'px');
            }

            return this;
        }
    });

    return UI.aspectRatio;
});

HOW TO USE

Manual:

1. Minify aspect-ratio.js to aspect-ratio.min.js
2. Add both files to your components sub-folder in assets/js/components/
3. Include the minified js after your UIkit script tag or automatically load with: $O.test('[data-aspect-ratio]').js('aspect-ratio.min.js'); using Only.js!

Build process:

1: Include aspect-ratio.js to your src/js/components/ sub-folder.
2. Add ./src/js/components/aspect-ratio.js to your gulpfile (probably depends on your setup)
3. Run gulp dist -m -c (also depends on your setup)

# In your HTML... ## For long images (scroll by height):

<div class="uk-width-1-1" data-uk-aspect-ratio="{'ratio':'3:1'}">
   <img src="image.jpg" class="uk-width-1-1 uk-aspect-ratio-hover">
</div>

For wide images (scroll by width):

<div class="uk-width-1-1" data-uk-aspect-ratio="{'ratio':'3:1', 'fix': 'width'}">
   <img src="image.jpg" class="uk-width-1-1 uk-aspect-ratio-hover">
</div>

Demo:

Check the article on Eharry.me for live demos.
Cheers!