Эффект змеи с использованием CSS и JavaScript
Опубликовано: 27 Августа, 2022
В этой статье мы увидим, как создать эффект змеи с помощью CSS и JavaScript.
Ссылка CDN: включите следующую библиотеку GSAP в свой HTML-код.
<script src=”https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js”></script>
Подход :
- Мы взяли тег div с именем змея, который является экземпляром полной змеи. Мы взяли круг, мы можем принять другую форму, используя простой CSS.
- Мы создали дополнительные элементы div , чтобы задать длину змеи. Мы можем включить больше тегов div , чтобы увеличить его длину.
- document.body.addEventListener («mousemove»): эта функция в JavaScript прикрепляет событие перемещения мыши к документу. Когда пользователь перемещает указатель мыши в любом месте документа, происходит упомянутое событие.
- e.clientX: получить горизонтальную координату.
- e.clientY: получить вертикальную координату.
- stagger : из-за задержки анимации (0,05 секунды) мы можем видеть змею.
- gsap.to(“.snake”): будет отслеживать змею по координатам указателя.
Example:
HTML
<!DOCTYPE html> < html > < head > < style type = "text/css" > /* Area part for snake */ .area { width: 80px; height: 80px; position: relative; } /* Designing of a part of snake (here circle) */ .area .snake { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(3, 171, 15); border: 2px solid white; border-radius: 50%; } </ style > </ head > < body > < div class = "area" > <!-- You can add more divs for a long snake--> < div class = "snake" ></ div > < div class = "snake" ></ div > < div class = "snake" ></ div > < div class = "snake" ></ div > < div class = "snake" ></ div > < div class = "snake" ></ div > < div class = "snake" ></ div > < div class = "snake" ></ div > < div class = "snake" ></ div > < div class = "snake" ></ div > </ div > <!-- GSAP Library --> < script </ script > <!-- JavaScript Code for mouse event --> < script type = "text/javascript" > document.body.addEventListener("mousemove", e => { gsap.to(".snake", { x : e.clientX, y : e.clientY, stagger : -0.05, }) }) </ script > </ body > </ html > |
Output :
Как видно из приведенного выше вывода, мы создали змею, которая следует за указателем мыши, что делает ее похожей на эффект змеи.