Таймер из кубиков на jQuery

Пример:

HTML:

<div class="timerWrap" id="cubes">
	<div class="cuberow">
		<div class="cube">
			<div class="cubefront"></div>
			<div class="cubetop"></div>
			<div class="cubeback"></div>
			<div class="cubebottom"></div>
			<div class="cubeleft"></div>
			<div class="cuberight"></div>
		</div>
		<div class="cube">
			<div class="cubefront"></div>
			<div class="cubetop"></div>
			<div class="cubeback"></div>
			<div class="cubebottom"></div>
			<div class="cubeleft"></div>
			<div class="cuberight"></div>
		</div>
		<div class="cube">
			<div class="cubefront"></div>
			<div class="cubetop"></div>
			<div class="cubeback"></div>
			<div class="cubebottom"></div>
			<div class="cubeleft"></div>
			<div class="cuberight"></div>
		</div>
	</div>
	<div class="cuberow">
		<div class="cube">
			<div class="cubefront"></div>
			<div class="cubetop"></div>
			<div class="cubeback"></div>
			<div class="cubebottom"></div>
			<div class="cubeleft"></div>
			<div class="cuberight"></div>
		</div>
		<div class="cube">
			<div class="cubefront"></div>
			<div class="cubetop"></div>
			<div class="cubeback"></div>
			<div class="cubebottom"></div>
			<div class="cubeleft"></div>
			<div class="cuberight"></div>
		</div>
		<div class="cube">
			<div class="cubefront"></div>
			<div class="cubetop"></div>
			<div class="cubeback"></div>
			<div class="cubebottom"></div>
			<div class="cubeleft"></div>
			<div class="cuberight"></div>
		</div>
	</div>
	<div class="cuberow">
		<div class="cube">
			<div class="cubefront"></div>
			<div class="cubetop"></div>
			<div class="cubeback"></div>
			<div class="cubebottom"></div>
			<div class="cubeleft"></div>
			<div class="cuberight"></div>
		</div>
		<div class="cube">
			<div class="cubefront"></div>
			<div class="cubetop"></div>
			<div class="cubeback"></div>
			<div class="cubebottom"></div>
			<div class="cubeleft"></div>
			<div class="cuberight"></div>
		</div>
		<div class="cube">
			<div class="cubefront"></div>
			<div class="cubetop"></div>
			<div class="cubeback"></div>
			<div class="cubebottom"></div>
			<div class="cubeleft"></div>
			<div class="cuberight"></div>
		</div>
	</div>
	<div class="cuberow">
		<div class="cube">
			<div class="cubefront"></div>
			<div class="cubetop"></div>
			<div class="cubeback"></div>
			<div class="cubebottom"></div>
			<div class="cubeleft"></div>
			<div class="cuberight"></div>
		</div>
		<div class="cube">
			<div class="cubefront"></div>
			<div class="cubetop"></div>
			<div class="cubeback"></div>
			<div class="cubebottom"></div>
			<div class="cubeleft"></div>
			<div class="cuberight"></div>
		</div>
		<div class="cube">
			<div class="cubefront"></div>
			<div class="cubetop"></div>
			<div class="cubeback"></div>
			<div class="cubebottom"></div>
			<div class="cubeleft"></div>
			<div class="cuberight"></div>
		</div>
	</div>
	<div class="cuberow">
		<div class="cube">
			<div class="cubefront"></div>
			<div class="cubetop"></div>
			<div class="cubeback"></div>
			<div class="cubebottom"></div>
			<div class="cubeleft"></div>
			<div class="cuberight"></div>
		</div>
		<div class="cube">
			<div class="cubefront"></div>
			<div class="cubetop"></div>
			<div class="cubeback"></div>
			<div class="cubebottom"></div>
			<div class="cubeleft"></div>
			<div class="cuberight"></div>
		</div>
		<div class="cube">
			<div class="cubefront"></div>
			<div class="cubetop"></div>
			<div class="cubeback"></div>
			<div class="cubebottom"></div>
			<div class="cubeleft"></div>
			<div class="cuberight"></div>
		</div>
	</div>
</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

CSS:

.timerWrap * {
	box-sizing: border-box;
}
.timerWrap {
	margin: 20px 0;
	text-align: center;
}
.cuberow {
	height: 100px;
	perspective: 900px;
}
.cube {
	width: 100px;
	height: 100px;
	display: inline-block;
	margin: 0;
	transition: transform 1s;
	transform-style: preserve-3d;
}
.cube:nth-of-type(2) {
	position: relative;
	z-index: 1;
}	
.cube > div {
	position: absolute;
	border-top: 5px solid #BFE2FF;
	border-bottom: 5px solid #BFE2FF;
	width: 100px;
	height: 100px;
}
.cube .cubefront {
	transform: rotateY(0deg) translateZ(50px);
	background: #BFE2FF;
}
.cube .cubeback {
	transform: rotateX(180deg) translateZ(50px);
	background: #BFE2FF;
}
.cube .cubetop {
	transform: rotateX(90deg) translateZ(50px);
	background: #337AB7;
}
.cube .cubebottom {
	transform: rotateX(-90deg) translateZ(50px);
	background: #337AB7;
}
.cube .cubeleft {
	transform: rotateY(-90deg) translateZ(50px);
	background: #BFE2FF;
}
.cube .cuberight {
	transform: rotateY(90deg) translateZ(50px);
	background: #BFE2FF;
}
@media screen and (max-width: 767px) {
	.timerWrap {
		transform: scale(0.8);
		width: calc(100% + 160px);
		left: -80px;
		position: relative;
	}
}
@media screen and (max-width: 520px) {
	.timerWrap {
		transform: scale(0.5);
		width: calc(100% + 360px);
		left: -180px;
	}
}

.timerWrap * {

box-sizing: border-box;

}

.timerWrap {

margin: 20px 0;

text-align: center;

}

.cuberow {

height: 100px;

perspective: 900px;

}

.cube {

width: 100px;

height: 100px;

display: inline-block;

margin: 0;

transition: transform 1s;

transform-style: preserve-3d;

}

.cube:nth-of-type(2) {

position: relative;

z-index: 1;

}

.cube > div {

position: absolute;

border-top: 5px solid #BFE2FF;

border-bottom: 5px solid #BFE2FF;

width: 100px;

height: 100px;

}

.cube .cubefront {

transform: rotateY(0deg) translateZ(50px);

background: #BFE2FF;

}

.cube .cubeback {

transform: rotateX(180deg) translateZ(50px);

background: #BFE2FF;

}

.cube .cubetop {

transform: rotateX(90deg) translateZ(50px);

background: #337AB7;

}

.cube .cubebottom {

transform: rotateX(-90deg) translateZ(50px);

background: #337AB7;

}

.cube .cubeleft {

transform: rotateY(-90deg) translateZ(50px);

background: #BFE2FF;

}

.cube .cuberight {

transform: rotateY(90deg) translateZ(50px);

background: #BFE2FF;

}

@media screen and (max-width: 767px) {

.timerWrap {

transform: scale(0.8);

width: calc(100% + 160px);

left: -80px;

position: relative;

}

@media screen and (max-width: 520px) {

.timerWrap {

transform: scale(0.5);

width: calc(100% + 360px);

left: -180px;

}

jQuery:

var matrix = [
	[
		false, true, false,
		false, true, false,
		false, true, false,
		false, true, false,
		false, true, false
	],
	[
		true, true, true,
		false, false, true,
		true, true, true,
		true, false, false,
		true, true, true
	],
	[
		true, true, true,
		false, false, true,
		false, true, true,
		false, false, true,
		true, true, true
	],
	[
		true, false, true,
		true, false, true,
		true, true, true,
		false, false, true,
		false, false, true
	],
	[
		true, true, true,
		true, false, false,
		true, true, true,
		false, false, true,
		true, true, true
	],
	[
		true, true, true,
		true, false, false,
		true, true, true,
		true, false, true,
		true, true, true
	],
	[
		true, true, true,
		false, false, true,
		false, false, true,
		false, false, true,
		false, false, true
	],
	[
		true, true, true,
		true, false, true,
		true, true, true,
		true, false, true,
		true, true, true
	],
	[
		true, true, true,
		true, false, true,
		true, true, true,
		false, false, true,
		false, false, true
	],
	[
		true, true, true,
		true, false, true,
		true, false, true,
		true, false, true,
		true, true, true
	]
];
var grad = new Date(0, 0, 0, 0, 0, 0, 0);
var cube = $('#cubes');
var cube2 = $('#cubes2');
function renderDigit(container, number) {
	var children = container.children().children();
	var len = matrix[number].length;
	var state;
	for (var i = 0; i < len; i++) {
		state = children.eq(i).data('state') || 'off';
		if (
		(matrix[number][i] && state === 'off') ||
		(!matrix[number][i] && state === 'on')
		) {
			rotate.call(children.eq(i));
		}
	}
}
function render() { 
	var now = new Date(),
	diff = String(grad.getTime() - now.getTime()),
	len = diff.length; 
	renderDigit(cube, Number(diff.charAt(len-4)));
	renderDigit(cube2, Number(diff.charAt(len-4)));
	requestAnimationFrame(render);
} 
requestAnimationFrame(render); 
function rotate(){
	var angle = ($(this).data('angle') + -90) || -90; 
	var state = $(this).data('state') || 'off';
	$(this).css({'transform': 'rotateX(' + angle + 'deg)'});
	$(this).data('angle', angle); 
	$(this).data('state', (state === 'on') ? 'off' : 'on');
}

100

101

102

103

104

105

var matrix = [

[

false, true, false,

false, true, false

[

true, true, true,

false, false, true,

true, true, true,

true, false, false,

true, true, true

[

true, true, true,

false, false, true,

false, true, true,

false, false, true,

true, true, true

[

true, false, true,

true, true, true,

false, false, true,

false, false, true

[

true, true, true,

true, false, false,

true, true, true,

false, false, true,

true, true, true

[

true, true, true,

true, false, false,

true, true, true,

true, false, true,

true, true, true

[

true, true, true,

false, false, true,

false, false, true

[

true, true, true,

true, false, true,

true, true, true,

true, false, true,

true, true, true

[

true, true, true,

true, false, true,

true, true, true,

false, false, true,

false, false, true

[

true, true, true,

true, false, true,

true, true, true

]

];

var grad = new Date(0, 0, 0, 0, 0, 0, 0);

var cube = $('#cubes');

var cube2 = $('#cubes2');

function renderDigit(container, number) {

var children = container.children().children();

var len = matrix[number].length;

var state;

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

state = children.eq(i).data('state') || 'off';

if (

(matrix[number][i] && state === 'off') ||

(!matrix[number][i] && state === 'on')

) {

rotate.call(children.eq(i));

}

function render() {

var now = new Date(),

diff = String(grad.getTime() - now.getTime()),

len = diff.length;

renderDigit(cube, Number(diff.charAt(len-4)));

renderDigit(cube2, Number(diff.charAt(len-4)));

requestAnimationFrame(render);

}

requestAnimationFrame(render);

function rotate(){

var angle = ($(this).data('angle') + -90) || -90;

var state = $(this).data('state') || 'off';

$(this).css({'transform': 'rotateX(' + angle + 'deg)'});

$(this).data('angle', angle);

$(this).data('state', (state === 'on') ? 'off' : 'on');

}

Найдено на codepen.io у пользователя Eric Porter

Пример:

HTML:

CSS:

jQuery:

Смотрите также:

Добавить комментарий: