Skip to content

Latest commit

 

History

History
56 lines (43 loc) · 1.97 KB

README.md

File metadata and controls

56 lines (43 loc) · 1.97 KB
Raw

parallax-mouse.js 🔥

Simple parallax elements for the mouse. Pure JavaScript.

Demo

Watch demo

Installation

Using the CDN
  1. Add <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/parallax-mouse.min.js"></script> to your markup
  2. Done!
Download file
  1. Download file
  2. Copy the code and paste into your project.
  3. Done!
NPM

npm install parallax-mouse --save

Getting started

Tag script

<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>

ES6

import { parallaxMouse } from 'parallax-mouse/dist/parallax-mouse.min.js'

parallaxMouse({ elements: '.cherry', moveFactor: 10, wrap: '.parallax', perspective: '100px' })

Options

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'

Support or Contact

To contact me, write to me by mail: [email protected]