如何绑定图片宽度以滚动某个高度？

我只是试图附加图像滚动，以便当用户向下滚动图像的大小/宽度会减少顺利滚动一定的高度或反之。如何绑定图片宽度以滚动某个高度？

平滑这样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

如何绑定图片宽度以滚动某个高度？

回答

相关问题