如何滚动滚动背景图像
[英]How to rotate background image on scroll
问题描述
我正在尝试在滚动时旋转背景图像。 效果看起来像立方体。 可悲的是，我找不到使用CSS和jquery使其显示在视频中的方法 。 在gif上，当从图库向下滚动到下一页时，将显示格栅背景，该背景会根据显示的页面数量进行旋转和拉伸。
编辑： 旋转动画必须看起来像这样
到目前为止，我尝试了什么（失败）
$(function() { var rotation = 0, scrollLoc = 0; $(window).scroll(function() { $("#galerie").text($(document).scrollTop() + "=ScrollTop,WinHeight=" + $(window).height()); var newLoc = $(document).scrollTop(); var diff = scrollLoc - newLoc; rotation += diff, scrollLoc = newLoc; var rotationStr = "rotateX(" + rotation / ($(window).height() * 2) + "turn)"; $("#home").css({ "-webkit-transform": rotationStr, "-moz-transform": rotationStr, "transform": rotationStr, "background-size": -rotation }); }); })
body, html { height: 100%; } body { background-color: #090909; } #home { height: 100%; position: relative; overflow: hidden; } #galerie { color: green; } #home:before { content: ""; background-repeat: no-repeat; background-size: 100% auto; background-position: center bottom; background-color: grey; background-attachment: initial; position: absolute; width: 100%; height: 100%; z-index: -1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id=box> <div id="home"> TestText </div> </div> <div id="galerie"> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <div id="gale"> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> </body>
2 个解决方案
解决方案1
1 2018-07-13 01:28:30
我为您做了最重要的部分。 而且我敢肯定您会自己做最底层的（请参见整页模式下的代码段）：
$(function() { $(window).scroll(function() { $('#home_bg').css({ 'transform': 'rotateX(' + 30 * (1 + Math.PI * Math.atan($(document).scrollTop() / 300)) + 'deg)' }); }); })
html, body { height: 100%; margin:0 ;padding:0 } body { background-color: #333; } #home { height: 30vh; position: relative; overflow: hidden; perspective: 300px; color:#fff; text-align:center; } #home_bg { content: ""; background: repeating-linear-gradient(45deg, #555, #555 2px, transparent 0, transparent 60px), repeating-linear-gradient(-45deg, #555, #555 2px, transparent 0, transparent 60px) 30px 30px / 170px 170px; position: absolute; z-index: -1; top: -100%; left: -50%; width: 200%; height: 200%; transform: rotateX(30deg); transform-origin: 50% 100%; } #galerie { color: green; display: flex; justify-content: center; flex-flow: row wrap; width: 50%; margin: 0 auto 70vh; } #galerie img { width: 45%; margin: 0 auto 20px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="home"> <h1>Lorem ipsum?</h1> <div id="home_bg"></div> </div> <div id="galerie"> <p></p> <img src="https://picsum.photos/100/100?1"> <img src="https://picsum.photos/100/100?2"> <img src="https://picsum.photos/100/100?3"> <img src="https://picsum.photos/100/100?4"> <img src="https://picsum.photos/100/100?5"> <img src="https://picsum.photos/100/100?6"> </div> </body>
解决方案2
-2 2018-07-10 12:48:42
希望你这样
$(function() { var rotation = 0; var interval; var gear = $('.gear'); function animate() { gear.css('transform', 'rotate('+rotation+'deg)'); rotation += 10; rotation %= 360; } function startAnim() { if (!interval) { interval = setInterval(animate, 50); } } function stopAnim() { clearInterval(interval); interval = null; } $(document).scroll(startAnim).mouseup(stopAnim); });
body{ height: 1000px; } .gear{ background: url("https://cdn.pixabay.com/photo/2016/01/03/11/24/gear-1119298_960_720.png") no-repeat; width: 100%; height: 100px; position: fixed; background-position: center center; background-size: contain; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="gear"></div>
如何在jQuery中顺时针和逆时针滚动/旋转图像？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.