javascript – How to reset the block with the parallax effect to its original value?

Question:

When the mouse leaves the parallax effect area, the objects remain in the same place, and I need them to return to their original state.

// Yep, that's it!
$('#scene').parallax();
body {
  background: #111;
  margin: 0;
}

img {
  display: block;
  width: 100%;
}

.scene {
  max-width: 500px;
  margin: 0 auto;
  padding: 0;
}

.layer:nth-child(1) {
  opacity: 0.15;
}

.layer:nth-child(2) {
  opacity: 0.30;
}

.layer:nth-child(3) {
  opacity: 0.45;
}

.layer:nth-child(4) {
  opacity: 0.60;
}

.layer:nth-child(5) {
  opacity: 0.75;
}

.layer:nth-child(6) {
  opacity: 0.90;
}
<div id="container" class="container">
  <ul id="scene" class="scene">
    <li class="layer" data-depth="1.00"><img src="http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/images/layer1.png"></li>
    <li class="layer" data-depth="0.80"><img src="http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/images/layer2.png"></li>
    <li class="layer" data-depth="0.60"><img src="http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/images/layer3.png"></li>
    <li class="layer" data-depth="0.40"><img src="http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/images/layer4.png"></li>
    <li class="layer" data-depth="0.20"><img src="http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/images/layer5.png"></li>
    <li class="layer" data-depth="0.00"><img src="http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/images/layer6.png"></li>
  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/deploy/jquery.parallax.js"></script>

<!-- http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/ -->

Answer:

Here's an updated version of your parallax, I changed the parallax.js file and added a container option, and now if you give this option to javascript the effect will only work when you hover the mouse over this container.

Note:

The container can only be given a javascript element Example document.getElementById ('simpleelement').

and this is a link to download the updated library.

$(document).ready(function(){
    $('#scene').parallax({
        mouseport: document.getElementById('container')
    });
});
body {
  background: #111;
  margin: 0;
}
#container{
    width: 100px;
    height: 100px;
}
img {
  display: block;
  width: 100px;
}

.scene {
  max-width: 500px;
  margin: 0 auto;
  padding: 0;
}

.layer:nth-child(1) {
  opacity: 0.15;
}

.layer:nth-child(2) {
  opacity: 0.30;
}

.layer:nth-child(3) {
  opacity: 0.45;
}

.layer:nth-child(4) {
  opacity: 0.60;
}

.layer:nth-child(5) {
  opacity: 0.75;
}

.layer:nth-child(6) {
  opacity: 0.90;
}
<div id="container" class="container">
  <ul id="scene" class="scene">
    <li class="layer" data-depth="1.00"><img src="http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/images/layer1.png"></li>
    <li class="layer" data-depth="0.80"><img src="http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/images/layer2.png"></li>
    <li class="layer" data-depth="0.60"><img src="http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/images/layer3.png"></li>
    <li class="layer" data-depth="0.40"><img src="http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/images/layer4.png"></li>
    <li class="layer" data-depth="0.20"><img src="http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/images/layer5.png"></li>
    <li class="layer" data-depth="0.00"><img src="http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/images/layer6.png"></li>
  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://file.town/uploads/0vcu7v43r3oy6c61syj37qury.js"></script>
Post Views: 2
Scroll to Top