https://github.com/akella/webgl-mouseover-effects

Demos for the tutorial on how to achieve an interactive mouseover/hover effect
https://github.com/akella/webgl-mouseover-effects

Last synced: about 1 month ago
JSON representation

Demos for the tutorial on how to achieve an interactive mouseover/hover effect

• Host: GitHub
• URL: https://github.com/akella/webgl-mouseover-effects
• Owner: akella
• License: mit
• Created: 2020-03-29T14:48:12.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-05-18T14:49:29.000Z (over 1 year ago)
• Last Synced: 2024-08-02T12:23:05.842Z (4 months ago)
• Language: JavaScript
• Homepage: https://tympanus.net/codrops/?p=49069
• Size: 3.29 MB
• Stars: 353
• Watchers: 4
• Forks: 61
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-web-effect - webgl-mouseover-effects - Demos for the tutorial on how to achieve an interactive mouseover/hover effect (🚀 A series of exquisite and compact web page cool effects / Mouse Effect)
• fucking-awesome-web-effect - webgl-mouseover-effects - Demos for the tutorial on how to achieve an interactive mouseover/hover effect (🚀 A series of exquisite and compact web page cool effects / Mouse Effect)

README

        
# Interactive Hover Effects with Three.js

A simple tutorial on how to achieve an interactive mouseover/hover effect on images in some easy steps.

![Image Title](https://tympanus.net/codrops/wp-content/uploads/2020/04/mousefeatured.jpg)

[Article on Codrops](https://tympanus.net/codrops/?p=49069)

[Demo](https://tympanus.net/Tutorials/webgl-mouseover-effects/step3.html)

## Instructions

Install dependences:

```shell

npm install

# or

yarn add

```

HMR development:

```shell

npm run start1 # step1 hot module reload

# or

npm run start2 # step2 hot module reload

# or

npm run start3 # step3 hot module reload

```

## Credits

- [three.js](https://threejs.org/)

- Images from [Unsplash.com](https://unsplash.com/)

- [imagesLoaded](https://imagesloaded.desandro.com/) by Dave DeSandro

## Misc

Follow Yuriy: [Twitter](https://twitter.com/akella), [Instagram](http://instagram.com/akella_), [Facebook](https://facebook.com/akella), [GitHub](https://github.com/akella) 

Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/)

## License

[MIT](LICENSE)

Made with :blue_heart: by [Codrops](http://www.codrops.com)