ЭФФЕКТ КРУГОВ ПРИ КЛИКЕ (MO.JS)
14.03.2017 63 0 SТРАННИК

ЭФФЕКТ КРУГОВ ПРИ КЛИКЕ (MO.JS)

Описание:

Хорошая скрипт которая понравиться всем, Думаю многие ждали такого скрипта,  Данная реализация позволяет создавать эффект кругов при клике на любую область. Обычно подобное применение вы могли наблюдать в видеороликах. Но теперь, благодаря плагину mo.js данный эффект можно встроить на веб странице. Эффект кругов появляется конкретно в том месте, где вы кликнули мышкой.

Для начала нам надо подключить библиотеки:

Код
<script src='https://cdnjs.cloudflare.com/ajax/libs/mo-js/0.288.1/mo.min.js'></script>   
<script src='https://cdn.jsdelivr.net/mojs-player/0.43.15/mojs-player.min.js'></script>

Теперь ставим код JS:

Код
<script type="text/javascript">   
    'use strict';   
    var _extends = Object.assign || function (target) {   
    for (var i = 1; i < arguments.length; i++) {   
    if (window.CP.shouldStopExecution(2)) {   
    break;   
    }   
    var source = arguments[i];   
    for (var key in source) {   
    if (window.CP.shouldStopExecution(1)) {   
    break;   
    }   
    if (Object.prototype.hasOwnProperty.call(source, key)) {   
    target [key]= source[key];   
    }   
    }   
    window.CP.exitedLoop(1);   
    }   
    window.CP.exitedLoop(2);   
    return target;   
    };   

    var OPTS = {   
    fill: 'none',   
    radius: 25, // Указываем общий радиус   
    strokeWidth: {   
    50: 0   
    },   
    scale: {   
    0: 1   
    },   
    angle: {   
    'rand(-35, -70)': 0   
    },   
    duration: 500,   
    left: 0,   
    top: 0,   
    easing: 'cubic.out'   
    };   

    var circle1 = new mojs.Shape(_extends({}, OPTS, {   
    stroke: '#FF8966' // Указываем цвет большого круга   
    }));   

    var circle2 = new mojs.Shape(_extends({}, OPTS, {   
    radius: {   
    0: 15   
    },   
    strokeWidth: {   
    30: 0   
    },   
    stroke: '#E5446D', // Указываем цвет малого круга   
    delay: 'rand(75, 150)'   
    }));   

    document.addEventListener('click', function (e) {   
    circle1.tune({   
    x: e.pageX,   
    y: e.pageY   
    }).replay();   

    circle2.tune({   
    x: e.pageX,   
    y: e.pageY   
    }).replay();   
    });   
</script>

Вот и всё!

Turbo-S - Если будет вопросы пишите в комментариях, Если нужен помощь по установке тогда создайте тему форуме.
Файлы для скачивания отсутствуют.
Поблагодарить автора Автор: SТРАННИК
ИсточникМатериал взят с другого сайта
Комментарии (0)
Добавить комментарий
Прокомментировать