0

如何使我网站上的图像看起来以类似于旋转螺旋的方式旋转/旋转（不确定术语）？我希望图像在用户滚动时改变和改变位置。这是一个旋转螺旋的链接。（https://media1.giphy.com/media/3o7520F8VcFddZh2zm/giphy.gif?cid=790b76116354422bb61690c576ef59201c52c4ecacfe433d&rid=giphy.gif）

这是指向我的页面的链接，以说明我要进行旋转/旋转的内容。（https://wirkkalaj.wixsite.com/timetoh/test-page）我已经查找了几个关于用户滚动时图像行为的教程，但我没有找到与我需要的完全一样的东西......或者我可以不要让它工作！我想知道是否可以使用 css & javascript 来实现效果，或者我是否需要考虑使用 flash？

到目前为止，我大多只是尝试过这个脚本（下面的链接），或者这个脚本的变体=（滚动图像更改）到目前为止我遇到了很大的困难。我对javascript不是很熟悉，而且我一直迷路。我知道 HTML & CSS, & Photoshop。有人可以帮助我提供可行的方法或脚本吗？或者至少指出我正确的方向？仅供参考，我使用 wix 作为我的网络编辑器。谢谢法肖

// Array of images to swap between
var images = [];

// Add 200 items to array
for (i = 0; i < 200; i++) {
  images.push('http://placekitten.com/' + (100 + i) + '/' + (100 + i));
}

var totalImages = images.length;

var pageHeight = $(document).height() - $(window).height();

// Work out how often we should change image (i.e. how far we scroll between changes)
var scrollInterval = Math.floor(pageHeight / totalImages);

$(document).scroll(function() {
  // Which one should we show at this scroll point?
  i = Math.floor($(this).scrollTop() / scrollInterval);
  // Show the corresponding image from the array
  $('img').attr('src', images[i]);
  $('b').text('Frame: ' + i);
});
img,
b {
  position: fixed;
  top: 0;
  left: 0;
}

body {
  height: 10000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="http://placekitten.com/100/100" /><b>Frame: 0</b>

4

0 回答 0