Карусель 3d jquery/js
Добрый день, друзья. Не подскажите, есть ли какое-то готовое решение js/jquery?
![]() |
На всякий случай... Вдруг пригодится
<style>
div { position:absolute;
display:block;
width:100px;
text-align: center;
font-family:Arial;
}
</style>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
var tim = ["17.30","18:00","18:30","19:00","19:30","20:00","20:30","21:00","21:30"],
cont = document.querySelectorAll("div");
var delta = 0;
for (var i = 0; i < tim.length; i++) {
var sinus = Math.sin(i * Math.PI / 8),
cosin = 1 - Math.cos(i * Math.PI / 8);
cont[i].style.top = (cosin * 100 - 10 * sinus) + "px";
cont[i].style.opacity = sinus;
cont[i].innerText = tim[i];
cont[i].style.fontSize = 20 * sinus + "px";
}
</script>
|
Конечно, имелось ввиду наличие вариативности этих пунктов, но результат тоже хороший)
|
Крутится скачками
<style>
.cell { position:absolute;
display:block;
width:100px;
text-align: center;
font-family:Arial;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;
}
</style>
<div class="cont">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<script>
var tim = 21,
cell = document.querySelectorAll(".cell");
function showTime() {
var currInt = Math.floor(tim);
var currChr = currInt.toString();
currChr = currChr.length == 2? currChr: "0" + currChr;
var result = currChr + ":" + (currInt != tim?"30":"00");
tim = tim + 0.5;
if(tim == 24) tim = 0;
return result;
}
for (var i = 0; i < 9; i++) {
var sinus = Math.sin(i * Math.PI / 8),
cosin = 1 - Math.cos(i * Math.PI / 8);
cell[i].style.top = (cosin * 100 - 10 * sinus) + "px";
cell[i].style.opacity = sinus;
cell[i].innerText = showTime();
cell[i].style.fontSize = 20 * sinus + "px";
};
function timLoop () {
setTimeout(function () {
var change = document.querySelector(".cell");
change.innerText = showTime();
document.querySelector(".cont").appendChild(change);
cell = document.querySelectorAll(".cell");
for (var i = 0; i < 9; i++) {
var sinus = Math.sin(i * Math.PI / 8),
cosin = 1 - Math.cos(i * Math.PI / 8);
cell[i].style.top = (cosin * 100 - 10 * sinus) + "px";
cell[i].style.opacity = sinus;
cell[i].style.fontSize = 20 * sinus + "px";
};
timLoop();
}, 1000)
}
timLoop();
</script>
|
Спасибо большое):dance:
|
| Часовой пояс GMT +3, время: 00:05. |