10

My question is about an answer given by user ByteHamster here: How to create JavaScript/HTML5 Spinner List with images? in the answer he/she gives an example of how to create a scrolling animation with html, css and Javascript. The animation allows the user to scroll through the numbers by clicking above or below the selected number on screen, and the selected number is shown in a div below the animation.

I was wondering if it’s possible to do something similar to this but instead of having an image moving up and down, can it be turned into a number wheel? By that I mean, in the example above, the scrolling stops in one direction once the number reaches 0, I’m wondering if it’s possible to create a wheel, where a user could constantly spin it from top to bottom, or bottom to top if they wished to do so. Would this require using 3d interactive animation software?

I've seen this question: HTML5/CSS3 - how to make "endless" rotating background - 360 degrees panorama but I'm unsure if the answers are applicable to my project as they don't seem to be interactive.

As user ByteHamster's answer is over 3 years old, I was wondering if there’s a better way to achieve this effect with a html5 animation? And am I correct in thinking that the Javascript in the example would make it not work on some devices/browsers that don’t have Javascript enabled? Would a html5 approach be the best way to ensure the effect works on most devices/browsers?

10
  • Could you describe the expected result a bit more - should it be vertical or horizontal? I made a small plugin to do animated scrolling with requestAnimationFrame, are the boxes that resemble a slot machine similar to what you are after? If you want any event interaction, JavaScript will definitely be needed. But only a fraction of a percentage of users will have it disabled. ataredo.com/morphology/lucidscroll – Shikkediel Oct 16 '15 at 8:25
  • Hi @shikkediel thanks for your reply. The result I'm looking for is a vertical wheel-like effect. It is similar to how a dial on a slot machine rotates, imagine looking at one of the wheels from this image face on: theresasheridan.com/wp-content/uploads/images/… the wheel has the numbers 0 to 9 on it, and as the user clicks/drags the wheel in either direction (up or down) the wheel rotates vertically so show a different number facing the viewer. – Emily Oct 16 '15 at 9:03
  • For example, if the number facing the viewer is 5, and the viewer clicks below the 5 (or clicks on the wheel and drags it downwards (on touchscreen devices)) then the wheel should rotate and rest with the 4 facing the viewer. I hope I've clarified what I'm trying to achieve, thanks again for your advice. – Emily Oct 16 '15 at 9:05
  • So if I get it correctly it would be like the first link in your question but infinite and only showing a single number at a time - also just a front view, no perspective? Maybe just some nice graphics to make it appear that way. I think using the mousewheel instead might be nicer, mobile devices would need special treatment with a custom swipe script. Probably not really like this forum to post complete code but I may have a go at it, if it's alright to use jQuery. One more question... should the scroll be animated like the plugin I linked to or can it be an instantaneous switch? – Shikkediel Oct 16 '15 at 9:29
  • Yes it would be like this fiddle: jsfiddle.net/yhdsssbr except infinite, meaning the user could move from the number 9 to the number 1 in two moves (9, 0, 1), instead of the number list having two ends it would be infinite like a real 3d wheel. I would love to have something that was a 3d animation of this but I'm afraid that's out of my skill level, I thought a 2d interactive animation might be as effective, I was curious if it's possible to apply some perspective by showing half of the previous number and half of the next number above and below the selected number, while... – Emily Oct 16 '15 at 9:37
17

Here's what I put together from the info provided... works with the mousewheel, swiping and clicking on the top and bottom numbers. Infinite as requested of course. No special perspective style (yet) but I thought it looked quite decent as is. Could still be an option naturally. Didn't use the plugin I linked to in the comments or requestAnimationFrame but jQuery animate() is quite a good tool for this. The library has great cross browser support (that's it's strength actually), all it needs is a link to it for the JavaScript to be able to get executed. You could use a CDN, this version also works for IE8- :

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

For the best cross browser support on using the mousewheel, this plugin was included :

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js"></script>

https://plugins.jquery.com/mousewheel/

Just a basic parent and styling with spans for each number, a few prepended in case of going up.

$(function() {

var gate = $(window),
cog = $('#rotator'),
digit = cog.find('span'),
field = $('#result'),
slot = digit.height(),
base = 1.5*slot,
up, swipe;

if (document.readyState == 'complete') interAction();
else gate.one('load', interAction);

function interAction() {

	field.text(0);

	cog.scrollTop(base).fadeTo(0,1).mousewheel(function(turn, delta) {

		if (isBusy()) return false;

		up = delta > 0;
		nextNumber();

		return false;
	});

	digit.on('touchstart', function(e) {

		var begin = e.originalEvent.touches[0].pageY;

		digit.on('touchmove', function(e) {

			var yaw = e.originalEvent.touches[0].pageY-begin;
			up = yaw < 0;
			swipe = Math.abs(yaw) > 30;
		});

		gate.one('touchend', function() {

			digit.off('touchmove');

			if (swipe && !isBusy()) nextNumber();
		});
	})
	.on('mousedown touchstart', function(e) {

		if (e.which && e.which != 1) return;

		var zest = this, item = $(this).index();

		$(this).one('mouseup touchend', function(e) {

			digit.off('mouseup');

			var quit = e.originalEvent.changedTouches;

			if (quit) var jab = document.elementFromPoint(quit[0].clientX, quit[0].clientY);
			if (swipe || item == 2 || quit && jab != zest || isBusy()) return;

			up = item == 1;
			nextNumber();
		});

		return false;
	})
	.mouseleave(function() {

		digit.off('mouseup');
	});
}

function isBusy() {

	return cog.is(':animated');
}

function nextNumber() {

	var aim = base;
	swipe = false;

	up ? aim += slot : aim -= slot;

	cog.animate({scrollTop: aim}, 250, function() {

		up ? digit.eq(0).appendTo(cog) : digit.eq(9).prependTo(cog);

		digit = cog.find('span');

		cog.scrollTop(base);
		field.text(digit.eq(2).text());
	});
}
});
body {
  background: grey;
}

#ticker {
  width: 150px;
  text-align: center;
  margin: auto;
}

#rotator {
  height: 140px;
  font-family: "Times New Roman";
  font-size: 50px;
  line-height: 70px;
  background-image:
  url(http://ataredo.com/external/image/flip.png),
  url(http://ataredo.com/external/image/flip.png),
  url(http://ataredo.com/external/image/flip.png);
  background-position: 0 0, 50% 50%, 100% 150%;
  background-size: 300% 50%;
  background-repeat: no-repeat;
  margin: 0 0 10px;
  overflow: hidden;
  opacity: 0;
}

#rotator span {
  width: 100%;
  height: 50%;
  display: inline-block;
  cursor: default;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}

#result {
  height: 30px;
  font-size: 20px;
  color: white;
  line-height: 30px;
  letter-spacing: 3px;
  -webkit-box-shadow: 0 0 3px black;
  box-shadow: 0 0 3px black;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js"></script>

<div id="ticker">
 <div id="rotator">
   <span>8</span>
   <span>9</span>
   <span>0</span>
   <span>1</span>
   <span>2</span>
   <span>3</span>
   <span>4</span>
   <span>5</span>
   <span>6</span>
   <span>7</span>
 </div>
 <div id="result"></div>
</div>

Pretty straightforward, animates the scroll position up or down and then appends or prepends the first or last number depending on the direction. The duration of the animation can be set here :

cog.animate({scrollTop: current}, 250, function() {

Updated - after having some new insights, for example the touchend event always firing on the original element, I've overhauled the code. Besides that, it now has a sprite background that will stay in proportion with the size of the numbers themselves. Also improved the overall logic and removed a nested listener glitch.

Another reason for this edit is to insert a demo that allows to have multiple tickers (and preset the numbers). As I've even moved on beyond that (adding direct response functionality), I thought it would be a good idea to leave the minimal working code for that here as well:

$(function() {

var gate = $(window),
orb = document,
cog = $('.rotator'),
field = $('#result'),
slot = cog.height()/2,
base = 1.5*slot,
list = [],
niche = [7,7,7],
term = 250, // duration of animation
mass, up = true,
yaw = 'mousemove.ambit touchmove.ambit',
hike = 'mouseup.turf touchend.turf',
part = 'mouseleave.range';

tallyCells();

if (orb.readyState == 'complete') interAction();
else gate.one('load', interAction);

gate.on('mouseleave touchcancel', function(e) {

	!(e.type == 'mouseleave' && e.relatedTarget) && lotRelease();
});

function interAction() {

cog.scrollTop(base).each(function(unit) {

	var pinion = $(this),
	digit = pinion.find('.quota'),
	cipher = Number(niche[unit])%10 || 0;
	list[unit] = digit;
	niche[unit] = 0;
	field.append(0);

	for (var i = 0; i < cipher; i++) nextNumber(pinion, unit, true);

	pinion.mousewheel(function(turn, delta) {

		if (isBusy(pinion)) return false;

		up = delta > 0;
		nextNumber(pinion, unit);

		return false;
	});

	digit.on('mousedown touchstart', function(e) {

		if (e.which && e.which != 1) return;

		var zest = this, ken = {}, item = $(this).index();

		tagPoints(e, ken);

		digit.on(part, wipeSlate).on(hike, function(e) {

			wipeSlate();

			var quit = e.originalEvent.changedTouches;

			if (quit) var jab = orb.elementFromPoint(quit[0].clientX, quit[0].clientY);
			if (item == 2 || quit && jab != zest || isBusy(pinion)) return;

			up = item == 1;
			nextNumber(pinion, unit);
		});

		gate.on(yaw, function(e) {

			hubTrace(e, ken);
		})
		.on(hike, function() {

			lotRelease();

			if (!ken.hit || isBusy(pinion)) return;

			up = ken.way < 0;
			nextNumber(pinion, unit);
		});

		return false;
	});

}).fadeTo(0,1);

function tagPoints(act, bit) {

	var nod = act.originalEvent.touches;
	bit.mark = nod ? nod[0].pageY : act.pageY;
	bit.veer = false;
}

function hubTrace(task, gob) {

	var peg = task.originalEvent.touches,
	fly = peg ? peg[0].pageY : task.pageY;
	gob.way = fly-gob.mark;
	gob.hit = Math.abs(gob.way) > 30;

	if (!gob.veer && gob.hit) {
	gob.veer = true;
	wipeSlate();
	}
}

function wipeSlate() {

	mass.off(part + ' ' + hike);
}

function isBusy(whirl) {

	return whirl.is(':animated');
}

function nextNumber(aim, knob, quick) {

	var intent = base, hook = list[knob];

	up ? intent += slot : intent -= slot;

	if (quick) {
	aim.scrollTop(intent);
	revolveTooth();
	}
	else aim.animate({scrollTop: intent}, term, revolveTooth);

function revolveTooth() {

	up ? hook.eq(0).appendTo(aim) : hook.eq(9).prependTo(aim);

	list[knob] = aim.find('.quota');
	niche[knob] = Number(list[knob].eq(2).text());

	aim.scrollTop(base);
	field.text(niche.join(''));
}
}
}

function lotRelease() {

	gate.off(yaw).add(mass).off(hike);
	mass.off(part);
}

function tallyCells() {

	cog.each(function() {

		for (var i = 0; i < 10; i++) {

		var n; !i ? n = 8 : (i == 1 ? n = 9 : n = i-2);

		$(this).append('<div></div>').find('div').eq(i).text(n).addClass('quota');
		}
	});

	mass = $('.quota');
}
});
body {
  text-align: center;
  background: grey;
}

#ticker, .rotator {
  display: inline-block;
}

.rotator {
  width: 100px;
  height: 140px;
  font-family: "Times New Roman";
  font-size: 50px;
  line-height: 80px;
  background-image:
  url(http://ataredo.com/external/image/flip.png),
  url(http://ataredo.com/external/image/flip.png),
  url(http://ataredo.com/external/image/flip.png);
  background-position: 0 0, 50% 50%, 100% 150%;
  background-size: 300% 50%;
  background-repeat: no-repeat;
  margin: 0 0 10px;
  overflow: hidden;
  opacity: 0;
}

.quota {
  height: 50%;
  cursor: default;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}

#result {
  height: 35px;
  font-size: 20px;
  color: white;
  line-height: 35px;
  letter-spacing: 3px;
  -webkit-box-shadow: 0 0 3px black;
  box-shadow: 0 0 3px black;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js"></script>

<div id="ticker">
  <div class="rotator"></div>
  <div class="rotator"></div>
  <div class="rotator"></div>
  <div id="result"></div>
</div>

It will populate the numbers automatically so there's no need to write the markup. Responds to mouse dragging as well.


The latest evolution of the script can be found here :

codepen.io/Shikkediel/pen/avVJdG


Final update - a 3d version that uses transition instead of jQuery .animate. The wheel is made up of individually rotated elements around the x-axis, creating a basically infinite decagon without the need for prepending or appending elements:

codepen.io/Shikkediel/pen/qpjGyq

The cogs are "flickable", making them progress at the speed that the user gives them - then stop again when clicking. They also respond much quicker to mouse wheel events than the original demo. Both reasons why I've left out click events, as opposed to the earlier scripts. Browser support is also a bit more limited but good nonetheless - I've made an extra effort to make it IE10+ compatible.

17
  • That’s amazing! It’s working really well! The touchstart seems to be very fast/responsive , I’m really curious to see how it would look with swipe support on my phone and tablet, would it be possible to add this to your example as well if it’s not too much trouble? – Emily Oct 16 '15 at 20:51
  • I’m not sure what the wheel event is, would its effect look much different than what you’ve currently made? If it’s a relatively new thing does that mean that older browsers wouldn’t be able to use it? Ideally I’d like the method used to move the wheel to be widely supported across all browsers and devices, and to keep being supported going into the future. – Emily Oct 16 '15 at 20:51
  • I was wondering, with your example, is it possible to grab the selected number and send it to my database? By this I mean that I’d like to have a div below the wheel which contains a button that when pressed will send the selected number to my database by an ajax post linked to a php script. In the first example in my question the selected number was called “currentPosition”, and it was placed inside the div called “value” here: currentPosition = targetPosition; document.getElementById("value").innerHTML = "Value: " + currentPosition;... – Emily Oct 16 '15 at 20:51
  • the number appearing in this div ("value") would change automatically whenever the wheel was moved. I’m able to send the contents of this div to my database on click of a “submit” button, but I was wondering what the equivalent of currentPosition is in your code? Thanks so much again for your help, it looks great! – Emily Oct 16 '15 at 20:53
  • Looked at it closely and think all requirements are incorporated in the update... but been tweaking it a bit since I posted that. I may need to make another edit to the answer but I'll do that when there's nothing left to be changed. I'd really like to leave a good script here but don't wanna overdo it either. – Shikkediel Oct 17 '15 at 12:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.