https://github.com/askomarov/astro-cursor

https://askomarov.github.io/astro-cursor/
https://github.com/askomarov/astro-cursor

astro gsap scrolltrigger

Last synced: 9 months ago
JSON representation

https://askomarov.github.io/astro-cursor/

• Host: GitHub
• URL: https://github.com/askomarov/astro-cursor
• Owner: askomarov
• Created: 2024-08-14T12:17:23.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-12-09T16:02:31.000Z (about 1 year ago)
• Last Synced: 2025-02-14T04:51:41.153Z (11 months ago)
• Topics: astro, gsap, scrolltrigger
• Language: JavaScript
• Homepage:
• Size: 10.3 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Проект на Astro

Использован шаблон [astro-template](https://github.com/askomarov/astro-template)

## Кастомный курсор

![preview image](preview.gif)

Для интерактивного курсора исользуется библиотека

[mouse-follower](https://github.com/Cuberto/mouse-follower)

Работает вместе с Gsap.

```js

import MouseFollower from 'mouse-follower'

import gsap from 'gsap'

MouseFollower.registerGSAP(gsap)

const cursor = new MouseFollower()

```

По ссылке на документацию, найдете всё не обходимое.

Стили для курсора лежат

`src/styles/components/cursor.scss`

Необходимый js для движения элемента во время эффекта прилипания.

`src/scripts/utils/parallax-mouse.js`

Эффект показа media - видео

```js

      const elVideo = document.querySelector('[data-cursor-video]')

      if (elVideo) {

        elVideo.addEventListener('mouseenter', () => {

          cursor.addState('-media--lg')

          cursor.addState('-media')

          cursor.setVideo('//cdn.cuberto.com/cb/projects/flipaclip/cover.mp4')

        })

        elVideo.addEventListener('mouseleave', () => {

          cursor.removeVideo()

          cursor.removeState('-media')

          cursor.removeState('-media--lg')

        })

      }`

```

В этот примере я добавил пару эффектов.

Эффект прилипания и движения элемента, лучше когда это кнопка без фона, а просто

```js

const btnWithStick = document.querySelectorAll('[button-stuck]')

if (btnWithStick.length) {

  btnWithStick.forEach((btn) => {

    parallaxMouse({

      elements: btn,

      moveFactor: 100,

      wrap: btn

    })

    btn.addEventListener('mouseenter', () => {

      cursor.setStick(btn)

      cursor.setSkewing(2)

      cursor.addState('-stuck')

    })

    btn.addEventListener('mouseleave', () => {

      cursor.removeStick()

      cursor.removeState('-stuck')

      cursor.removeSkewing()

      btn.setAttribute('style', '')

    })

  })

}

```