<div class="container">
	<p>Please scroll down.</p>
	<div class="parallax">
		<div class="ball ball-first">
			<div class="ball_num"><span>1</span></div>
		</div>
		<div class="ball ball-second">
			<div class="ball_num"><span>2</span></div>
		</div>
		<div class="ball ball-third">
			<div class="ball_num"><span>3</span></div>
		</div>
	</div>
</div>
body {
	font-size: 14px;
	line-height: 1.5;
	color: #333;
}
a {
	text-decoration: none;
	color: #333;
}
img {
	vertical-align: bottom;
}
.clearfix {
	display: table;
	clear: both;
}
p {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 300px;
	text-align: center;
}
.container {
	width: 500px;
	margin: 0 auto 300px;
	padding: 50px 0;
	background: #fff;
}
.parallax {
	position: relative;
	height: 800px;
	.ball {
		position: absolute;
		top: 0;
		left: 0;
		width: 100px;
		height: 100px;
		border-radius: 50px;
		border: 1px solid #eee;
		display: flex;
		align-items: center;
		justify-content: center;
		transform-origin: center center;
		transform: rotate(0deg);
		box-shadow: inset -1px -4px 1px rgba(0,0,0,0.2);

		&-first {
			background: #008000;
		}

		&-second {
			background: #0000ea;
			top: 300px;
		}

		&-third {
			background: #ea0000;
			top: 600px;
		}

		&_num {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 50px;
			height: 50px;
			background: #fff;
			border-radius: 25px;

			span {
				display: table-cell;
				font-family: Arial;
				font-size: 28px;
				font-weight: bold;
				text-align: center;
				vertical-align: middle;
			}
		}
	}
}
(function() {
	'use strict';
	
	// アニメーション関数
	function anim() {
		var scroll,
				wH,
				balls,
				offset,
				animPos;
		
		balls = document.querySelectorAll('.ball');
		
		for (var i = 0; i < balls.length; i++) {
			
			// 要素の絶対座標を取得
			offset = balls[i].getBoundingClientRect();
			
			// スクロール量を合わせた要素の絶対座標を取得
			animPos = offset.top + window.pageYOffset;
			
			scroll = document.body.scrollTop || document.documentElement.scrollTop;
			
			wH = window.innerHeight;
			
			// スクロール量が各ボール要素の上端位置を越えたらアニメーション
			if (scroll > animPos / 1.3) {
				balls[i].style.transition = 'all 1s';
				balls[i].style.transform = 'rotate(' + 1080 + 'deg)';
				balls[i].style.left = 400 + 'px';
			} else {
				return false;
			}
		}
	}
	
	// スクロール時anim関数を実行する
	window.addEventListener('scroll', function() {
		anim();
	});
}());

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.