0

How can I make the images on my site appear to rotate/spin in a way similar to a spinning helix (not sure of term)? I want the images to change-and change position, when a user scrolls. Here is a link to a spinning helix. (https://media1.giphy.com/media/3o7520F8VcFddZh2zm/giphy.gif?cid=790b76116354422bb61690c576ef59201c52c4ecacfe433d&rid=giphy.gif)

Here is a link to my page to illustrate what I'm trying to make rotate/spin. (https://wirkkalaj.wixsite.com/timetoh/test-page) I've looked up several tutorials on image behavior when a user scrolls, but I have not found anything exactly like what I need...or I just can't make it work! I'm wondering if the effect can be achieved with css & javascript or if I need to consider flash?

So far I have mostly just tried this script (link below), or variations of this script=(Image change on scroll) I am having major difficulties so far. I am not very familiar with javascript and I keep getting lost. I know HTML & CSS, & Photoshop. Can somebody help me out with a method or a script that will work? Or at least point me in the right direction? FYI I am using wix as my web editor. Thanks fasho 

// 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>
Bob Arnson
  • 21,377
  • 2
  • 40
  • 47
Jonathan Patrick
  • 1
  • Are you trying to animate only that image or have an actual helix effect? Maybe this can give ideas: https://codepen.io/coopman/pen/MaQbwO – MistaPrime Oct 03 '19 at 13:07
  • _if I need to consider flash?_ No. Never. – disinfor Oct 03 '19 at 15:15
  • Are you writing this code directly onto the Page or are you making use of an HTML Component? – Shan Oct 03 '19 at 15:20
  • Thanks for the replies. Mista- That helix idea is similar except I do not want the screen to scroll at all. When a user scrolls, the helix will rotate, but the page will stay stationary?... Here is an example .gif of what I'm trying to accomplish. https://wirkkalaj.wixsite.com/timetoh/rotating-gif – Jonathan Patrick Oct 10 '19 at 03:37
  • Yes, I believe I will need to use and html component, but if there is a way on Wix to do it without one I am game. – Jonathan Patrick Oct 10 '19 at 03:38
  • Actually Mista, I think that helix example might actually work for me. I just need to change the style a little bit. Thanks – Jonathan Patrick Oct 10 '19 at 04:58

0 Answers0