hmm sanki anlamak üzereyim sorunu
ozaman şöyle başlayalım siteye belirli bir genişlik vermen gerekecek diylimki 5000px genişlikte 5 bölümlük bir site sen istiyorsunki ortadan yani 3. olan bölümden başlasın. Bunun için öncelikle js işlemlerinde ne yapman gerektiğinin mantığını anlatayım site 5000px bizim 3. sayfamız 2000pxden başlıyor 3000de bitiyor. Kullanıcının ekran genişliğini alacağız $(window).width() çıkan sonuç diyelimki 1920px bunun yarısı 960. 2500-960 = 1540 çıkar 5000 px olan orta alanımıza bu değeri margin-left: -1540px olarak veriyoruz. Sayfa ilk açıldığında 3. bölüm tam ortada çıkacaktır. Bundan sonrası içinde jquery Draggable (
https://jqueryui.com/demos/draggable/) ilede sağa sola çekme işlerini halledebilirsin.
Buarada bi detay daha sayfa resize edilince bu değerler tekrardan vermek gerekecek $(window).bind('resize',function(){}); bu kod yardımıylada tekrardan hesaplayıp margini ona göre değişeceksin. faydalı olmuştur umarım buna benzer bir lightbox yapmıştım örnek kod olarak inceleyebilirsin.
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend(jQuery.easing, {
easeOutBack: function (x, t, b, c, d, s) { if (s == undefined) s = 1.70158; return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; }
});
$(function () {
$("#closeLightbox").bind("click", function (ev) { $("#lightBoxCar").animate({ top: "-100px" }, { queue: false, duration: 1500, easing: 'easeOutBack' }).fadeOut(300); ev.preventDefault(); });
$('#lightBoxCar').css("display", "block").stop().animate({ left: ($(window).width() / 2) - ($('#lightBoxCar').width() / 2) + "px", top: ($(window).height() / 2) - ($('#lightBoxCar').height() / 2 + $(document).scrollTop()) + "px" }, { queue: false, duration: 1500, easing: 'easeOutBack' });
});
$(window).bind('resize', function () {
$('#lightBoxCar').stop().animate({left: ($(window).width() / 2) - ($('#lightBoxCar').width() / 2) + "px",top: ($(window).height() / 2) - ($('#lightBoxCar').height() / 2 + $(document).scrollTop()) + "px"}, { queue: false, duration: 1500, easing: 'easeOutBack' });
});
