1. 首页
  2. 问答
  3. 如何在滚动页面的同时逐渐调整图像大小？

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

2016-05-31 19 views
1

我不知道我怎么可以逐渐滚动上/下页面时调整图像的大小。如何在滚动页面的同时逐渐调整图像大小？

请看看这个例子：jsfiddle

.image { 
    opacity: .7; 
}

我想从页面的顶部向下滚动，向上滚动较大时，当红色的心脏变得更小。我会用这种技术在我的网站上有一些视差乐趣

谢谢你的帮助！

来源

2016-05-31 Devin Michaelson

+0

您已经为图片设置了'transform' CSS属性，只需在设置的CSS中添加'width'和/或'height'即可。另外，这段CSS与这个问题有什么关系？ –

回答

0

您可以使用变换：规模（），而不是变换：翻译（）。 transform：scale（）属性用于根据Scale调整对象的大小（即：在x，y轴上将translate（2,2）均值调整为double大小）。在这里，看看我的小，不洙顺利例如：

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

我改变图像位置固定，所以你可以看它时，它scroling：

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

    }); 
});

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

  • 我希望这可以帮到你。

来源

2016-05-31 22:52:22 DikaDikz

+0

非常感谢你@DikaDikz。这可以调整图像的大小。但我真的希望它越来越小，并将其向下移动。所以我把transform：translate（）放到脚本中。我可以同时这样做吗？ –

0

试试这个

$(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>

来源

2016-05-31 18:03:32 Jay

相关问题

 相关问题