Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.01.2019, 17:10
Новичок на форуме
Отправить личное сообщение для ItForSex Посмотреть профиль Найти все сообщения от ItForSex
 
Регистрация: 28.10.2017
Сообщений: 5

Карусель 3d jquery/js
Добрый день, друзья. Не подскажите, есть ли какое-то готовое решение js/jquery?

Ответить с цитированием
  #2 (permalink)  
Старый 21.01.2019, 17:46
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

На всякий случай... Вдруг пригодится
<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>
Ответить с цитированием
  #3 (permalink)  
Старый 22.01.2019, 18:24
Новичок на форуме
Отправить личное сообщение для ItForSex Посмотреть профиль Найти все сообщения от ItForSex
 
Регистрация: 28.10.2017
Сообщений: 5

Конечно, имелось ввиду наличие вариативности этих пунктов, но результат тоже хороший)
Ответить с цитированием
  #4 (permalink)  
Старый 23.01.2019, 11:54
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Крутится скачками
<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>

Последний раз редактировалось Dilettante_Pro, 23.01.2019 в 14:42.
Ответить с цитированием
  #5 (permalink)  
Старый 23.01.2019, 22:32
Новичок на форуме
Отправить личное сообщение для ItForSex Посмотреть профиль Найти все сообщения от ItForSex
 
Регистрация: 28.10.2017
Сообщений: 5

Спасибо большое)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как адаптировать карусель под мобильные устройства? giwuf Библиотеки/Тулкиты/Фреймворки 1 07.11.2018 18:02
Создать карусель Гаджи jQuery 4 01.09.2015 19:32
Фильтр сортировки съедает карусель ligisayan jQuery 5 01.07.2015 12:40
Карусель. Бесконечная прокрутка. raffx Events/DOM/Window 2 17.07.2014 16:24
Подскажите карусель, которая работает без какого либо фреймворка Khmelevsky Библиотеки/Тулкиты/Фреймворки 2 25.04.2010 12:45