Страницы

Поиск по вопросам

вторник, 8 января 2019 г.

Как правильно сделать такой эффект в пагинации?

Как сделать такую анимацию пагинации перемещения точек элементов между числами 01, 02 , 03 , 04 ?
.paination { display:flex; }



Ответ

Как было сказано в комментариях, подобный эффект можно сделать на HTML+CSS. (эффект работает при hover'e). Пример на Codepen с использованием цикла для генерации transform-delay in SCSS Update: Исправлена анимация.
var btn = document.getElementById("toggle"); var px = document.getElementsByClassName("px"); btn.onclick = function() { Array.from(px).forEach(function(el) { el.classList.add("offset"); }); } * { margin: 0; padding: 0; } #toggle { background: crimson; border: none; outline: none; border-radius: 0.2rem; color: white; padding: 0.70rem 0.75rem; margin: 0.5rem 1rem; cursor: pointer; box-shadow: 2px 2px 2px gray; transition: 0.2s; text-transform: uppercase; } #toggle:active { box-shadow: none; } .line { margin: 1rem; } .offset { transform: translateX(50px); } .px { width: 1px; height: 1px; background-color: #000; } .px:nth-child(1) { transition: ease-in-out 0.4s; } .px:nth-child(2) { transition: ease-in-out 0.6s; } .px:nth-child(3) { transition: ease-in-out 0.5s; } .px:nth-child(4) { transition: ease-in-out 0.6s; } .px:nth-child(5) { transition: ease-in-out 0.58s; } .px:nth-child(6) { transition: ease-in-out 0.56s; } .px:nth-child(7) { transition: ease-in-out 0.58s; } .px:nth-child(8) { transition: ease-in-out 0.6s; } .px:nth-child(9) { transition: ease-in-out 0.5s; } .px:nth-child(10) { transition: ease-in-out 0.45s; } .px:nth-child(11) { transition: ease-in-out 0.6s; } .px:nth-child(12) { transition: ease-in-out 0.6s; } .px:nth-child(13) { transition: ease-in-out 0.43s; } .px:nth-child(14) { transition: ease-in-out 0.44s; } .px:nth-child(15) { transition: ease-in-out 0.59s; } .px:nth-child(16) { transition: ease-in-out 0.54s; } .px:nth-child(17) { transition: ease-in-out 0.56s; } .px:nth-child(18) { transition: ease-in-out 0.52s; } .px:nth-child(19) { transition: ease-in-out 0.5s; } .px:nth-child(20) { transition: ease-in-out 0.56s; } .px:nth-child(21) { transition: ease-in-out 0.6s; } .px:nth-child(22) { transition: ease-in-out 0.4s; } .px:nth-child(23) { transition: ease-in-out 0.52s; } .px:nth-child(24) { transition: ease-in-out 0.48s; } .px:nth-child(25) { transition: ease-in-out 0.46s; } .px:nth-child(26) { transition: ease-in-out 0.45s; } .px:nth-child(27) { transition: ease-in-out 0.52s; } .px:nth-child(28) { transition: ease-in-out 0.54s; } .px:nth-child(29) { transition: ease-in-out 0.55s; } .px:nth-child(30) { transition: ease-in-out 0.55s; } .px:nth-child(31) { transition: ease-in-out 0.5s; } .px:nth-child(32) { transition: ease-in-out 0.51s; } .px:nth-child(33) { transition: ease-in-out 0.6s; } .px:nth-child(34) { transition: ease-in-out 0.5s; } .px:nth-child(35) { transition: ease-in-out 0.6s; } .px:nth-child(36) { transition: ease-in-out 0.51s; } .px:nth-child(37) { transition: ease-in-out 0.52s; } .px:nth-child(38) { transition: ease-in-out 0.46s; } .px:nth-child(39) { transition: ease-in-out 0.45s; } .px:nth-child(40) { transition: ease-in-out 0.6s; }


Комментариев нет:

Отправить комментарий