Infinite bar-less scroll for 360 view?

Authoring Twine
1

Hello all!
SugarCube 2.30.0

So the goal is to have a view where you can continuously turn 360 degrees.

I was wondering if there was a way to do that with infinite scrolling, using keys like A and D or the arrow keys to have it scroll left or right. What would one use to do something like that?
I have a picture that is loopable, I just need a way to loop it.

Thank you all!

2

You can use a combination of JavaScript & CSS to change the current value of background-position-x attribute of the background image, and you can use the jQuery animate() function to animate that change.

The following example is based on this jsFiddle code by nikdtu, it demonstrates the basic principles required to use the animate() function to alter the background-position-x attribute of an image shown in a specific HTML element.

1: Passage content to create an area to show the 360 dec background image in, and the two links used to rotate it.

<div id="skyline"></div>
<<nobr>>
	<<button "Turn Left">>
		<<run $('#skyline').animate({'background-position-x': '-=5%' }, 250, 'linear')>>
	<</button>>

	<<button "Turn Right">>
		<<run $('#skyline').animate({'background-position-x': '+=5%' }, 250, 'linear')>>
	<</button>>
<</nobr>>

2: CSS code to display & style the 360 dec background image. To be placed in your project’s Style Stylesheet area.

#skyline {
	background: url('https://i.stack.imgur.com/suKT3.jpg');
	background-size: cover;

	margin: 0 auto;
	width: 300px;
	height: 300px;
	overflow: hidden;
	position: relative;
	color: #fff;
}
3

Would this be able to move items along with the background? I was thinking of using scroll because I saw a carousel that looped seamlessly along with buttons and such, but I don’t remember how I found it, or whether I was able to use it.

4

Is there a way to do css animations with no fixed start and end position, just a rate and direction?
I’m able to animate it to loop in one direction, pausing and unpausing it from the keyboard with Chapel’s event macro, but of course if I want it to go two directions it’ll be jumping (I tried reversing, but that also reverses the position).

And of course, css animations will be problematic if I want to have objects that are animated that I want to scroll back and forth but not pause meanwhile. If there is a way to do an infinite scroll that would be best in all ways.

5

Isn’t it a more or less common thing to have an infinite carousel? Here’s one I found:


If I could somehow get this to work smoothly, like normal scrolling up and down on a page, that would be exactly what I want I believe.
6

That example uses a different technique to achieve the "scroll’ effect.
When ‘scrolling’ to the right it removes the first element of the horizontal un-order list and adds it to the end of list, which produces the ‘scroll right’ effect, when ‘scrolling’ to the left it does the reverse. eg. removes the last element and adds it the start of the list.