# Interacitve Parallax Effect For Multi-layer Elements - MoveParallax

File Size: 3.33 MB 256 04/13/2020 03:05:00 UTC 03/19/2020 03:30:12 UTC Go to website MIT

Just another mouse movement parallax jQuery plugin to creating an interactive parallax effect on multi-layer images by moving background perspective on mouse move.

## How It Works:

```// Calculate the perspective of each layer depending on the position of the mouse (BC) relative to the center of the composition
//   A
//   |\
//   | \
//   |  \
//  D|___\E ← move parallax layer
//   |    \
//   |_____\ ← mouse deviation from the centre
//   B      C
```

## How to use it:

1. Add parallax layers to the parallax container and determine the perspective depth in the HTML data attribute as follows:

```<div class="parallax">
<div class="parallax-layer layer_1" data-perspective-depth="10">
<div class="layer__item item_1"></div>
</div>
<div class="parallax-layer layer_2" data-perspective-depth="30">
<div class="layer__item item_1"></div>
</div>
<div class="parallax-layer layer_3" data-perspective-depth="90">
<div class="layer__item item_1"></div>
</div>
</div>
```

2. Load the main JavaScript after jQuery.

```<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/index.js"></script>
```

3. The example CSS.

```.parallax {
overflow: hidden;
}

body .parallax {
position: relative;
}

body .parallax .parallax-layer {
position: absolute;
transition-duration: 500ms;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

body .parallax .parallax-layer .layer__item {
position: absolute;
}

body .parallax .position_t_l {
top: 0;
left: 0;
}

body .parallax .position_t_c {
top: 0;
left: 50%;
transform: translate(-50%, 0);
}

body .parallax .position_t_r {
top: 0;
right: 0;
}

body .parallax .position_m_l {
top: 50%;
left: 0;
transform: translate(0, -50%);
}

body .parallax .position_m_c {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

body .parallax .position_m_r {
top: 50%;
right: 0;
transform: translate(0, -50%);
}

body .parallax .position_b_l {
bottom: 0;
left: 0;
}

body .parallax .position_b_c {
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
}

body .parallax .position_b_r {
bottom: 0;
right: 0;
}

.parallax {
width: 1301px;
height: 867px;
border: 2px solid red;
}

.parallax .parallax-layer {
width: 1301px;
height: 867px;
}

.parallax .layer_1 .item_1 {
width: 900px;
height: 219px;
}

.parallax .layer_2 .item_1 {
width: 1166px;
height: 436px;
}

.parallax .layer_3 .item_1 {
width: 676px;
height: 277px;
}

.parallax {
background: URL("./img/0_layer.png") center center no-repeat;
}

.parallax .layer_1 .item_1 {
background: URL("./img/1_layer.png") center center no-repeat;
}

.parallax .layer_2 .item_1 {
background: URL("./img/2_layer.png") center center no-repeat;
}

.parallax .layer_3 .item_1 {
background: URL("./img/3_layer.png") center center no-repeat;
}

.parallax .layer_1 .item_1 {
bottom: 580px;
left: 115px;
}

.parallax .layer_2 .item_1 {
bottom: 205px;
left: -235px;
}

.parallax .layer_3 .item_1 {
bottom: 225px;
left: 805px;
}```

This awesome jQuery plugin is developed by SadCat88. For more Advanced Usages, please check the demo page or visit the official website.