Связаться
Портфолио
Обо мне
1
Модификации
Портфолио
Услуги
Политика конфиденциальности
Услуги
Связаться
Магнитная кнопка
Hover анимация: Магнитная кнопка
Один из способов увеличить конверсию на сайте - заставить посетителя нажать на кнопку. Интересный приём - необычный анимация кнопки, которая создаёт эффект магнита, когда ты наводишь на неё или просто проводишь рядом курсор.
Эффект неожиданности пробудит дополнительный интерес у потребителя.
Инструкция по установке
Инструкция
Видеоинструкция
Время настройки : 15 секнд
<style>
    .magnit__button {
        cursor: pointer;
    }
</style>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script>

<script>
function applyMagneticEffect($elements) {
        if ($(window).width() > 980) {
            $elements.each(function() {
                let $self = $(this);
                let hover = false;
                let offsetHoverMax = $self.attr("offset-hover-max") || 1;
                let offsetHoverMin = $self.attr("offset-hover-min") || 0.75;

                let attachEventListeners = function() {
                    $(window).on("mousemove", function(e) {
                        let hoverArea = hover ? offsetHoverMax : offsetHoverMin;
                        let cursor = {
                            x: e.clientX,
                            y: e.clientY + $(window).scrollTop()
                        };

                        let width = $self.outerWidth();
                        let height = $self.outerHeight();
                        let offset = $self.offset();
                        let elPos = {
                            x: offset.left + width / 2,
                            y: offset.top + height / 2
                        };

                        let x = cursor.x - elPos.x;
                        let y = cursor.y - elPos.y;
                        let dist = Math.sqrt(x * x + y * y);
                        let mutHover = false;

                        if (dist < width * hoverArea) {
                            mutHover = true;
                            if (!hover) {
                                hover = true;
                            }
                            onHover(x, y);
                        }

                        if (!mutHover && hover) {
                            onLeave();
                            hover = false;
                        }
                    });
                };

                let onHover = function(x, y) {
                    TweenMax.to($self, 0.4, {
                        x: x * 0.8,
                        y: y * 0.8,
                        rotation: x * 0.05,
                        ease: Power2.easeOut
                    });
                };

                let onLeave = function() {
                    TweenMax.to($self, 0.7, {
                        x: 0,
                        y: 0,
                        scale: 1,
                        rotation: 0,
                        ease: Elastic.easeOut.config(1.2, 0.4)
                    });
                };

                attachEventListeners();
            });
        }
    };

    $(document).ready(function() {
        applyMagneticEffect($(".magnit__button"));
    });
</script>
1
2
3
4
<style> input { width: 100%; box-sizing: border-box; height: 40px; margin-bottom: 30px; ...
Данная модификация не работает на мобильных устройствах!
Zero Block
В
добавляем элемент
Пример модификации
Нажмите на кнопку правой кнопкой мыши и выберите
magnit__button
и добавьте в него код
В появившемся поле введите
Кнопка
Добавьте блок
после всех остальных блоков на странице
Сохраните изменения и закройте зеро блок
T123
после этого сохраните все изменения и опубликуйте страницу
Add css class name