Simple parallax elements for the mouse. Pure JavaScript.
- Add
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/parallax-mouse.min.js"></script>to your markup - Done!
- Download file
- Copy the code and paste into your project.
- Done!
npm install parallax-mouse --save
<body>
<div class="parallax">
<img src="http://placehold.it/50x50" class="cherry" alt="">
</div>
<!-- /.parallax -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/parallax-mouse.min.js"></script>
<script>
parallaxMouse({ elements: '.cherry', moveFactor: 10, wrap: '.parallax', perspective: '100px' })
</script>
</body>import { parallaxMouse } from 'parallax-mouse/dist/parallax-mouse.min.js'
parallaxMouse({ elements: '.cherry', moveFactor: 10, wrap: '.parallax', perspective: '100px' })| Name | Default value | Description |
|---|---|---|
| elements | null | Elements to be involved |
| moveFactor | 5 | Scatter level of elements |
| wrap | .container | Wrapping elements (listens to mouse event) |
| perspective | false | Needed if you want 3D effect of the elements. By Required in string format. For example, perspective: '500px' |
To contact me, write to me by mail: [email protected]