Эффект змеи с использованием 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 : 

Как видно из приведенного выше вывода, мы создали змею, которая следует за указателем мыши, что делает ее похожей на эффект змеи.