-3

My inspiration is http://www.diesel.com/bags-female. Can anyone explain how I can achieve this effect?

I have started with this code: 

  $(document).ready(function(){
    $('#background-thing').mousemove(function(e){
      var mousePos = (e.pageX/$(window).width())*100;
      $('#background-thing').css('backgroundPosition', mousePos+'% 0');
      //alert(mousePos);
    }); 
  });

But it only pans the background image. I wish to have multiple links over the background image which are anchors and clicking on those images will make a zoom effect on that particular coordinate.

Should I rather look at a jQuery plugin? If so, what are your recommendations?

subho das
  • 391
  • 4
  • 7
  • 15
  • You can check this - http://lodep.com/best-free-parallax-scrolling-jquery/ and http://www.jqueryscript.net/tags.php?/parallax/ if you find them useful. – Vishnu Haridas Nov 28 '13 at 04:10

3 Answers3

1

I've used skrollr in the past for quick implementations and it's served me quite well.

Here are some links:

https://github.com/Prinzhorn/skrollr

http://prinzhorn.github.io/skrollr/

Hope that helps, good luck!

jmdb
  • 249
  • 1
  • 4
0

I don't think you want or need any Jquery plugin for what you're doing.

That page you provided for reference uses css 3d transforms and default Jquery. Here's the reference for that on W3schools: http://www.w3schools.com/css/css3_3dtransforms.asp

Specifically something like:

//clearly broken code used just for example
$(document).ready(function(){
    $('#yourpagecontainer').on("click","a",function(){
        $(this).css("transform", "scale3d("+x+","+y+","+z+")");
    }
}

The code you've provided doesn't make it clear what exactly you have to far, but maybe you'd benefit from taking a look at this example: http://sarasoueidan.com/blog/windows8-animations/

It's not identical, but it is in the span of what you'd like to do.

Max Caldwell
  • 57
  • 6
0

I don't think your example strictly fits the definition of "parallax" like this site. I'm pretty sure you could achieve something similar to your example with:

  1. Changing the CSS3 background size and position on click (as explain in this question and here).
  2. Applying a partially transparent .png with a fully transparent "window" in the center over the entire window on click to achieve that same blurred/focus look. You can apply different filters on the partially transparent areas to get something more artistic looking. Inkscape does this quite well and it is free ;)

This is not a cross browser solution, however. Everybody say "Internet Explorer" (8 and below). For 9 and above make sure you have <!DOCTYPE html /> otherwise your CSS3 becomes CSSFAIL.

Fun project, enjoy :)

Community
  • 1
  • 1