ब्राउज़र स्क्रॉल धीमी छवियाँ गति - jquery, ब्राउज़र, स्क्रॉल, jquery-चेतन

मैं एक पेज बनाने की कोशिश कर रहा हूँ जहाँ मैं 3 "परतें" रख सकता हूँ। 1 - पृष्ठभूमि, 2 - चित्र और 3 - चित्र।

मैं पहले से ही है कि का उपयोग कर हासिल animate jQuery फ़ंक्शन और यह पूरी तरह से काम करता है जब मैं "मीनेविगेशन मेनू के साथ काम करना। हालाँकि, मुझे उपयोगकर्ता कंसोल / विंडो (इंटरनेट एक्सप्लोरर, क्रोम, फ़ायरफ़ॉक्स ...) स्क्रॉल करने पर समान प्रभाव पड़ता है। मुझे पता नहीं है कि मैं स्पष्ट हूँ इसलिए यह एक ऐसा पृष्ठ है जो मुझे मिला। एक समान प्रभाव के साथ: http://johanreinhold.com/

मैं थोड़ी देर के लिए खोज रहा हूं और मुझे अभी तक नहीं मिला। मैं इस समस्या को कैसे हल करूं?

के लिए मेरा कोड animate है

function goto(id)
{
$("html,body").animate({scrollTop: $("#"+id).offset().top},2000);
$("html,body").clearQueue();
}

उत्तर:

जवाब के लिए 2 № 1

मुझे पूरी तरह से यकीन नहीं है कि आपका क्या मतलब है (इसलिए मेरी माफी आप दोनों को और @mrtsherman अगर उसका जवाब "आप चाहते हैं), लेकिन मुझे लगता है कि आप पूछ रहे हैं कि लंबन स्क्रॉलिंग प्रभाव कैसे प्राप्त करें। आप जिस साइट से जुड़े हुए हैं, वह MooTools का उपयोग करती है

    $$("#floaters-0, #floaters-01, #floaters-02, #floaters-1, #floaters-11, #floaters-12, #floaters-2, #floaters-21, #floaters-22, #floaters-3, #floaters-31, #floaters-32").each(function(item) {
item.store("top", parseInt(item.getStyle("top")));
item.store("y", item.getPosition().y);
item.store("friction", parseFloat(item.get("data-friction")));
});

this.addEvent("scroll", verticalParallax);

function verticalParallax(e) {

var windowScrollY = window.getScroll().y;

$$("#floaters-0, #floaters-01, #floaters-02, #floaters-1, #floaters-11, #floaters-12, #floaters-2, #floaters-21, #floaters-22, #floaters-3, #floaters-31, #floaters-32").each(function(item) {

if ((windowScrollY) >= item.getPosition().y)
item.setStyle("top", item.retrieve("top") + (windowScrollY - item.retrieve("y")) * item.retrieve("friction"));
});
};

jQuery

मैंने इसे jQuery के लिए स्थानांतरित कर दिया है (किसी न किसी और तैयार तरीके से) और इसे यहाँ JSFiddle में चिपका दिया है http://jsfiddle.net/meloncholy/FhxZ3/1/

    $(function ()
{
$(".float").each(function ()
{
var $this = $(this);

$this.data("startTop", $this.offset().top);
});

$(window).scroll(function ()
{
var documentScrollTop = $(document).scrollTop();

$(".float").each(function ()
{
var $this = $(this);

$this.offset({ top: $this.data("startTop") + documentScrollTop * $this.data("friction"), left: $this.offset().left });
});
});
});

सीएसएस

    .float { display: block; left: 100px; position: fixed; }

#float-1 { top: 50px; }

#float-2 { top: 400px; }

#float-3 { top: 850px; }

.content { font-size: 48px; position: relative; z-index: 2; }

कोड हुक में है scroll ट्रिगर होने पर छवियों की स्थिति को व्यवस्थित और समायोजित करता है। स्क्रॉल की मात्रा को घर्षण संपत्ति द्वारा नियंत्रित किया जाता है, इसलिए इसे पर सेट करना 0.5 उदाहरण के रूप में उनका मतलब है कि उन्हें पाठ की आधी दर से आगे बढ़ना चाहिए। यह पता चला है (हालांकि मुझे लगता है कि यह पूर्वव्यापी में स्पष्ट है) कि यह लंबन तत्वों को निर्धारित करने के लिए महत्वपूर्ण है position: fixed या आप कुछ बुरा कूद जाओगे।

जैसा कि मैंने कहा, यह थोड़ा मोटा और तैयार है (विशेष रूप से अन्य साइटों में अक्सर केवल एक निश्चित ऊर्ध्वाधर विंडो में लंबन प्रभाव चलाते हैं), इसलिए आप Google को हिट करना चाहते हैं लंबन स्क्रॉल jquery या कुछ और इस पर एक नज़र डालें कि किसी और ने यह कैसे ठीक से किया। :)

---

जवाब के लिए 3 № 2

आपके सवाल को समझना मुश्किल है। आपके द्वारा लिंक किए गए पृष्ठ पर, मैं स्क्रॉल व्यवहार के किसी भी ओवरराइड को नहीं देखता, लेकिन मुझे लगता है कि आप स्क्रॉल व्हील के प्रत्येक टिक को अगले अनुभाग में भेजना चाहते हैं।

आपको स्क्रॉल ईवेंट को चुराने और डिफ़ॉल्ट व्यवहार को रोकने की आवश्यकता होगी। फिर यह पता लगाएं कि आप चीजों को कैसे स्क्रॉल करना चाहते हैं।

http://jsfiddle.net/VTEt8/1/

एचटीएमएल

<div id="a" class="section active">a</div>
<div id="b" class="section">b</div>
<div id="c" class="section">c</div>
<div id="d" class="section">d</div>
<div id="e" class="section">e</div>
<div id="f" class="section">f</div>

jQuery

//Capture mousewheel event for document window.
//we have to use two events because Firefox uses DOMMouseScroll.
$(document).bind("mousewheel", function(e) {
HandleScrollEvent(e, -1 * e.wheelDelta);
}).bind("DOMMouseScroll", function(e) {
HandleScrollEvent(e, e.detail);
});

function HandleScrollEvent(e, wheelDir) {
//Cancel the scroll event so the page doesn"t scroll.
e.preventDefault();

//Find current and next sections.
var curElement = $(".active");
var nextElement
if (wheelDir > 0)
nextElement = $(curElement).next(".section");
else {
nextElement = $(curElement).prev(".section");
}

//If we have a another section then go to it.
if ($(nextElement).length > 0) {
//set class of active section
$(curElement).removeClass("active");
$(nextElement).addClass("active");

//Scroll to next section through animation.
goto($(nextElement).attr("id"));
}
}

function goto(id) {
console.log(id);
$("html,body").animate({
scrollTop: $("#" + id).offset().top
}, 500);
$("html,body").clearQueue();
}

---