Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Anemolo/StickyImageEffect
A sticky image effect for a slideshow inspired by ultanoir's website.
https://github.com/Anemolo/StickyImageEffect
animation slideshow threejs webgl
Last synced: about 1 month ago
JSON representation
A sticky image effect for a slideshow inspired by ultanoir's website.
- Host: GitHub
- URL: https://github.com/Anemolo/StickyImageEffect
- Owner: Anemolo
- Created: 2019-03-27T22:38:21.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-04-17T22:23:20.000Z (over 5 years ago)
- Last Synced: 2024-08-02T12:23:19.415Z (4 months ago)
- Topics: animation, slideshow, threejs, webgl
- Language: JavaScript
- Homepage: https://tympanus.net/codrops/2019/04/10/how-to-create-a-sticky-image-effect-with-three-js/
- Size: 9.26 MB
- Stars: 217
- Watchers: 10
- Forks: 50
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-web-effect - StickyImageEffect - A sticky image effect for a slideshow inspired by ultanoir's website. (🚀 A series of exquisite and compact web page cool effects / Image Effect)
- awesome-web-effect - StickyImageEffect - A sticky image effect for a slideshow inspired by ultanoir's website. (🚀 A series of exquisite and compact web page cool effects / Image Effect)
README
# How to Create a Sticky Image Effect with Three.js
A sticky image effect for a slideshow inspired by [ultanoir's project showcase slideshow](https://ultranoir.com/en/).
[Article on Codrops](https://tympanus.net/codrops/2019/04/10/how-to-create-a-sticky-image-effect-with-three-js/)
[Demo](https://tympanus.net/Tutorials/StickyImageEffect/)
## Development and Building
If you want to build the project or develop on top of it. You have to install the packages first:
```
npm install
```
Starting a local development server:
```
npm start
```
Build and bundle all the assets into /dist:
```
npm run build
```
## Credits
_third party resources_
- [Popmotion](https://twitter.com/popmotionjs) by Matt Perry
- [three.js](https://threejs.org/) by Ricardo Cabello
- Images from [Unsplash.com](https://unsplash.com/)
## License
This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.
## Misc
Follow Daniel: [Twitter](https://twitter.com/Anemolito), [Codepen](https://codepen.io/Anemolo/), [CodeSandbox](https://codesandbox.io/u/Anemolo), [GitHub](https://github.com/Anemolo)
Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/), [Instagram](https://www.instagram.com/codropsss/)
[© Codrops 2019](http://www.codrops.com)