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

Еженедельная подборка красивых эффектов на 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/SVG/JS #53

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

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

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

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


(далее…)

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

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

Слайдер на react

Технологии: CSS, react.js.
Автор: Николай Таланов (@suez)

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


(далее…)

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

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

Спираль из текста на CSS

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

Спираль из текста Посмотреть живой пример


(далее…)

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

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

Пейзаж с оленями и анимированным фоном

Технологии: CSS, JS.
Автор: Марио Дуарте (@MarioDesigns)

Пейзаж с оленями и анимированным фоном Посмотреть живой пример


(далее…)

Inspiration #12

Сегодня среда, а значит время посмотреть двенадцатый выпуск нашей еженедельной рубрики Inspiration. Это рубрика, в которой мы публикуем интересные, необыкновенные, поразительные, потрясающие, пробуждающие вдохновение… ух! сайты.

Большие заголовки для сайта

Заголовок на сайте — это наиболее важный элемент на веб-странице. Как правило, посетитель первоначально на него обращает внимание. Для него отводится несколько ролей: заголовок часто используют как логотип; он также несет смысловую нагрузку, т.е. показывает что предлагает сайт. Также к оформлению можно подходить творчески, подбирать новые интересные способы подчеркнуть его более характерно, например, использовать его в качестве декоративного элемента. По нему вас могут узнавать, то есть ваша визитная карточка. Такие способы создают определенное настроение у посетителей. И от этого зависит захочет ли пользователь снова вернуться. Сегодня я приготовила небольшую подборку красивых сайтов с разнообразными заголовками.

(далее…)

Клевый эффект для текста из частиц на Canvas

Прикольный эффект для текста сделан с помощью элемента HTML5 canvas. Но это сделал не я. Идея принадлежит автору оригинала. Я просто нашёл его демо-страницу.

Обновление: Автором оригинала является Ruby on Tails. Я заметил, что демо-пример немного неисправен и производительность его слабая. Так что если кто-нибудь может аккуратненько подправить пример, поделитесь решением в комментариях.

(далее…)