The parallax-mouse's intro from rah-emil

parallax-mouse's Introduction

parallax-mouse.js 🔥

Simple parallax elements for the mouse. Pure JavaScript.

Demo

Watch demo

Installation

Using the CDN

Add <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/parallax-mouse.min.js"></script> to your markup
Done!

Download file

Download file
Copy the code and paste into your project.
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'`