如何綁定圖片寬度以滾動某個高度？

我只是試圖附加圖像滾動，以便當用戶向下滾動圖像的大小/寬度會減少順利滾動一定的高度或反之。如何綁定圖片寬度以滾動某個高度？

平滑這樣link

我只是想從0像素降低圖像的大小與700像素流暢的動畫效果。

我用航點，綁定功能，addclass-刪除類，過渡（CSS）等等，但沒有成功。

我的航點代碼

jQuery代碼

$('#slide-1-base').waypoint(    // create a waypoint 
    function(direction) { 
     if (direction === 'down') { 
      $('.logo img').stop().animate({ "width" : "80%"}, 1000); 
     } 
     else { 
      $('.logo img').stop().animate({ "width" : "100%"}, 500); 
     } 
    });

HTML代碼

<div class="logo"> 
    <a href="#slide-1"> 
     <img src="assets/icon/logo.png"/> 
    </a> 
</div> 
<section id="slide-1" ></section>

來源

2015-02-24 Prashant Tapase

你有沒有你需要的例子？我真的不明白你在問什麼。你想讓圖像的大小與滾動高度成比例嗎？像？圖像總是保持在最高？這是一個固定的位置圖像嗎？ – Alexey 2015-02-24 13:04:12

@Alexey是的，圖片（徽標）將始終保持在最頂端，並且位置固定。你的寬度邏輯是正確的「orig_size/scroll_height」。但它應該是平滑的，爲大卷軸。 – 2015-02-24 13:12:42

檢查答案 – Alexey 2015-02-24 13:22:31

從您發表評論的回覆來看，這是你需要的 -

$(window).scroll(function() { 
    var scrollAmount = $(document).scrollTop(); // This returns how far away you are from top of your page. 
    var picWidth = 100; //Insert any value here for your picture size 
    //$('.logo img').css('width', picWidth - (scrollAmount/100)); 
    $('.logo img').animate({width:(picWidth - (scrollAmount/100))}, 100); 
});

這是一個粗略的表示。您需要更改函數的邏輯和數學運算，但這會根據頁面頂部的距離有多大來調整圖像大小。

來源

2015-02-24 13:22:22 Alexey

我的問題的確切答案。但是，我想要的並不平坦。 Smothness應該像animation（）函數。 – 2015-02-24 13:47:36

查看答案 – Alexey 2015-02-24 14:32:49

@感謝它的工作。但不能平滑'$（'。logo img'）。animate（{width：（picWidth - （scrollAmount/40））}，8）;' – 2015-02-27 07:09:27

If you want to reduce the size then there is scroll function. check this

http://jsfiddle.net/LLbAu/

來源

2015-02-24 12:46:59 dev9

感謝anusha回答我的問題。但我不希望這樣，因爲它不光滑**，它不能用於大高度**（我的情況是700px）。 http://jsfiddle.net/LLbAu/51/ – 2015-02-24 12:54:05

看起來你需要像這樣的東西：fiddle。我認爲（根據我從您的評論和以前的答案中看到的內容），您要檢查用戶正在使用的窗口的高度，並取決於您希望減少特定元素的寬度的回報。

$(window).scroll(function() { 
    if($(window).innerHeight() > 700){ 
     $('.box').animate({'width': '50'}); 
    }else{ 
     $('.box').animate({'width': '100'}); 
    } 

});

來源

2015-02-24 13:41:33 Michelangelo

不能正常工作。再次檢查 – 2015-02-24 13:48:52

絕對有效！滾動！它只是檢查滾動窗口的高度。當它超過700它動畫！滾動後請耐心等待，並確保窗口高度超過700px – Michelangelo 2015-02-24 13:52:47

是的，它正在工作，但它並不拘泥於滾動和突然工作。我只想用平滑的動畫將圖像的大小從0減小到700。 – 2015-02-24 13:56:45

如何綁定圖片寬度以滾動某個高度？

回答

相關問題