Эффект магнитной кнопки Тильда. Magnetic Button

Данный скрипт помогает добавить анимацию магнетизма вокруг кнопки при движении мыши. Популярный и необычный эффект

Инструкция

1

Cкопируйте код и

вставьте в блок "T123"

2

Создайте кнопку в zero-блок и присвойте class ".magnetic"

Код скопирован

 <!-- Эффект магнитной кнопки Тильда. Magnetic Button -->
 <!-- https://youx.agency/effekt-magnitnoj-knopki-tilda-magnetic-button -->

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script>

                            <script>
                            var hoverMouse = function($el) {
                                $el.each(function() {
                                    var $self = $(this);
                                    var hover = false;
                                    var offsetHoverMax = $self.attr("offset-hover-max") || 1;
                                    var offsetHoverMin = $self.attr("offset-hover-min") || 0.75;

                                    var attachEventsListener = function() {
                                        $(window).on("mousemove", function(e) {
                                            var hoverArea = hover ? offsetHoverMax : offsetHoverMin;

                                            var cursor = {
                                                x: e.clientX,
                                                y: e.clientY + $(window).scrollTop()
                                            };

                                            var width = $self.outerWidth();
                                            var height = $self.outerHeight();

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

                                            var x = cursor.x - elPos.x;
                                            var y = cursor.y - elPos.y;

                                            var dist = Math.sqrt(x * x + y * y);

                                            var mutHover = false;

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

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

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

                                    attachEventsListener();
                                });
                            };

                            hoverMouse($(".magnetic"));
                            </script>

Другие модификации

Наш чат Telegram

Вступите в наш чат для общения, помогаем и консультируем по проектам, продвигаем проекты Behance, рассказываем о дизайне

* Регулярная техническая поддержка, помощь и консультации