Пиксельный дракон на чистом CSS, спрайт-анимация из 11 кадров без JavaScript и без библиотек.
Дракон машет крыльями на месте и оставляет за ними тёмный след. Это спрайт-лист, который листает animation steps(11). Поверх слабая сетка-маска и полупиксельное размытие, чтобы картинка выглядела как старый экран.
Время взмаха меняется в .8s, размер пикселя в --cell, остальное подстроится само.
Какого пиксельного зверя сделать следующим?
#css #pixelart #webdesign
пиксельный дракон, css анимация, спрайт анимация, pixel art, анимация на css, css без javascript, steps css, анимация для сайта, веб анимация, html css, креативный код, пиксель арт дракон, фронтенд, анимация крыльев, creative coding
Форма входа, где логин печатается на бумаге, как на настоящей машинке. Каждая буква бьёт по листу со своим неровным оттиском, каретка щёлкает на шаг, пароль печатается иксами. Неверный пароль получает красный штамп DENIED, верный ACCESS GRANTED. Лист рисуется на canvas, а под ним настоящие поля ввода, поэтому работают менеджеры паролей и клавиатура телефона. Без картинок и библиотек.
PITCH 10.2 это шаг каретки на одну букву, на 14 буквы встанут шире. CLUNK 0.22 это отскок каретки, на 0.5 она будет щёлкать сильнее, на 0 встанет без отскока.
Нужна такая форма входа на ваш сайт? Напишите, сделаем.
#формавхода #анимация #javascript #css #вебдизайн
3D оптическая иллюзия и анимация частиц на чистом JavaScript и HTML5 Canvas без использования внешних библиотек и Three.js!
В этом видео разбираем интерактивный веб-эффект: 600 хаотично летающих точек (частиц) формируют силуэт объёмного сердца, которое становится видимым только под одним определенным углом обзора.
Разбор механики:
— Математическая формула кривой сердца (Heart Curve) для построения объёмной формы в 3D-пространстве;
— Интерактивная физика: облако частиц разлетается при взаимодействии и автоматически возвращается в исходную форму;
— Чистый JS + HTML5 Canvas: лёгкий, оптимизированный и производительный код для любого сайта.
🎁 Бесплатный исходник и готовый HTML-файл с кодом выложил в Telegram: https://t.me/CodinVisual
💼 Нужна уникальная анимация или интерактивный UI на ваш сайт? Пишите в Telegram!
Ключевые слова для поиска:
#javascript #canvas #3dанимация #вебразработка #frontend #css #html5 #программирование #оптическаяиллюзия #вебдизайн #jsанимация #анимациячастиц #creativecoding
Третья версия кнопки входа из жидкого металла. Вторая вам понравилась, поэтому я выбросил старый металл и собрал заново, теперь это настоящий хром.
Нажимаешь на кнопку, и капсула рвётся на два поля. Между ними тянется перемычка из ртути, тончает и лопается, две капли улетают. Вводишь имя и пароль, жмёшь войти, и кнопка подтверждает вход.
Блеск никто не рисовал. Это один шейдер WebGL, он складывает формы вместе (MELT 24 отвечает за то, насколько мягко они сливаются) и отражает от поверхности студийный свет, как от настоящего хрома. Поставь MELT 8, и металл станет жёстким, поставь 40, и он потечёт как сироп. STRETCH 240 задаёт, как далеко разъезжаются половинки. Один файл, без библиотек, работает без интернета.
Нужна такая кнопка на ваш сайт? Пишите в Telegram, сделаю под ваш стиль.
Код бесплатно в Telegram https://t.me/+CD3j8HqKis0yZWQy
#вебдизайн #анимация #webgl #javascript #frontend
Экран входа на неоновой вывеске под дождём. Трубки загораются по одной с настоящим мерцанием. Вводишь неверный пароль, и вывеска рвётся красным глитчем, а искры падают и отскакивают от мокрого асфальта. Вводишь верный, и по всем трубкам проходит вспышка света.
Мерцание это шесть чисел. Каждая трубка полсекунды проигрывает 1 0 1 1 0 1 по кадрам и остаётся гореть. Поэтому выглядит как настоящий неон, а не как плавное появление.
Код бесплатно в Telegram https://t.me/CodinVisual
Новые эффекты каждую неделю, подписывайтесь чтобы не пропустить.
#вебдизайн #javascript
Светлячок живёт прямо в форме входа. Садится на поле почты, ныряет в пароль и подсвечивает каждую букву, нажимает на глаз чтобы показать текст, а потом залетает в кнопку входа и наполняет её светом.
Вся анимация держится на двух числах в коде. STIFF отвечает за то, как быстро светлячок долетает до цели, а DAMP гасит его движение, чтобы не было резких рывков. Поставьте другие значения и характер полёта изменится.
Файл целиком бесплатно в Telegram t.me/CodinVisual
#вебдизайн #javascript
Полоса загрузки словно живая, она с лёгким отставанием тянется к цифре, а сами цифры появляются сразу, и этот рассинхрон делает экран настоящим. Вся логика в одной строке, p += (target − p) * EASE.
EASE 0.12 задаёт характер полосы. Поставьте 0.03, и она станет тягучей. Поставьте 0.3, и она задёргается быстрее цели. STAGGER 0.055 отвечает за задержку между строками, которые выезжают в конце.
Цифры на самом деле белые. Тёмными они кажутся только из-за mix-blend-mode difference, полоса перекрашивает их, пока проезжает мимо.
Файл целиком бесплатно в Telegram t.me/CodinVisual
Нужна такая анимация на сайт, пишите туда же.
#вебдизайн #анимация #css #javascript
Один клик, и тема сайта расходится кругом от кнопки, будто дверь открывается в другой день. Ни одной подмены скриншотов, это настоящий View Transitions API браузера и clip-path, который вырезает круг прямо в кадре.
Круг растёт от точки клика и за 700 миллисекунд накрывает всю страницу, пока под ним подменяются цвета. Все цвета лежат в трёх CSS-переменных, --bg, --card и --text, поэтому переключатель ставится на весь сайт разом, без переписывания вёрстки.
Бесплатный рабочий файл и разбор кода в Telegram t.me/CodinVisual.
Нужен такой переключатель на свой сайт, пишите, соберу под ваш дизайн.
#вебдизайн #анимация #css #javascript #frontend
Анимацию можно подогнать под себя, даже если код ты видишь впервые.
Снизу обычный JavaScript, на нём работают почти все сайты. Чтобы поменять эффект под себя, хватит двух строчек.
Первая называется WORDS. Там слова в кавычках, у меня стоят DESIGN, CODE и EFFECT. Меняешь их на название своего проекта или своё имя, и собираться будут уже они.
Вторая CH. Это символы, которые мелькают, пока слово собирается.
Файл целиком бесплатно в Telegram t.me/CodinVisual
#вебдизайн #javascript
Кнопка входа, которая растекается как ртуть. Половинки расходятся на пружине, между ними тянется перемычка жидкого металла, рвётся, и капли втягиваются обратно. Вся перемычка это один путь в SVG, без картинок и библиотек.
damping 11 задаёт характер пружины, на 4 кнопка начнёт качаться. PULL 26 это насколько далеко разъезжаются половинки, на 60 металл растянется сильнее.
Код эффекта бесплатно в Telegram t.me/CodinVisual