CODEWITHSUNDEEP
htmlcssbackgroundmousemove
Chris
Chris

Reputation: 11

Moving background with my cursor

My website's landing page (http://www.chrisamaddeo.com/) has a full screen background. I want to make it move like an example of this website's header (http://www.kaiserair.com/) I have this code, HTML, which goes in the head of my website:

    <!DOCTYPE html>
    <html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
var movementStrength = 25;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$("#top-image").mousemove(function(e){
          var pageX = e.pageX - ($(window).width() / 2);
          var pageY = e.pageY - ($(window).height() / 2);
          var newvalueX = width * pageX * -1 - 50;
          var newvalueY = height * pageY * -1 - 25;
          $('#top-image').css("background-position", newvalueX+"px     "+newvalueY+"px");
});

I have this code, css and it doesn't work:

#top-image {
background:url('https://d3ui957tjb5bqd.cloudfront.net/images/screenshots/products/0/8/8905/red-rocks-park-o.jpg' -50px -25px;
position:fixed ;
top:0;
width:100%;
z-index:0;
}

My website is hosted with weebly and their html is a little different

Upvotes: 1

Views: 10056

Answers (3)

BLURSH
BLURSH

Reputation: 1

Simpler than that, you can just make sure the CSS position is set to "fixed" so wherever you are on the page it's always 0px from the top.

Upvotes: 0

Chris Boon
Chris Boon

Reputation: 1387

Actually, i've just tried copying your code: http://codepen.io/chrisboon27/pen/rEDIC

It does work, in that it moves the image. I did have to add some some closing braces to your jQuery but maybe you just missed those when you pasted the code into this question.

Also, I looked at your site and noticed you are currently using background-size:cover. This takes your bg image and makes it fit within the div - you dont want that as you want some bg extending beyond the div - so i'n the css in the example I linked to you can see I used calc to make the bg-image size to 100% width + 50px. I used 50px as your code currently moves the background image position by up to 25px left or right, therefore you need it to be 50px total wider than the div.

EDIT: If you use calc you should include a -webkit prefixed version too (unless you are using prefix-free or prefixr to add prefixes. Here is browser support: http://caniuse.com/calc If you need to support more browsers you will need to set background-size via javascript

Upvotes: 3

Chris Boon
Chris Boon

Reputation: 1387

I'm finding that quite hard to follow without recreating it and seeing where those numbers come from. However I recently made something very similar with jQuery for someone else except it moves an img within a div. It probably wouldn't take much to switch it to move a background image though (though finding out the bg-image dimensions would be tricky - you might be better hard coding them in that instance).

html:

<div class="container"><img src="foo.jpg" class="draggable"/>
</div>

jQuery:

//for each item
$(".container").each(function(){
  //get the container width
  var conWidth = $(this).width();
  //and its height
  var imgHeight = $(this).find("img").height();
  //get the nested img width
  var conHeight = $(this).height();
  //and its height
  var imgWidth = $(this).find("img").width();
  //figure out how much of the image is not visible horizontally
  var excessWidth = imgWidth - conWidth;
  //and how much is not visible vertically
  var excessHeight = imgHeight - conHeight;
  //how far is this container from the left of the page
  var containerPositionLeft = this.offsetLeft;
  //and from the top
  var containerPositionTop = this.offsetTop;

  //when moving mouse over container
  $(this).mousemove(function(e){
    //figure out how many pixels the mouse is from the left edge of the page
    var mouseoffLeftPage = e.pageX;
    //and how many from the top edge of the page
    var mouseoffTopPage = e.pageY;
    //figure out how many pixels the mouse is from the left edge of the page
    var mouseoffLeftPx = mouseoffLeftPage - containerPositionLeft;
    //and how many from the top edge of the page
    var mouseoffTopPx = mouseoffTopPage - containerPositionTop;
    //figure out the distance the mouse is from the left edge as a percentage (kind of - all the way to the right equals 1 not 100)
    var mouseoffLeftPercent = mouseoffLeftPx/conWidth;
    //do the same for height
    var mouseoffTopPercent = mouseoffTopPx/conHeight;
    //times the 'percentage' value by the amount of image hidden - so if your conatiner is 200px wide, your image 300px wide nd your mouse is half way across this value would be 0.5*100 which would give you 50 - which is exactly half the amount of image that is missing.
    //note this gets set as a minus value as we will be using a minus number to shift the image around.
    var setnewWidth = -(mouseoffLeftPercent * excessWidth);
    //do the same for the height
    var setnewHeight = -(mouseoffTopPercent * excessHeight);
    //add the values as css (using transform(translate) as it's more performant and does subpixel rendering so looks smoother [or does it? it does in animations but seems as my js is not technically animating it it might not make a difference in that respect] - could set the top,left version as fallback for unsupporting browsers but ie9 supports transforms anyway so i dont care.)
    $(this).find("img").css({"transform" : "translate("+ setnewWidth+"px ,"+setnewHeight+"px)" });
    //$(this).find("img").css({"left" : setnewWidth+"px", "top" : setnewHeight+"px" });
  }); 

});

Not a direct answer to what isn't working in your code, but shows an example (with comments on what is happening) of how it can be done - note that my version doesn't rely on you knowing any of the widths or heights of objects and can run on multiple items on one page - also it doesn't have to be placed at the very top of the page. It does assume the image is larger than its container though - if it isn't larger the image just moves around within it. You could reduce the number of variables by doing more calculations in a row, I just wanted it to be as easy to read the logic as possible.

DEMO: http://codepen.io/chrisboon27/pen/BhkJq

Upvotes: 2

Related Questions