Карусель 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:32. |