Member Avatar for anuran

iam trying to create a smotth transition between 3 images inside a div using jquery. i have managed to get the needed opacity transition on moving mouse to any side of the div.Now i want to have some change in position also like this Click Here

But iam changing the left css propery but keeps on changing and doesnt stop.

html code is

<head>
    <meta charset="utf-8" />
    <title>testing sliding animation</title>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <script src="scripts/slider.js"></script>
    <link rel="stylesheet" type="text/css" href="style/main.css">
    <link rel="stylesheet" type="text/css" href="style/slide.css">
</head>
<body>
<div id="header">
</div><div id="slider" >
<div id="imagecontainer">
<img class="portrait" id = "img1" src = "images/cropp1.png">
<img class="portrait" id = "img2" src = "images/cropp1-2.png" >
<img class="portrait" id = "img3" src = "images/cropp2.png">
</div>
</div><div id="footer">
</div>
</body>

css code

#slider{
    position:relative; 
    width:100%; 
    height:100%;
    background:#FFF;
    margin:0;
    padding:0;

}
#slider .portrait{
    display:block;
    height:500px;
    width:453px; 
    position:absolute; 
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding:0;
}
#slider #img1{
    z-index:1;
}
#slider #img2{
    z-index:2;
}
#slider #img3{
    z-index:3;
}

javascript code is

    $(function(){
    var $win = $(window),
    w = 0,h = 0,
    opacity = 1,
    getWidth = function() {
        w = $win.width();
        h = $win.height();
    };
    $win.resize(getWidth).mousemove(function(e) {

        opacity = (e.pageX/w)*2;
        $("#img1").css({'opacity':function(){
                                if(e.pageX<(w/2)) 
                                        return 1;
                                else 
                                        return 0;//2-opacity;
                                        }
                                    });
        $("#img2").css({'opacity':function(){
                                if(e.pageX<(w/2)) 
                                        return opacity;
                                else 
                                        return 1;//2-opacity;
                                        }
                                    });
        $("#img3").css({'opacity':opacity-1});
        $("#slider").animate({left:'+=' + e.pageX + 'px'},"slow","easeout");


    }).resize();



});
  • 2 Contributors
  • 5 Replies
  • 440 Views
  • 41 Minutes Discussion Span
  • Latest Post Latest Post by anuran

Dani AI

Generated

Short answer: the shifting happens because you’re incrementing the container on every mousemove (the '+=' pattern) and queuing animations. Fix by computing a single absolute target from the mouse position (relative to the slider’s center), and update it with either a throttled animate or with requestAnimationFrame + CSS transforms. Also measure against the slider element (not the whole window) and clamp values so targets never explode.

A simple, robust approach (uses jQuery only to read events/set CSS, no continuous .animate() calls on mousemove):

// sketch: use rAF, map mouse X to a -1..1 range, then to pixels
var $slider = $('#slider'), $container = $('#imagecontainer'), maxShift = 80;
var lastX = 0, ticking = false;

$slider.on('mousemove', function(e){
  lastX = e.pageX - $slider.offset().left;
  if (!ticking) { requestAnimationFrame(update); ticking = true; }
});

function update(){
  ticking = false;
  var w = $slider.width(), rel = (lastX - w/2) / (w/2);
  rel = Math.max(-1, Math.min(1, rel));
  var tx = Math.round(rel * maxShift);
  $container.css('transform', 'translate3d(' + tx + 'px,0,0)');
  // set opacities (example): middle = 1 - |rel|, left = rel<0 ? |rel| : 0, right = rel>0 ? rel : 0
}

Notes and troubleshooting

  • Replace maxShift to taste; negative/positive direction depends on how your images are ordered.
  • If you prefer jQuery’s .animate(), call .stop(true) immediately before .animate() and use an absolute target (not '+=') to avoid queueing.
  • Use transform: translate3d(...) instead of changing left — it’s far smoother (GPU-accelerated). Add will-change: transform on the moving element for extra polish.
  • Measure against the slider element, not window width, so the center logic works on any layout.

— your opacity mapping in the fiddle is a good start; the missing piece is switching from relative increments to a single clamped target (and throttling). ’s theme link is a different full-screen approach and not necessary for this specific centered/edge parallax effect.

Recommended Answers

All 5 Replies

Member Avatar for anuran

So in the middle one image will be visible and stay at center, and at the ends one of the image will be visible with shifted positions.

Edited by anuran
Member Avatar for anuran

It has to use Jquery animation but iam unable to get it.the image keeps on shifting if i use e.pageX value to update the left css property

Edited by anuran
Member Avatar for anuran

here is a working example , but how do i change the position with jquery

Member Avatar for Member #46692

Are you trying to create something like this:

Member Avatar for anuran

No but like this http://www.adhamdannaway.com/ ,
with fading effects like this

Edited by anuran
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.