This media is not supported in your browser
VIEW IN TELEGRAM
Кликабельный слайдер. Реализован с помощью JavaScript и CSS.
#анимация #css #js
https://codepen.io/johnmotyljr/pen/kWwBOw
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥2❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Фоновая анимация в виде деления клеток, реализованная с помощью JavaScript.
#js
https://codepen.io/supah/pen/BqREob
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥5❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Этот лоадер добавит новогоднего настроения вашему сайту. 3D-эффект здесь смотрится особенно хорошо, добавляя глубины и реалистичности. Посмотреть, как он реализован можно тут:
https://codepen.io/jkantner/pen/wvXbboe
#codepen #css #loader
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15🔥6❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Слайдер "До/После", выполненный с помощью SVG, CSS и JavaScript.
#css #js
https://codepen.io/Coding-in-Public/pen/NWyjZwO
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12❤3🔥3
Поскольку технологии веб-программирования быстро развиваются, нам приходится изучать много нового. Некоторые языки и фреймворки настолько сложны, что вы можете не запомнить их синтаксис. Шпаргалки – это заметки, которые помогут вам в этом.
✔️ Шпаргалки
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥3❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация желейного меню при прокрутке. Реализована с помощью JavaScript и CSS.
#анимация #css #js
https://codepen.io/sol0mka/pen/AEbgXK
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8👍4❤2
Planck.js – небольшой физический 2D движок на JavaScript, что отлично подойдет для написания HTML5-игр. Интересный для ознакомления проект.
✔️ Документация
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥7❤3
Представлен в двух видах: js-библиотеки и веб-сервиса
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👍4❤3
This media is not supported in your browser
VIEW IN TELEGRAM
Отзывчивый слайдер Parallax с прозрачными буквами. Реализован с помощью JavaScript и CSS.
#анимация #parallax #css #js
https://codepen.io/mrspok407/pen/bwLwvL
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9❤3👍2
Forwarded from React JS
Это руководство познакомит вас с основными проблемами каждого разработчика React. Вам просто необходимо знать о них для того, чтобы быть в курсе, как справиться с этими проблемами. Советы из статьи, помогут вам в разработке ваших компонентов и организации вашего проекта. После этого введения, вам будут представлены рекомендации для ReactJS разраюотки, которые включают теоретические и практические советы и примеры кода.
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10❤1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
https://codepen.io/ykadosh/pen/KKezJzz
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥4❤1
Недавно “Best of JS” официально объявили список лучших проектов JavaScript 2023 года. В нём представлен обзор трендовых проектов в экосистеме JavaScript за последние 12 месяцев!
Список включает в себя следующие разделы: Most Popular Projects, Frontend Frameworks, React Ecosystem, Vue Ecosystem, Backend/Full Stack, Build Tools, CSS in JS, Testing Tools, Mobile, Desktop, Static Sites, State management, GraphQL.
@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
🔥Direction-aware 3D hover effect (Concept)
Трехмерный эффект наведения с учетом направления (концепция). Реализовано с помощью JavaScript и CSS.
#анимация #css #js
https://codepen.io/noeldelgado/pen/nweYMz
@javascriptv
Трехмерный эффект наведения с учетом направления (концепция). Реализовано с помощью JavaScript и CSS.
#анимация #css #js
https://codepen.io/noeldelgado/pen/nweYMz
@javascriptv
👍17🔥7❤3
This media is not supported in your browser
VIEW IN TELEGRAM
https://codepen.io/ricardoolivaalonso/pen/LYzwGyW
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥18👍5🤯4❤1
✔️ Создание веб-компонентов с помощью WebC на vanilla JavaScript
Итак, зачем использовать веб-компоненты? На высоком уровне двумя основными преимуществами веб-компонентов являются инкапсуляция и отсутствие внешних зависимостей.
Веб-компоненты решают проблему инкапсуляции, позволяя вам ограничить влияние вашего кода CSS и JavaScript областью действия вашего компонента.
Конечно, популярные фреймворки JavaScript, такие как React и Angular, помогают вам достичь аналогичных эффектов инкапсуляции. Итак, что же делает веб-компоненты особенными? Этот вопрос подводит нас ко второму преимуществу: веб-компоненты не зависят от библиотек, и вы можете создавать их, используя только встроенные API JavaScript.
Независимый от библиотек характер веб-компонентов особенно полезен при разработке библиотеки компонентов пользовательского интерфейса. В отличие от других библиотек, созданных для конкретных фреймворков, вы можете использовать веб-компоненты для создания библиотеки, которая не связана с одним технологическим стеком. Это означает, что любой может использовать его, независимо от фреймворка JavaScript, который он использует для своего проекта.
▪Читать дальше
@javascriptv
Итак, зачем использовать веб-компоненты? На высоком уровне двумя основными преимуществами веб-компонентов являются инкапсуляция и отсутствие внешних зависимостей.
Веб-компоненты решают проблему инкапсуляции, позволяя вам ограничить влияние вашего кода CSS и JavaScript областью действия вашего компонента.
Конечно, популярные фреймворки JavaScript, такие как React и Angular, помогают вам достичь аналогичных эффектов инкапсуляции. Итак, что же делает веб-компоненты особенными? Этот вопрос подводит нас ко второму преимуществу: веб-компоненты не зависят от библиотек, и вы можете создавать их, используя только встроенные API JavaScript.
Независимый от библиотек характер веб-компонентов особенно полезен при разработке библиотеки компонентов пользовательского интерфейса. В отличие от других библиотек, созданных для конкретных фреймворков, вы можете использовать веб-компоненты для создания библиотеки, которая не связана с одним технологическим стеком. Это означает, что любой может использовать его, независимо от фреймворка JavaScript, который он использует для своего проекта.
▪Читать дальше
@javascriptv
🔥7👍5❤2
This media is not supported in your browser
VIEW IN TELEGRAM
https://codepen.io/cassie-codes/pen/vYerjmr
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9❤2🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
💡 GitHub Dark Mode Toggle — элегантный переключатель тёмной темы.
https://codepen.io/milanraring/pen/qBEPzKB
#js #css
@javascriptv
https://codepen.io/milanraring/pen/qBEPzKB
#js #css
@javascriptv
🔥12👍4👎4❤2
API Яндекс.Карты – геокодирование и маршрутизация на JavaScript
Предположим, что перед пользователем стоит задача обработать большой список адресов/координат, а именно, посчитать расстояния между точками по автомобильным дорогам и определить координаты внушительного списка объектов.
Тогда-то он и столкнется с отсутствием возможности пакетной обработки в пользовательском интерфейсе сервиса. Однако, Яндекс об этом позаботился, предоставив в условно-бесплатное пользование JavaScript API.
▪ Читать дальше
@javascriptv
Предположим, что перед пользователем стоит задача обработать большой список адресов/координат, а именно, посчитать расстояния между точками по автомобильным дорогам и определить координаты внушительного списка объектов.
Тогда-то он и столкнется с отсутствием возможности пакетной обработки в пользовательском интерфейсе сервиса. Однако, Яндекс об этом позаботился, предоставив в условно-бесплатное пользование JavaScript API.
▪ Читать дальше
@javascriptv
👍8🔥3❤2👎1
This media is not supported in your browser
VIEW IN TELEGRAM
https://codepen.io/team/jotform/pen/XWmqoMp
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥23👍6❤4
This media is not supported in your browser
VIEW IN TELEGRAM
Пикачу в коробке
Пикачу в коробке отрисован и анимирован с помощью чисто CSS. Отдельные элементы графики сделаны с помощью DIV’ов и затем стилизованы.
Чтобы запустить анимацию нужно нажать на верх коробки и потянуть курсов в сторону. Попробуйте сами. Там же вы найдёте код проекта:
https://codepen.io/maxi83c/pen/JjOZdWX
@javascriptv
Пикачу в коробке отрисован и анимирован с помощью чисто CSS. Отдельные элементы графики сделаны с помощью DIV’ов и затем стилизованы.
Чтобы запустить анимацию нужно нажать на верх коробки и потянуть курсов в сторону. Попробуйте сами. Там же вы найдёте код проекта:
https://codepen.io/maxi83c/pen/JjOZdWX
@javascriptv
👍15🔥6😱3❤2