So SWXI
So SWXI

Reputation: 11

moving background image back to initial position with jquery

I'm trying to get a piece of code to work the way I would like it, so far i have a script moving background image (.item) according to mouse moves. The problem is that I need to have it back into initial position on mouse leave/mouse out...

here is the raw code I have so far :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
(function($){
    $.fn.backgroundMove=function(options){
            var defaults={
            movementStrength:'50'
        },
        options=$.extend(defaults,options);

         var $this = $(this);

           var movementStrength = options.movementStrength;
            var height = movementStrength / $(window).height();
            var width = movementStrength / $(window).width();
            $this.mousemove(function(e){
                      var pageX = e.pageX - ($(window).width() / 2);
                      var pageY = e.pageY - ($(window).height() / 2);
                      var newvalueX = width * pageX * - 10;
                      var newvalueY = height * pageY * - 10;
                      $this.css("background-position", newvalueX+"px" +newvalueY+"px");
            });

        }
})(jQuery);
</script>

<script type="text/javascript">
$(function() {

$('.item').backgroundMove({
  movementStrength:'50'
});

});
 </script>

<script type="text/javascript">
//moving back to initial position ??
</script>

Upvotes: 0

Views: 144

Answers (0)

Related Questions