1. 首頁
  2. 問答
  3. 如何在滾動頁面的同時逐漸調整圖像大小？

如何在滾動頁面的同時逐漸調整圖像大小？

2016-05-31 28 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

相關問題

 相關問題