Как сделать так, чтобы изображения выглядели, чтобы двигаться и вращаться? - PullRequest
Новая
       21

Как сделать так, чтобы изображения выглядели, чтобы двигаться и вращаться?

0 голосов
/ 03 октября 2019

Как я могу сделать так, чтобы изображения на моем сайте вращались / вращались подобно вращающейся спирали (не уверен, что термин)? Я хочу, чтобы изображения менялись и меняли положение, когда пользователь прокручивает. Вот ссылка на вращающуюся спираль. (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>
...