css скрипты для сайта
Css скрипты для сайта
Анимированные чекбоксы на чистом css
Вам какой кофе?
Интересная реализация отображения количества различных ингредиентов в видах кофе. По клику на вид кофе, в чашке мы видим в какой пропорции и какие ингредиенты содержаться внутри.
Анимированная периодическая таблица Менделеева
Анимация элементов периодической таблицы в зависимости от агрегатного состояния вещества: газообразное, жидкое или твердое.
Постер для игры GTA5 с помощью css grid и clip-path
С помощью css свойства display: grid и clip-path воспроизведён постер для компьютерной игры GTA5.
Невозможная лампочка
Попытайтесь включить свет в темной комнате. Дверь откроется и мишка снова выключит лампочку. Сделано с использованием GSAP анимации.
Новогодняя мотня от Яндекса 2.1
Елочные шарики, которые двигаются при наведении на них мышкой, а ещё издают звук. Новая версия 2.1! Специально от pcvector.net. Удален flash. Переписан jаvascript. Всех с наступающим Новым годом!
Снегопад на базе particles.js
Снегопад реализованный с помощью библиотеки particles.js. Добавлено реагирование снежинок на движение и нажатие курсора. В качестве снежинки используется простая прозрачная png картинка, которую можно заменить не только на снежинки.
SnowFall — Анимация падающего снега
Анимация падающего снега воспроизведенная на JQuery. Для анимации используется библиотека TweenMax от GreenSock. Снежинки имеют разное размытие, за счет чего достигается эффект объемности происходящего.
Слайдер с анимацией css свойства clip-path
Концепт слайдера с анимацией css свойства clip-path. При наведении на изображение проявляется текст, а картинка обрезается.
Эффект разорванных фотографий
Эффект разорванных изображений реализованный с помощью svg фильтров с разными настройками.
Размытый текст с помощью фильтра blur
Размытие текста с помощью css свойства filter: blur()
Винтажный volkswagen жук на css
Сверстанный на html и css винтажный автомобиль volkswagen жук.
Трюки CSS и JavaScript, которые вдохнут жизнь в ваш статический сайт
Последние несколько недель я работал над своим сайтом и хотел придать ему некоторый динамизм. Эта статья не о создании веб-страницы. Я покажу готовые сниппеты с объяснениями.
3D-анимация на JS
Первый трюк — замечательный трёхмерный эффект на JS.
Как видите, когда указатель мыши проходит по этой «карточке», элементы внутри нее обретают трёхмерность.
Как это делается
Сначала создаётся HTML div:
Здесь у нас есть основной класс (card) и два других класса внутри card (header and info). Header будет классом, содержащим изображение (в нашем примере — логотип Medium), а info будет содержать текст в карточке. Теперь давайте добавим CSS, чтобы карта выглядела лучше.
Здесь я объявил высоту, ширину, границу, отступ и тень. Обновите страницу, и вы увидите результаты. Последний шаг — добиться 3D-эффекта при наведении курсора мыши на карту. Для этого я воспользовался JS:
Откройте для себя Vanta.js для анимации фона
Устали от статичных цветов и изображений на фоне веб-страницы? VantaJs разработана, чтобы оживить фон:
Как это делается
Это довольно просто. Добавьте в HTML такой код:
Это установит фон Vanta.js Globe для идентификатора htmlid.
Чтобы переключаться между ними, измените VANTA.GLOBE на VANTA.[Backgroundname]. Конечно, перед этим нужно добавить соответствующий cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.[backgroundname].min.js.
ScrollReveal
Для тех, кто не знал об этой фантастической библиотеке JS, ScrollReveal может отображать элементы при прокрутке веб-страницы:
Как это делается
Изменение размера и цвета букв
Этот небольшой трюк с CSS действительно впечатляет при правильном использовании:
Как это делается
Создайте несколько новых HTML-элементов span и укажите их класс:
3. Применяя CSS :hover, мы изменяем размер букв и их цвет:
Теперь, когда вы наведёте указатель на буквы, вы увидите, как они меняют размер и цвет. Чтобы добиться еще более динамичного эффекта, я предлагаю создать отдельный класс для каждой буквы с разными размерами и цветами. Кроме того, вы можете применить CSS :hover к каждому типу элемента в HTML. Например, я тоже применил его к своей контактной форме:
Свойство animation
Дополнили материал описанием свойства из статьи Криса Койера.
Свойство animation в CSS можно использовать для анимации многих других свойств CSS, таких как color, background-color, height, или width. Каждая анимация должна быть определена с помощью @keyframes, которое затем вызывается с помощью свойства animation, например:
Каждое правило @keyframes определяет, что должно происходить в определённые моменты анимации. Например, 0 % — это начало анимации, а 100 % — её конец. Этими ключевыми кадрами можно управлять либо с помощью сокращённого свойства animation, либо с помощью его восьми подсвойств, чтобы обеспечить больший контроль над ключевыми кадрами.
Подсвойства
Вот полный список значений, которые может принимать каждое из этих вложенных свойств:
| animation-timing-function | ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)) |
| animation-duration | Xs или Xms |
| animation-delay | Xs или Xms |
| animation-iteration-count | X |
| animation-fill-mode | forwards, backwards, both, none |
| animation-direction | normal, alternate |
| animation-play-state | paused, running, running |
Несколько шагов
Если анимация имеет одинаковые начальные и конечные свойства, полезно разделять запятыми значения 0 и 100 % внутри @keyframes:
Несколько анимаций
Вы можете разделить значения запятыми, чтобы также объявить несколько анимаций в селекторе. В приведённом ниже примере мы хотим изменить цвет круга в @keyframe, одновременно перемещая его из стороны в сторону с помощью другого свойства.
Производительность
Анимация большинства свойств является проблемой производительности, поэтому мы должны соблюдать осторожность перед анимацией любого свойства. Однако есть определённые комбинации, которые можно безопасно анимировать:
Какие свойства можно анимировать?
Поддержка браузерами
Эти данные о поддержке браузера взяты с сайта Caniuse, где имеется более подробная информация. Число означает, что браузер поддерживает функцию в этой версии и выше.
Настольные
| Android Chrome | Android Firefox | Android | iOS Safari |
| 87 | 83 | 4* | 6.0-6.1* |
Префиксы
Хотя поддержка этого свойства в современных браузерах достаточно хороша, мы, возможно, захотим поддерживать как можно больше старых браузеров. В этом случае нужно использовать префиксы поставщиков:
Такие трюки подойдут для того, чтобы вдохнуть жизнь в ваш сайт-визитку или сайт пет-проекта, над которым вы работаете. Если у вас есть какие-то свои трюки — призываю делиться ими в комментах. И не забывайте о промокоде HABR, который дает дополнительную скидку 10% к той, что указана на баннере.
Css скрипты для сайта
Разместил: Apocalypse 5 августа 2021
Автор: Apocalypse 5 августа 2021 Last modified 1 августа 2021
Самый необычный способ показать и скрыть пароль в поле на CSS3 и Javascript
Разместил: Apocalypse 3 августа 2021
Автор: Apocalypse 3 августа 2021 Last modified 28 июля 2021
Реалистичная кнопка с анимированной подсветкой на CSS3
Разместил: Apocalypse 2 августа 2021
Автор: Apocalypse 2 августа 2021 Last modified 28 июля 2021
Жидкая кнопка на HTML5 и CSS3
Разместил: Apocalypse 31 июля 2021
Автор: Apocalypse 31 июля 2021 Last modified 25 июля 2021
Светлое анимированное горизонтальное меню на jQuery + SVG + CSS3
Разместил: Apocalypse 30 июля 2021
Автор: Apocalypse 30 июля 2021 Last modified 25 июля 2021
Слайдер изображений с глючным эффектом переходов на CSS3 и HTML5 Canvas
Разместил: Apocalypse 29 июля 2021
Автор: Apocalypse 29 июля 2021 Last modified 25 июля 2021
Анимированная страница 404 в стиле приключений на SVG + CSS3 + Javascript
Разместил: Apocalypse 28 июля 2021
Автор: Apocalypse 28 июля 2021 Last modified 25 июля 2021
Стильные белые часы на Javascript и CSS3
Разместил: Apocalypse 26 июля 2021
Автор: Apocalypse 26 июля 2021 Last modified 24 июля 2021
Необычный прикольный чекбокс, который невозможно выключить
Разместил: Apocalypse 25 июля 2021
Автор: Apocalypse 25 июля 2021 Last modified 24 июля 2021
Только что пришел извинился отдал 500р )) заказ гробов и спам на его номер и его жены дал свои плоды 😀
@fapalnaapo, о боже. Заказ гробов! Ну дела XD
звоните в центр реабилитации наркоманов и просите вам помочь
Css скрипты для сайта
Скрипты HTML, CSS, jQuery и JavaScript, а так-же все для WordPress, DataLife Engine, XenForo, Invision Power Board и других CMS
Автор: delux · Published 22.07.2020
CSS Skeleton Screen Loading Effect — Красивый эффект прогрузки контента
Skeleton — Крутой эффект прогрузки контента для вашего сайта.
Автор: delux · Published 22.02.2019 · Last modified 25.02.2019
22 клик-эффекта для кнопок
Представляем вашему внимаю сборку эффектов для кнопок после клика на них.
Автор: delux · Published 22.02.2019 · Last modified 08.04.2019
Индикатор прокрутки страницы
Довольно просто скрипт добавляющий некий интерактив на страницы сайта — индикатор прокрутки страницы.
Автор: delux · Published 10.02.2019 · Last modified 25.02.2019
Hover effect’s — Эффекты при наведении на блок
Подборка красивых hover- эффектов для сайта. Список включает в себя 21 эффект.
Автор: delux · Published 02.02.2019 · Last modified 25.02.2019
Простое и стильное полноэкранное меню для сайта
Представляем вашему вниманию простое и в то-же время стильное полноэкранное меню — Fullscreen navigation
Автор: delux · Published 05.08.2018
Font Awesome Pro
Font Awesome Pro — Большой набор масштабируемых векторных иконок, которые вы с легкостью можете персонализировать используя CSS — цвет, размер, анимация, тени и т.д Данные иконки очень удобно использовать как в графических редакторах (например.
Автор: delux · Published 15.03.2017 · Last modified 25.02.2019
Адаптивное выпадающее меню для сайта
Реализация адаптивного многоуровнего выпадающего меню для сайта на основе jQuery, JavaScript и CSS
Автор: delux · Published 14.03.2017 · Last modified 25.02.2019
Адаптивное 3D меню для сайта
Реализация простого адаптивного 3D меню для сайта на основе JavaScript.
Автор: delux · Published 13.03.2017
Адаптивная галерея для сайта — Gamma Gallery
Реализация стильной и одновременно современной адаптивной галереи Gamma Gallery для сайта на основе jQuery
Автор: delux · Published 15.01.2017
Красивый слайдер с паралакс эффектом
Реализация качественного полноэкранного слайдера с возможностью перетаскивания слайдов и parallax эффектом
Автор: delux · Published 12.01.2017 · Last modified 02.03.2018
Адаптивная галерея изображений — PhotoSwipe
Представляем вашему вниманию качественно проработанную адаптивную галерею изображений — PhotoSwipe. В галереи реализована возможность как управления на дестопных браузерах, так и жестами на мобильных устройствах.
Автор: delux · Published 11.01.2017 · Last modified 25.02.2019
Перспективная навигация для сайта
Несколько вариантов адаптивной полноэкранной навигации для сайта в 3D перспективе.
Автор: delux · Published 22.05.2016 · Last modified 25.02.2019
Панель слайдов на CSS3
Реализация панели со слайдами с качественными эффектами на CSS3
Автор: delux · Published 22.05.2016 · Last modified 25.02.2019
Анимированные вкладки (табы) для сайта
Реализация анимированных вкладок (Табов) для сайт. Четыре варианта.
Автор: delux · Published 22.05.2016 · Last modified 25.02.2019
Подборка логин-панелей
Подборка из пяти современных логин-панелей для сайта.
Автор: delux · Published 20.05.2016 · Last modified 25.02.2019
Полноэкранная страница с перелистыванием
Реализация красивой страницы с эффектом перелистывания страниц в книжном стиле..в общем смотрите демо.
Css скрипты для сайта
Автор: delux · Published 22.07.2020
CSS Skeleton Screen Loading Effect — Красивый эффект прогрузки контента
Skeleton — Крутой эффект прогрузки контента для вашего сайта.
Автор: delux · Published 27.09.2019
Font Awesome Pro v5.11.1
Font Awesome Pro — свежая версия иконочного (векторного) шрифта и CSS-инструментария. Font Awesome PRO предлагает вам масштабируемые векторные иконки, которые вы можете с легкостью персонализировать — размер, цвет, тени и все, что можно сделать.
Автор: delux · Published 02.04.2019
Стилизованные скролл-бары для сайта
Настраиваемый пользовательский плагин jQuery для полосы прокрутки (скроллбар). Включает в себя вертикальную и / или горизонтальную полосу прокрутки, настраиваемый импульс прокрутки, колесико мыши (через плагин jQuery mousewheel), поддержку клавиатуры и сенсорного ввода, готовые темы.
Автор: delux · Published 22.02.2019 · Last modified 25.02.2019
22 клик-эффекта для кнопок
Представляем вашему внимаю сборку эффектов для кнопок после клика на них.
Автор: delux · Published 22.02.2019 · Last modified 08.04.2019
Индикатор прокрутки страницы
Довольно просто скрипт добавляющий некий интерактив на страницы сайта — индикатор прокрутки страницы.
Автор: delux · Published 10.02.2019 · Last modified 25.02.2019
Hover effect’s — Эффекты при наведении на блок
Подборка красивых hover- эффектов для сайта. Список включает в себя 21 эффект.
Автор: delux · Published 02.02.2019 · Last modified 25.02.2019
Простое и стильное полноэкранное меню для сайта
Представляем вашему вниманию простое и в то-же время стильное полноэкранное меню — Fullscreen navigation
Автор: delux · Published 11.11.2018
jQuery Input Mask — Маска для полей ввода
Крошечный и простой в использовании плагин jQuery для добавления масок ввода в текстовые поля с использованием атрибута данных Html5. Помогает вам направлять посетителей вводить данные в определенном формате, таком как: номер телефона, дата рождения.
Автор: delux · Published 11.11.2018
Multibox Menu — Полноэкранная навигация
Multibox Menu — Современная реализация полноэкранной адаптивной навигации для сайта.
Автор: delux · Published 05.08.2018
Font Awesome Pro
Font Awesome Pro — Большой набор масштабируемых векторных иконок, которые вы с легкостью можете персонализировать используя CSS — цвет, размер, анимация, тени и т.д Данные иконки очень удобно использовать как в графических редакторах (например.
Автор: delux · Published 10.03.2018 · Last modified 25.02.2019
Вертикальные и горизонтальные табы на jQuery
Данный плагин позволяет реализовать простые и удобные в использовании вертикальные/горизонтальные вкладки на jQuery.
Автор: delux · Published 15.06.2017
Адаптивная галерея Mosaic Flow
Адаптивная галерея для сайта со структурой в виде сетки (Аналог Pinterest).
Автор: delux · Published 15.03.2017 · Last modified 25.02.2019
Адаптивное выпадающее меню для сайта
Реализация адаптивного многоуровнего выпадающего меню для сайта на основе jQuery, JavaScript и CSS
Автор: delux · Published 15.03.2017 · Last modified 25.02.2019
Адаптивное jQuery меню для сайта
Реализация красивого многоуровнего адаптивного jQuery меню для сайта — Flat jQuery Responsive Menu
Автор: delux · Published 14.03.2017 · Last modified 25.02.2019
Адаптивное 3D меню для сайта
Реализация простого адаптивного 3D меню для сайта на основе JavaScript.
Автор: delux · Published 13.03.2017
Адаптивная галерея для сайта — Gamma Gallery
Реализация стильной и одновременно современной адаптивной галереи Gamma Gallery для сайта на основе jQuery