Архив тегов: JavaScript

Еженедельная подборка красивых эффектов на CSS/SVG/JS #66

Подборка свежих эффектов, интересных идей и полезных наработок.

Праздничная анимация

Технологии: CSS, CSS-гриды, particles.js.
Автор: Триша Салас (@trishasalas)

Праздничная анимация Посмотреть живой пример


(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #65

Подборка свежих эффектов, интересных идей и полезных наработок.

Эффект 3D-печати

Технологии: CSS, Three.js, GreenSock.js.
Автор: Shaw (@shshaw)

Эффект 3D-печати Посмотреть живой пример


(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #64

Подборка свежих эффектов, интересных идей и полезных наработок.

Анимация «Дуэль»

Технологии: CSS, SVG, JS.
Автор: Энгер Бьюза (@enger)

Дуэль Посмотреть живой пример


(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #63

Подборка свежих эффектов, интересных идей и полезных наработок.

Бегущая зебра

Анимация меняется по клику в любом ее месте.
Технологии: CSS, three.js.
Автор: DPDK (@dpdknl)

Бегущая зебра Посмотреть живой пример


(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #62

Подборка свежих эффектов, интересных идей и полезных наработок.

Трансформация «Жажда скорости»

Технологии: CSS, SVG, GSAP.
Автор: Крейг Роблевски (@PointC)

Трансформация Жажда скорости Посмотреть живой пример


(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #61

Подборка свежих эффектов, интересных идей и полезных наработок.

Анимация с убегающим холодильником

Технологии: CSS, CSS-трансформации, CSS-анимация.
Автор: Адам Кун (@cobra_winfrey)

Анимация с убегающим холодильником Посмотреть живой пример


(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #60

Подборка свежих эффектов, интересных идей и полезных наработок.

Имитация чернильных клякс

«Кляксы» можно добавлять кликом по холсту. Обратите внимание, что старые бледнеют при добавлении новых, «впитываясь» в «бумагу», что добавляет реалистичности.
Технологии: canvas, JS.
Автор: Том Миллер (@creativeocean)

Имитация черничных клякс Посмотреть живой пример


(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #59

Подборка свежих эффектов, интересных идей и полезных наработок.

Робот-самурай

Технологии: CSS, GSAP.js, Greensock.js.
Автор: Джекоб (@jx2bandito)

Робот-самурай Посмотреть живой пример


(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #58

Подборка свежих эффектов, интересных идей и полезных наработок.

Имитация крема на CSS

Проводя курсором по середине квадрата, вы стираете «крем» и видите текст.
Технологии: CSS-трансформации, CSS-фильтры.
Автор: Юсуке Накая (@YusukeNakaya)

Имитация крема на CSS Посмотреть живой пример


(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #57

Подборка свежих эффектов, интересных идей и полезных наработок.

Раскладка на CSS-гридах с использованием CSS-перспективы

Имитация обложек музыкальных альбомов.
Технологии: CSS-гриды, CSS-трансформации, JS.
Автор: Энди Барефут (@andybarefoot)

Интересная раскладка на CSS-гридах с использованием CSS-перспективы Посмотреть живой пример


(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #56

Подборка свежих эффектов, интересных идей и полезных наработок.

Верстка страницы в стиле комиксов на CSS-гридах

Технологии: CSS grid, clip path.
Автор: Рен Айша (@rrenula)

Часы, цифры которых тоже состоят из цифр Посмотреть живой пример


(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #55

Подборка свежих эффектов, интересных идей и полезных наработок.

Анимация текста в стиле отпечатков пальцев

Технологии: CSS, SVG, CSS анимация, GSAP.js.
Автор: Джон Хили (@jhealey5)

Смена дня и ночи Посмотреть живой пример


(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #54

Подборка свежих эффектов, интересных идей и полезных наработок.

Анимация пейзажа с островом

Технологии: CSS, SVG, GSAP.js.
Автор: Issey (@issey)

Анимация пейзажа с островом на CSS Посмотреть живой пример


(далее…)

Как рисование на чистом CSS помогло мне понять React-компоненты

Перевод статьи How Pure CSS Images Helped Me Understand React Components с сайта medium.com для CSS-live.ru, автор — Майкл Манджаларди

1-mJsGnpEIAfmphAuo130_Zw

В начале 2016-го я так устал от попыток выучить React, что едва не бросил разработку. Я стал жертвой синдрома самозванца. Теперь я работаю React-разработчиком на полную ставку и успел написать книгу «Изучение React.js для визуалов»

Как же я преодолел синдром самозванца и наконец освоил React? Причин несколько, но важнее всего оказалось то, что я научился делать рисунки на чистом CSS.

(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #53

Подборка свежих эффектов, интересных идей и полезных наработок.

Анимация с велосипедом

Эта анимация — интерактивная. Нужно кликнуть по любом ее месту, и дальше вы сможете управлять облаком. Стрелками «влево»-«вправо» на клавиатуре вы двигаете облако, а пробелом вызываете дождик. Велосипедист реагирует на всё это, когда проезжает под облаком.
Технологии: CSS, bodymovin.js, anime,js.
Автор: Мариуш Дабровски (@MarioD)

Анимация с велосипедом Посмотреть живой пример


(далее…)