Question

我想知道如何在向上/向下滚动页面时逐渐调整图片大小。

请看一下这个例子：jsfiddle

.image {
  opacity: .7;
}

我希望从页面顶部向下滚动时红心变小，向上滚动时变大。我将使用这种技术在我的网站上获得视差的乐趣

感谢您的帮助！

Answer 1

试试这个

$(window).scroll(function(){
  var Scrolling = $(this).scrollTop();
  $('.image').css({
    'transform' : 'translate(0px, '+ Scrolling/3 +'%)'
  });
});

.image {
  opacity: .7;
  width:300px;
  height:300px;
}

img{
  width:100%;
  height:auto;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<body>

<div class="image">
  <img src="http://www.clker.com/cliparts/C/m/R/8/C/K/small-red-heart-with-transparent-background.svg">
</div>

<div class="container">
  <p>
Lorem ipsum dolor sit amet, viverra cras, magna porta sem at aenean sodales id, porta molestiae nibh nunc nulla mattis. Tellus turpis a ligula vestibulum lacus, quis massa sed. Gravida nulla aenean amet et, sed in ac enim lacus vel turpis, aenean ac platea, amet aenean ac pede rutrum mauris accumsan. Gravida elementum, pede adipiscing rutrum commodo, morbi vestibulum adipiscing nulla curabitur at amet, curabitur ac phasellus sed. Non in wisi morbi, libero quis arcu sit montes elit, augue euismod at, orci nullam nibh non. A magnis et eu, non felis hendrerit nec ipsum adipiscing hendrerit, morbi volutpat massa blandit a varius. Curabitur vitae est. Eget praesent sed est mauris felis, sed neque suspendisse non dictum.
    <br></br>
Commodo platea, congue curabitur placerat consectetuer placerat per pede, tellus nunc phasellus velit sociis repellat congue. Id sit mollis erat, mauris quam, ipsum tellus ut sit mauris arcu ac. Purus venenatis rutrum orci euismod duis a, semper libero pede tristique ultrices ac, pretium sociis orci posuere rhoncus et at, mi leo, leo per magna nec rutrum wisi. Sed penatibus sed scelerisque elit leo, purus dolor pharetra aliquam. Id egestas ipsum. A interdum vehicula, eget vitae eu libero donec a, vivamus venenatis fermentum. Accumsan suspendisse nam vel et eros varius, purus mauris, vel duis aptent ligula in velit, nec lacus urna pulvinar nunc vestibulum. Wisi vel neque ullamcorper adipiscing, tellus vitae eros tortor distinctio, nec non ut eleifend lectus donec et, nullam dui sed, imperdiet nam aliquam sodales. Ut at nibh molestie quis velit. Ac sit turpis, tellus ultricies semper, donec sagittis tellus venenatis, ac lacus montes. Nulla malesuada potenti natoque hac, aenean consequat at magna habitasse urna, suscipit nonummy mauris metus aliquam, diam id suspendisse.
<br></br>
Dui et quis eleifend lorem faucibus ac, a fusce dui semper arcu, nonummy magna et adipiscing tristique, maecenas non. Ut commodo sit sem nibh enim, dolor eget vel justo mauris lacinia lacinia, id erat aenean laoreet, vitae gravida convallis posuere mattis rutrum. A lacus odio, molestie nulla vehicula, risus neque ac augue nulla fusce feugiat, nascetur lacus, tincidunt faucibus wisi lorem velit justo sollicitudin. Tempor potenti mollis. Amet eu ut dictum posuere cupidatat in, vitae placerat mi quis justo, cursus vitae montes, sit eget eget non tempor, torquent arcu nec nibh. Ut per pellentesque, wisi tempus varius nulla malesuada. Ut nisl vitae vitae wisi sed, massa accumsan sem diam eros ante vitae, ullamcorper dui magna justo vestibulum vel praesent, eget morbi, sed vel vestibulum fringilla imperdiet. Nunc iaculis nulla in pellentesque dolor. Nibh vel ac nibh, vel aenean non vestibulum habitasse justo, velit placerat debitis condimentum sodales. Nunc eget quam mauris tellus et adipiscing, duis dictumst malesuada dignissim, eget vivamus tortor. Augue vitae.
<br></br>
Adipiscing orci, quam vel praesent per blandit elementum ut, sodales ornare tempora odio pretium lacus mattis. Rem eget laudantium ut quisque, integer dictum eu nonummy ipsum commodo, accumsan elementum iaculis vulputate fugiat, nec augue bibendum mattis. Blandit magna blanditiis sagittis risus ante integer. Eget et sed, placerat eget sollicitudin mauris amet proin, egestas scelerisque rhoncus orci. Aliquam dolor volutpat non eu turpis. Ornare tortor. Sed vestibulum amet porttitor platea, felis ut dapibus id, cursus ut velit pede cum amet consequat.
Lorem ipsum dolor sit amet, viverra cras, magna porta sem at aenean sodales id, porta molestiae nibh nunc nulla mattis. Tellus turpis a ligula vestibulum lacus, quis massa sed. Gravida nulla aenean amet et, sed in ac enim lacus vel turpis, aenean ac platea, amet aenean ac pede rutrum mauris accumsan. Gravida elementum, pede adipiscing rutrum commodo, morbi vestibulum adipiscing nulla curabitur at amet, curabitur ac phasellus sed. Non in wisi morbi, libero quis arcu sit montes elit, augue euismod at, orci nullam nibh non. A magnis et eu, non felis hendrerit nec ipsum adipiscing hendrerit, morbi volutpat massa blandit a varius. Curabitur vitae est. Eget praesent sed est mauris felis, sed neque suspendisse non dictum.
<br></br>
Commodo platea, congue curabitur placerat consectetuer placerat per pede, tellus nunc phasellus velit sociis repellat congue. Id sit mollis erat, mauris quam, ipsum tellus ut sit mauris arcu ac. Purus venenatis rutrum orci euismod duis a, semper libero pede tristique ultrices ac, pretium sociis orci posuere rhoncus et at, mi leo, leo per magna nec rutrum wisi. Sed penatibus sed scelerisque elit leo, purus dolor pharetra aliquam. Id egestas ipsum. A interdum vehicula, eget vitae eu libero donec a, vivamus venenatis fermentum. Accumsan suspendisse nam vel et eros varius, purus mauris, vel duis aptent ligula in velit, nec lacus urna pulvinar nunc vestibulum. Wisi vel neque ullamcorper adipiscing, tellus vitae eros tortor distinctio, nec non ut eleifend lectus donec et, nullam dui sed, imperdiet nam aliquam sodales. Ut at nibh molestie quis velit. Ac sit turpis, tellus ultricies semper, donec sagittis tellus venenatis, ac lacus montes. Nulla malesuada potenti natoque hac, aenean consequat at magna habitasse urna, suscipit nonummy mauris metus aliquam, diam id suspendisse.
<br></br>
Dui et quis eleifend lorem faucibus ac, a fusce dui semper arcu, nonummy magna et adipiscing tristique, maecenas non. Ut commodo sit sem nibh enim, dolor eget vel justo mauris lacinia lacinia, id erat aenean laoreet, vitae gravida convallis posuere mattis rutrum. A lacus odio, molestie nulla vehicula, risus neque ac augue nulla fusce feugiat, nascetur lacus, tincidunt faucibus wisi lorem velit justo sollicitudin. Tempor potenti mollis. Amet eu ut dictum posuere cupidatat in, vitae placerat mi quis justo, cursus vitae montes, sit eget eget non tempor, torquent arcu nec nibh. Ut per pellentesque, wisi tempus varius nulla malesuada. Ut nisl vitae vitae wisi sed, massa accumsan sem diam eros ante vitae, ullamcorper dui magna justo vestibulum vel praesent, eget morbi, sed vel vestibulum fringilla imperdiet. Nunc iaculis nulla in pellentesque dolor. Nibh vel ac nibh, vel aenean non vestibulum habitasse justo, velit placerat debitis condimentum sodales. Nunc eget quam mauris tellus et adipiscing, duis dictumst malesuada dignissim, eget vivamus tortor. Augue vitae.
<br></br>
Adipiscing orci, quam vel praesent per blandit elementum ut, sodales ornare tempora odio pretium lacus mattis. Rem eget laudantium ut quisque, integer dictum eu nonummy ipsum commodo, accumsan elementum iaculis vulputate fugiat, nec augue bibendum mattis. Blandit magna blanditiis sagittis risus ante integer. Eget et sed, placerat eget sollicitudin mauris amet proin, egestas scelerisque rhoncus orci. Aliquam dolor volutpat non eu turpis. Ornare tortor. Sed vestibulum amet porttitor platea, felis ut dapibus id, cursus ut velit pede cum amet consequat.
Lorem ipsum dolor sit amet, viverra cras, magna porta sem at aenean sodales id, porta molestiae nibh nunc nulla mattis. Tellus turpis a ligula vestibulum lacus, quis massa sed. Gravida nulla aenean amet et, sed in ac enim lacus vel turpis, aenean ac platea, amet aenean ac pede rutrum mauris accumsan. Gravida elementum, pede adipiscing rutrum commodo, morbi vestibulum adipiscing nulla curabitur at amet, curabitur ac phasellus sed. Non in wisi morbi, libero quis arcu sit montes elit, augue euismod at, orci nullam nibh non. A magnis et eu, non felis hendrerit nec ipsum adipiscing hendrerit, morbi volutpat massa blandit a varius. Curabitur vitae est. Eget praesent sed est mauris felis, sed neque suspendisse non dictum.
<br></br>
Commodo platea, congue curabitur placerat consectetuer placerat per pede, tellus nunc phasellus velit sociis repellat congue. Id sit mollis erat, mauris quam, ipsum tellus ut sit mauris arcu ac. Purus venenatis rutrum orci euismod duis a, semper libero pede tristique ultrices ac, pretium sociis orci posuere rhoncus et at, mi leo, leo per magna nec rutrum wisi. Sed penatibus sed scelerisque elit leo, purus dolor pharetra aliquam. Id egestas ipsum. A interdum vehicula, eget vitae eu libero donec a, vivamus venenatis fermentum. Accumsan suspendisse nam vel et eros varius, purus mauris, vel duis aptent ligula in velit, nec lacus urna pulvinar nunc vestibulum. Wisi vel neque ullamcorper adipiscing, tellus vitae eros tortor distinctio, nec non ut eleifend lectus donec et, nullam dui sed, imperdiet nam aliquam sodales. Ut at nibh molestie quis velit. Ac sit turpis, tellus ultricies semper, donec sagittis tellus venenatis, ac lacus montes. Nulla malesuada potenti natoque hac, aenean consequat at magna habitasse urna, suscipit nonummy mauris metus aliquam, diam id suspendisse.
<br></br>
Dui et quis eleifend lorem faucibus ac, a fusce dui semper arcu, nonummy magna et adipiscing tristique, maecenas non. Ut commodo sit sem nibh enim, dolor eget vel justo mauris lacinia lacinia, id erat aenean laoreet, vitae gravida convallis posuere mattis rutrum. A lacus odio, molestie nulla vehicula, risus neque ac augue nulla fusce feugiat, nascetur lacus, tincidunt faucibus wisi lorem velit justo sollicitudin. Tempor potenti mollis. Amet eu ut dictum posuere cupidatat in, vitae placerat mi quis justo, cursus vitae montes, sit eget eget non tempor, torquent arcu nec nibh. Ut per pellentesque, wisi tempus varius nulla malesuada. Ut nisl vitae vitae wisi sed, massa accumsan sem diam eros ante vitae, ullamcorper dui magna justo vestibulum vel praesent, eget morbi, sed vel vestibulum fringilla imperdiet. Nunc iaculis nulla in pellentesque dolor. Nibh vel ac nibh, vel aenean non vestibulum habitasse justo, velit placerat debitis condimentum sodales. Nunc eget quam mauris tellus et adipiscing, duis dictumst malesuada dignissim, eget vivamus tortor. Augue vitae.
<br></br>
Adipiscing orci, quam vel praesent per blandit elementum ut, sodales ornare tempora odio pretium lacus mattis. Rem eget laudantium ut quisque, integer dictum eu nonummy ipsum commodo, accumsan elementum iaculis vulputate fugiat, nec augue bibendum mattis. Blandit magna blanditiis sagittis risus ante integer. Eget et sed, placerat eget sollicitudin mauris amet proin, egestas scelerisque rhoncus orci. Aliquam dolor volutpat non eu turpis. Ornare tortor. Sed vestibulum amet porttitor platea, felis ut dapibus id, cursus ut velit pede cum amet consequat.
  </p>
</div>

</body>

Answer 2

你可以使用transform：scale（）而不是transform：translate（）。 transform：scale（）属性用于根据Scale调整对象大小（即：translate（2,2）意味着在x，y轴上调整大小为double大小）。在这里，看看我的小，不是太平滑的例子：

.image {
  opacity: .7;
  position:fixed;
}

我将图像位置更改为固定，因此您可以在滚动时查看它：

$(window).scroll(function(){
   var Scrolling = $(this).scrollTop();
   $('.image').css({
     'transform' : 'scale('+1/(Scrolling/30)+','+ 1/(Scrolling/30)+')'

   });
});

，这是JSfiddle链接：https://jsfiddle.net/8anvra8j/3/

我希望这有帮助。

如何在滚动页面的同时逐步调整图像大小？

2 个答案: