JavaScript
1.65K subscribers
419 photos
42 videos
4 files
704 links
➡️ Сотрудничество: @haarrp

https://t.me/itchannels_telegram - 🔥лучшие ит-каналы

@javascriptv - продвинутый javascript

@JavaScript_testit- js тесты

@programming_books_it - бесплатные it книги

@ai_machinelearning_big_data - ml
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
SpinKit — минималистичные загрузочные CSS-спиннеры

Они анимированы исключительно при помощи CSS

Пример того, как они выглядят, можно увидеть выше

Стоимость: #бесплатно

#css #анимации #web

@about_javascript
This media is not supported in your browser
VIEW IN TELEGRAM
Directionally Aware Controls

Эффект при наведении на кнопку с направленными элементами управления. Реализован на чистом CSS.

#css

https://codepen.io/jh3y/pen/gOmqWdp

@about_javascript
This media is not supported in your browser
VIEW IN TELEGRAM
Motion Blur Step 2

Анимация размытия в движении. Написана на чистом CSS.

#анимация #css

https://codepen.io/Nealevf/pen/oNxKZOx

@about_javascript
This media is not supported in your browser
VIEW IN TELEGRAM
Skeleton Loaders

Каркасные загрузчики, реализованные с помощью CSS и JavaScript.

#анимация #прелоадеры #css #javascript

https://codepen.io/jh3y/pen/LYdrdgX
This media is not supported in your browser
VIEW IN TELEGRAM
Wi-Fi Fail Animation

Анимация ошибки при подключении к Wi-Fi, реализованная на CSS и SVG, c применением JavaScript

#codepen #css #svg #js #ui_элементы

https://codepen.io/jkantner/pen/OJEMxZR

@about_javascript
This media is not supported in your browser
VIEW IN TELEGRAM
Apple Mice

Анимация разных вариантов мышек, написана с помощью javascript и css.

#анимация #css #js

https://codepen.io/joshbader/pen/njKxzB
This media is not supported in your browser
VIEW IN TELEGRAM
Decryption Effect with Pseudo Elements

Эффект расшифровки с псевдоэлементами. Реализован с помощью CSS и JavaScript.

#анимация #css #js

https://codepen.io/georgehastings/pen/YNMEbe
This media is not supported in your browser
VIEW IN TELEGRAM
Little Gallery

Небольшой пак фотографий/картинок в виде карточек, которые анимируются вот таким способом. Непонятно на сколько это практично, но как минимум это забавно.

#js #css #html #coden

https://codepen.io/yoann-b/pen/abEjWgq
Создаём сайт портфолио с крутой анимацией

Видеоурок по созданию собственного сайта с диагональным плавным скроллом. Автор разбирает популярные техники и тренды веб-разработки, а именно:
— синхронизация вертикальных слайдов,
CSS анимация скролла с инерцией,
— анимация при наведении.

Сайт выглядит современно и наполнен красивыми эффектами, но очень прост в реализации: https://youtu.be/oT0FN1PtmRU

#html #css #json

@about_javascript
This media is not supported in your browser
VIEW IN TELEGRAM
Checkbox Animations With Indeterminate State

Анимированный checkbox, выполненный с помощью SVG, CSS и JavaScript.

#css #js

https://codepen.io/jkantner/pen/BaJmyjo
This media is not supported in your browser
VIEW IN TELEGRAM
🌀 VelocityJS demo

Подвижная анимация для загрузки. Реализована с помощью JavaScript и CSS.

#анимация #css #js

https://codepen.io/sol0mka/pen/eYgydO

@about_javascript
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Rooster Animation

Анимированная сцена, выполненная на чистом CSS, без использования JavaScript.

#css

https://codepen.io/mdusmanansari/pen/GRxKNKP
This media is not supported in your browser
VIEW IN TELEGRAM
CSS animation-delay demo 🤓

Демонстрация задержки анимации, реализованная с помощью css, js.

#анимация #css

https://codepen.io/jh3y/pen/qBdzbGb

@about_javascript
Условный border-radius в CSS

В одной из запрёщенных социальных сетей автор этой статьи нашёл интересное значение border-radius для карточного компонента. Суть в том, что углы элемента настраиваются автоматически в зависимости от размеров экрана с помощью хитрой формулы.

Вот об этой формуле, а также способе её применения и пойдёт речь в этой статье:

https://webformyself.com/uslovnyj-border-radius-v-css/

#фронтенд #css
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Scroll animation — красивая анимация текста при прокрутке. Реализована с помощью CSS и JavaScript

#код #css #javascript

https://codepen.io/Tiopayo/pen/QWZbqZz

@about_javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
Animista — гигантская библиотека CSS-анимаций

Платформа позволяет играть с коллекцией готовых CSS-анимаций и скачивать только те, которые вы собираетесь использовать

Отличный вариант для веб-дизайнеров и разработчиков, которые хотят добавить динамичность и интерактивность в свои проекты

Стоимость: #бесплатно

#CSS #web
​​Гигантскую библиотеку CSS-анимаций заказывали?

Animista позволяет играть с коллекцией готовых CSS-анимаций и скачивать только те, которые вы собираетесь использовать. Отличный вариант для веб-дизайнеров и разработчиков, которые хотят добавить динамичность и интерактивность в свои проекты.

Берите на заметку.

#css #инструменты
This media is not supported in your browser
VIEW IN TELEGRAM
You Must Build a Lighthouse

Игра на HTML и SCSS. Каждый квадрат, в котором можно построить часть дома, - радиокнопка, при активации которой задействуются CSS стили.

#html #css

https://codepen.io/ivorjetski/pen/OJXbvdL
💡AbortSignal.timeout() в действии: на заметку фронтенд-разработчику

👉 Поиграть можно здесь

#css #tip by Shripal Soni