CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rohit Girdhar
Rohit Girdhar

Reputation: 353

Parallax Issue in Javascript

I was creating a parallax effect in which the image and the text move in opposite direction to the movement of the mouse. That is happening inside an element called parallax-wrapper. But when I move out of the element I want the image and the text to return back to their original positions. I have tried to detect the mouse position outside the element but for some reason it not firing properly.

The codepen link is - https://codepen.io/rohitgd/pen/gRLNad?editors=1010

HTML

<div class="parallax-wrapper">
    <div class="layer" data-mouse-parallax="0.1">
    <img src="https://tympanus.net/Development/MorphingBackgroundShapes/img/1.jpg"/>
  </div>
    <div class="layer" data-mouse-parallax="0.3">REVERT</div>
</div>

CSS

    body {
        background-color:#fff;
        padding: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    }


    .parallax-wrapper {
        width: 500px;
        height: 300px;
        background-color:#0c0c0c;
        position: relative;
        overflow: hidden;

        .layer {
            width: 80%;
            height: 80%;
            position: absolute;
      left: 30px;
            text-align: center;
            line-height: 300px;
            font-size: 38px;
            color:#FFF;
            transition: all 200ms ease-out;
        }

    }

img {
  width: 200px;
  height: 200px;
  position: relative;
  top: 50px;
  right: 70px;
}

Javascript

$(".parallax-wrapper").mousemove(function(e) {
  var x = e.pageX - $(this).offset().left - $(this).width() / 2;
  var y = e.pageY - $(this).offset().top - $(this).height() / 2;

  $("*[data-mouse-parallax]").each(function() {
    var factor = parseFloat($(this).data("mouse-parallax"));
    x = -x * factor;
    y = -y * factor;

    $(this).css({ transform: "translate3d( " + x + "px, " + y + "px, 0 )" });
  });
});

$(document).mouseleave(function(e) {
    var target = $(e.target);

    if( !target.is("div.layer")) {
      alert('out of the element');
      e.stopPropagation();


    }
});

What I want is when the mouse is outside the parallax-wrapper the Image and the text return back to their original positions.

Upvotes: 1

Views: 392

Answers (3)

pid
pid

Reputation: 11597

I think a selector was wrong. Here's a correct version or see code below.

To show better when you are inside/outside I change the background color, that's better than an alert. When you leave the wrapper (the black background) it flips correctly now.

Where RED is set you can reset the transform to the origin.

// Trying to replicate the effect here - https://tympanus.net/Development/MorphingBackgroundShapes/

$(".parallax-wrapper").mousemove(function(e) {
  var x = e.pageX - $(this).offset().left - $(this).width() / 2;
  var y = e.pageY - $(this).offset().top - $(this).height() / 2;

  $(".parallax-wrapper").css("background-color", "#00ff00"); // <-- EXIT
  // reset transform here
  
  $("*[data-mouse-parallax]").each(function() {
    var factor = parseFloat($(this).data("mouse-parallax"));
    x = -x * factor;
    y = -y * factor;

    $(this).css({ transform: "translate3d( " + x + "px, " + y + "px, 0 )" });
  });
});

// this is the selector I changed from "document" to ".parallax-wrapper"
$(".parallax-wrapper").mouseleave(function(e) {
    var target = $(e.target);

    if( !target.is("div.layer")) {
      $(".parallax-wrapper").css("background-color", "#ff0000"); // <-- ENTER
      e.stopPropagation();


    }
});
	body {
		background-color:#fff;
		padding: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
	}


	.parallax-wrapper {
		width: 500px;
		height: 300px;
		background-color:#0c0c0c;
		position: relative;
		overflow: hidden;
		
		.layer {
			width: 80%;
			height: 80%;
			position: absolute;
      left: 30px;
			text-align: center;
			line-height: 300px;
			font-size: 38px;
			color:#FFF;
			transition: all 200ms ease-out;
		}
		
	}

img {
  width: 200px;
  height: 200px;
  position: relative;
  top: 50px;
  right: 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parallax-wrapper">
	<div class="layer" data-mouse-parallax="0.1">
    <img src="https://tympanus.net/Development/MorphingBackgroundShapes/img/1.jpg"/>
  </div>
	<div class="layer" data-mouse-parallax="0.3">REVERT</div>
</div>

Upvotes: 0

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

You're not resetting the transformations when your mouse leaves. You need to add this where you have the alert...

$(".parallax-wrapper").mouseleave(function(e) {
  $("*[data-mouse-parallax]").each(function() {
    $(this).css({ transform: "translate3d( 0, 0, 0 )" });
  });
});

Note that the mouseleave event is triggered when the mouse leaves .parallax-wrapper, not document as you previously had it.

Here's a modified codepen...

https://codepen.io/anon/pen/ZyBgYJ

Upvotes: 3

Jeremy Thille
Jeremy Thille

Reputation: 26360

Replace $(document).mouseleave with $(".parallax-wrapper").mouseleave.

$(".parallax-wrapper").mousemove(function(e) {
  var x = e.pageX - $(this).offset().left - $(this).width() / 2;
  var y = e.pageY - $(this).offset().top - $(this).height() / 2;

  $("*[data-mouse-parallax]").each(function() {
    var factor = parseFloat($(this).data("mouse-parallax"));
    x = -x * factor;
    y = -y * factor;

    $(this).css({ transform: "translate3d( " + x + "px, " + y + "px, 0 )" });
  });
});

$(".parallax-wrapper").mouseleave(function(e) {
      alert('out of the element');
});
body {
  background-color: #fff;
  padding: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parallax-wrapper {
  width: 500px;
  height: 300px;
  background-color: #0c0c0c;
  position: relative;
  overflow: hidden;
}
.parallax-wrapper .layer {
  width: 80%;
  height: 80%;
  position: absolute;
  left: 30px;
  text-align: center;
  line-height: 300px;
  font-size: 38px;
  color: #FFF;
  transition: all 200ms ease-out;
}

img {
  width: 200px;
  height: 200px;
  position: relative;
  top: 50px;
  right: 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parallax-wrapper">
	<div class="layer" data-mouse-parallax="0.1">
    <img src="https://tympanus.net/Development/MorphingBackgroundShapes/img/1.jpg"/>
  </div>
	<div class="layer" data-mouse-parallax="0.3">REVERT</div>
</div>

Upvotes: 0

Related Questions