jquery.pleasestay.js

gistfile1.txt

1. Download 
2. Online Store -> Themes -> Edit Code
3. Assets -> Add a new asset -> Upload: jquery.pleasestay.js
4. Sửa Layout -> theme.liquid -> Thêm vào trước </body>:


{{ 'jquery.pleasestay.js' | asset_url | script_tag }}
<script>
        $(function () {
            $.pleaseStay({
                messages: ["We miss you...", "Come back to us!"],
                favicon: "https://cdn.jsdelivr.net/emojione/assets/png/1f622.png",
                speed: 1,
                delay: 3
            });
        });
</script>

jquery.pleasestay.js

/*!
 * jQuery Please Stay Plugin
 * (c) SonNM
 */

;(function ($) {
    $.pleaseStay = function (options) {
        var opts = $.extend({}, $.pleaseStay.defaults, options),
            timer = null,
            animationTimer = null,
            messageIndex = 0,
            originalTitle = document.title,
            favicon = $('head').find('link[rel$="icon"]'),
            originalFavicon = favicon.attr("href");

        if (opts.messages.length > 0) {
            _start();
        }

        if (opts.favicon !== undefined) {
            _preload();
        }

        function _start() {
            timer = null;
            $(document).bind("visibilitychange", function () {
                if ($(document).prop('hidden')) _blur();
                else _focus();
            });
        }

        function _blinking() {
            document.title = opts.messages[messageIndex];
            if (messageIndex < opts.messages.length - 1) messageIndex++;
            else messageIndex = 0;
            animationTimer = setTimeout(function () {
                _blinking();
            }, opts.speed * 1000);
        }

        function _blur() {
            messageIndex = 0;
            timer = setTimeout(function () {
                _blinking();
                favicon.attr("href", opts.favicon);
                clearInterval(timer);
            }, opts.delay * 1000);
        }

        function _focus() {
            document.title = originalTitle;
            favicon.attr("href", originalFavicon);
            clearInterval(timer);
            clearInterval(animationTimer);
        }

        function _preload() {
            $('<img/>')[0].src = opts.favicon;
        }
    };

    $.pleaseStay.defaults = {
        messages: [document.title],
        speed: 1,
        delay: 3
    };

})(jQuery);

This is used on Mikkeller's website, very cool :)