Parallax Issue in Javascript

Question

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.

Reinstate Monica Cellio · Accepted Answer · 2017-06-16 14:21:10Z

3

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

edited Jun 16, 2017 at 14:21

answered Jun 16, 2017 at 14:16

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Chiller Over a year ago

I think its better to use .mouseout() in this case

Reinstate Monica Cellio Over a year ago

@Chiller That would fire the event handler when the mouse leaves the child elements as well. In this case mouseleave is easier and cleaner (it means you don't have to handle and ignore those extra events).

Rohit Girdhar Over a year ago

Thank you for the answer. I combined your answer with the answer by @pid. Now it's working exactly as desired!

Reinstate Monica Cellio Over a year ago

No worries - glad it helped :)

pid · Accepted Answer · 2017-06-16 14:23:13Z

0

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>

edited Jun 16, 2017 at 14:23

answered Jun 16, 2017 at 14:16

pid

11.6k6 gold badges37 silver badges67 bronze badges

4 Comments

Rohit Girdhar Over a year ago

Thanks a lot! This was exactly what I was looking for. Instead of changing the background colour I did what @Archer wrote. Now it works perfectly fine!

pid Over a year ago

glad to help. but there's another bug in your code, i think it's because of the CSS. when you leave the wrapper to the top it doesn't fire the event. most probably there's a positioning issue and you should use a different way to position the wrapper through CSS. but that's the matter of another question, without the parallax etc. WAIT or maybe not. I noticed this only happens on codepen. here on SO it's working fine

pid Over a year ago

it's definitely a codepen issue, test if it's on your website, too!

Rohit Girdhar Over a year ago

Yes, it's an issue only on codepen. Works fine everywhere else.

Jeremy Thille · Accepted Answer · 2017-06-16 14:18:45Z

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>

Collectives™ on Stack Overflow

Parallax Issue in Javascript

3 Answers 3

4 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related