11 posts
  • Has been part of the Envato Community for over 6 years
  • Has collected 10+ items on Envato Market
  • Located in United States
bopjo1
says

Hi all,

Can anyone recommend a Jquery plugin that will do this:

http://www.onebiscaynetower.com/

Moving the mouse to the left or right moves the image smoothly in the opposite direction.

3868 posts Community Moderator
  • Helps us moderate the forums
  • Taught a course or tutorial on Tuts+
  • Located in Netherlands
  • Has been part of the Envato Community for over 6 years
+9 more
Joost
Moderator
says

When you right-click the image, you’ll notice it is in fact Flash ;) You can find a few similar items on ActiveDen by searching for pan.

Alternatively, I’d love to build it for you in either Flash or jQuery – contact me via the form on my profile if you’re interested :)

42 posts
  • Has been part of the Envato Community for over 4 years
  • Has sold $40,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
maguiar01
says

Hi bopjo1,

Since your profile says “web services”, i’m assuming that you have basic knowledge of html and javascript.

In your page, put jquery, create a div to be the container and put your panorama image inside it, like this:
    <div id="pano_container">
            <img src="my_panorama_img.jpg" id="pano_img" />
    </div>

then you can use this javascript to obtain the effect you want.

    <script>
        $(document).ready(function() {
            var pano      = $("#pano_container"),
                panoImg   = $("#pano_img"),
                w         = panoImg.width(),
                panoWidth = 600, // this is the width of the container in pixels
                cx        = (w-panoWidth)/panoWidth,
                lastx     = 0;
            pano.css({
                 width  : panoWidth,
                 height : panoImg.height(),
                 overflow : 'hidden'
            }).mousemove(function(e){
                var x = e.pageX-pano.offset().left; // mouse x coordinate relative to the container
                if (Math.abs(lastx-x)<=1) return; // only do something if the mouse X coordinate moved more than 1 pixel
                lastx = x;
                panoImg.stop(true)
                       .animate({ marginLeft : -cx*x }, 500, 'linear');
            });
        });
    </script>

I hope this helps you (at least to get started). I’m sorry i didn’t explain my answer better, but something came up here and i have to go.

Good luck.

11 posts
  • Has been part of the Envato Community for over 6 years
  • Has collected 10+ items on Envato Market
  • Located in United States
bopjo1
says

Wow thanks maguiar01! That works most excellently!

8575 posts Community Moderator
  • Located in United Kingdom
  • Has been part of the Envato Community for over 7 years
  • Helps us moderate the forums
  • Won a competition
+10 more
MSFX
Moderator
says

When you right-click the image, you’ll notice it is in fact Flash ;) You can find a few similar items on ActiveDen by searching for pan.

but he wanted it in JS :P

shouldn’t this be in TF?

11 posts
  • Has been part of the Envato Community for over 6 years
  • Has collected 10+ items on Envato Market
  • Located in United States
bopjo1
says

I have another question…I would like to place 2 images in the container, then float them left so they are stacked on top of each other. I would like the top image to fade out slowly, then after a while, fade back in. I used the code above, but I changed this line so that “pano_img” was a class instead of an ID:

panoImg = $(”.pano_img”)

Then I assigned the class to each image.

I doubled the container height to make sure they were moving in tandem. They were, so that’s all good.

But I want the top image to fade out, then fade back in. I gave it an ID of “first_photo” and used jquery to select it thusly:

$(”#first_photo”).fadeOut(“slow”);

..but it doesn’t seem to do anything.

What am I doing wrong?

3868 posts Community Moderator
  • Helps us moderate the forums
  • Taught a course or tutorial on Tuts+
  • Located in Netherlands
  • Has been part of the Envato Community for over 6 years
+9 more
Joost
Moderator
says


When you right-click the image, you’ll notice it is in fact Flash ;) You can find a few similar items on ActiveDen by searching for pan.
but he wanted it in JS :P

I must’ve miss-read his post and assumed he wanted the same thing as on the demo :o My bad.

42 posts
  • Has been part of the Envato Community for over 4 years
  • Has sold $40,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
maguiar01
says

bopjo,

Can’t say for sure without looking exactly at the code, but i guess that the problem is caused by the line

panoImg.stop(true)

this line stops all animations on the element, including the fadeout/fadein effect.

1045 posts
  • Became a Top 20 Author of the Month
  • Has sold $125,000+ on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Made it to the Authors' Hall of Fame
+10 more
Pixelworkshop
says

There are also a few parallax plugins for jquery, they can do this effect too I guess :)

by
by
by
by
by
by