Reputation: 11
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