Javascript
18.7K subscribers
794 photos
116 videos
2 files
1.23K links
По всем вопросам - @workakkk

@itchannels_telegram -🔥лучшие ИТ-каналы

@ai_machinelearning_big_data - машинное обучение

@JavaScript_testit- js тесты

@pythonl - 🐍

@ArtificialIntelligencedl - AI

@datascienceiot - ml 📚

РКН: № 5153160945
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ List Styles — список. Реализована с помощью CSS и JavaScript

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

https://codepen.io/yexx/pen/OJzQNVN

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥42
This media is not supported in your browser
VIEW IN TELEGRAM
🚀 Work scroll — изящная реализация прокрутки страницы. Реализована с помощью CSS и JavaScript

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

https://codepen.io/Zuraavl/pen/jOQEmzM

@javascriptv
11👍3👎1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Slider — красивый слайдер с различными блюдами. Реализована с помощью CSS и JavaScript

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

https://codepen.io/kristen17/pen/BaGOOMm

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15🤔32🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Shopping UI - красивый каталог товаров и корзина, сделанные при помощи JS библиотеки - Vue.js

https://codepen.io/mo-ro/pen/jObjGJm

#код #css #javascript

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥54👏1
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Button pushed inside style — изящная анимация иконок при наведении курсора. Реализована с помощью CSS и JavaScript

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

https://codepen.io/Juxtopposed/pen/jOKqXMJ

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥41
This media is not supported in your browser
VIEW IN TELEGRAM
❄️ Snow — анимация падающего снега, реализованная на CSS.

https://codepen.io/alphardex/pen/dyPorwJ

#анимация #css

@javascript
👍21🔥7😁2🎉2
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Loading — красивая загрузка в виде анимированного шара. Реализована с помощью CSS и JavaScript

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

https://codepen.io/ma77os/pen/JjMRmLP

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍123🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Kippo Hover Card Effect

Эффект раскрытия карточек при наведении, реализованный с помощью CSS и JavaScript.

#css #js

https://codepen.io/Hyperplexed/pen/zYWdYoo

@javascriptv
🔥106👍3
🖥JavaScript нужен не везде!

Возможно, вы думаете: "везде, где я использую JS - это единственный верный вариант". Возможно, это и так, но полезно знать, что и разработчики браузеров, и авторы спецификаций переносят на CSS и HTML многие функции, для которых еще несколько лет назад требовался JS. Именно об этом и пойдет речь в этой статье.

https://www.htmhell.dev/adventcalendar/2023/2/

#html #css #javascript

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
15🔥2👍1
This media is not supported in your browser
VIEW IN TELEGRAM
🐠Koi Fish

Создано и анимировано на чистом CSS.

#css

https://codepen.io/Adir-SL/pen/LYEPzxW

@javascriptv
🔥34👍54🎉4
This media is not supported in your browser
VIEW IN TELEGRAM
🌟 Animated Star Rating

Каждая звезда - это радио кнопка, при нажатии на которую задействуются свои CSS-стили.

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

#css

@javascriptv
👍24🔥42
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Rotating border

Граница сделана из псевдоэлементов, которые анимируются в CSS.

#css

https://codepen.io/Chokcoco/pen/dypaobm

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15🔥65👏1
This media is not supported in your browser
VIEW IN TELEGRAM
A moment of pure CSS

Создано без использования JS. Анимации реализованы при помощи CSS keyframes.

https://codepen.io/ivorjetski/pen/yLjeqgb

#css

@javascriptv
15👍7🔥3
👌🏻🤞🏼Классная библиотека JS, о которой возможно ты никогда не слышал

Hammer.js — это библиотека для распознавания жестов 🤲🏻 на сенсорных устройствах. Чтобы добавить её в проект, можно использовать NPM:
npm install --save hammerjs

Yarn:
yarn add hammerjs

, или подключить напрямую через CDN. Она позволяет легко реагировать на такие жесты, как тапы, двойные тапы, удержания и свайпы, делая интерфейс более дружелюбным и интерактивным.

Hammer.js предлагает удобные инструменты для работы с жестами, что особенно актуально для мобильных приложений и сайтов.

📍Github
📍Docs

#js #javascript #nodejs #css #html

@javascriptv
👍144🔥3🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ Анимация Пикачу в коробке

Анимированный пикачу в коробке отрисован и анимирован с помощью чисто CSS. Отдельные элементы графики сделаны с помощью DIV’ов и затем стилизованы.

Чтобы запустить анимацию нужно нажать на верх коробки и потянуть курсов в сторону. Попробуйте сами. Там же вы найдёте код проекта:

https://codepen.io/maxi83c/pen/JjOZdWX

#codepen #css
👍17🔥54
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Material Input Animation

Заголовок поля смещается как только начинают вводить данные.

Примеры применения:
- поиск фамилии в списках;
- поиск контакта для денежного перевода.

#css #формы

📌 Код

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍225🔥5
⚡️ Полезная шпаргалка по относительным единицам измерения CSS.

Здесь наглядно видно, чем отличается em от rem. Сохраните её, чтобы не забыть.

#шпаргалка #css

@javascriptv
👍29🔥74😱1
This media is not supported in your browser
VIEW IN TELEGRAM
💥 Карточки принимают 3D-форму при наведении на соцсети.

#css #карточки #соцсети #hover

https://codepen.io/CryBaby2003/pen/dyMLJQZ

@javascriptv
👍20🔥73👏2👎1😁1🤬1
⭐️ Roadmap для веб-разработчиков

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

Он составил интерактивную дорожную карту для веб-разработчиков.

К каждому пункту прилагаются ссылки на ресурсы, где можно изучить или подтянуть соответствующую тему.

Это отличный способ организовать обучение и следить за своим прогрессом в веб-разработке.

https://andreasbm.github.io/web-skills/

@javascriptv


#roadmap #web #js #html #css
👍21🔥94