Скрипты для сайтов » Страница 7
988 CodepenПерпендикулярные линии на canvas
Анимированные перпендикулярные линии на канвасе с привязкой к движению курсора.
1 241
CodepenКолебающиеся градиентные 3d трубки
Объёмные трубки с переливающимся градиентом с определенной амплитудой колыхаются в пространстве. По клику меняется градиент, а на движение курсора реагирует амплитуда трубок
1 243
Parallax / CodepenПараллакс эффект при ресайзе браузера
Параллакс эффект, созданный на CSS. Тридцать дивов с одним и тем же фоном из цветов, абсолютно с позиционирован и, благодаря координате Z, каждый из дивов смещен на уровень ниже, относительно другого. При этом трансформация по оси Z находится в зависимости от ширины viewport, так как используется единица vw.
1 572
CodepenТрава на канвасе
Реалистичная трава, колышущаяся от ветра. Камеру можно двигать и смотреть с разных ракурсов. Сделано на three.js
1 253
CodepenПиво на CSS
Кружка пива, которая наполняется пивом. Сделано на CSS и с использованием SVG.
1 743
CodepenСоздание 3d из изображения на канвасе и шейдерах
Плоское изображение на канвасе с помощью js и шейдеров переводится в 3d.
1 626
CodepenФосфоресценция
Светящиеся частицы на THREE.js и шейдерах. Продолжение экспериментов с частицами.
1 974
CodepenУлитка на CSS
Анимация улитки на чистом CSS
1 797
Loading / CodepenЗагрузчик дрифтующая машина
Загрузчик для страницы в виде дрифтующей по кругу машины. Анимация на CSS, машинка это SVG.
1 613
CodepenСфера на three.js и шейдерах с эффектом горения
Сфера с эффектом горения на three.js с использование шейдеров
1 210
CodepenКристалл генерируемый случайным образом на three.js
Кристалл генерируемый случайным образом на three.js
1 685
CodepenАнимация svg сферы с помощью anime.js
Анимация svg сферы с помощью библиотеки anime.js
Скрипты для сайтов » Страница 10
5 137 Скрипты / OtherОткрытка с Новым годом
Слегка видоизмененная открытка к новому году найденная на codepen. Смотрится эффектно, при этом никакого сложного кода не написано. В основном это анимации на CSS3.
4 950
Скрипты / OtherHeadroom — липкий header
Headroom.js — это легкий высокопроизводительный JS виджет (без зависимостей), который позволяет реагировать на прокрутку страницы пользователем. Позволяет скрывать шапку сайта при прокрутке вниз и отображать её снова при прокрутке страницы вверх.
7 613
Скрипты / FormJQuery nice select — заменяем стандартный select
Легкий jQuery плагин, который заменяет стандартный select на кастомизированный dropdown.
3 970
ПолезноАнализ скорости мобильной версии сайта
Инструмент от Google для владельцев сайтов и разработчиков предназначенный для оценки производительности мобильной версии сайта. Тестирование при 3G подключении, проверка html/css, запуск jаvascript, обнаружение сжатия, юзабилити адаптивности, читаемости текста и т.п.
7 062
Скрипты / LayoutTheia Sticky Sidebar — прилипание блоков при скроллировании страницы
Плагин позволяет приклеить любые блоки страницы при её прокручивании, делая их постоянно видимыми. Это полезно когда другие блоки значительно выше чем прикрепляемый блок. Закреплять полезно например такие блоки, как вертикальное меню, рекламный блок, блок с поиском, короткие формы и т.п.
3 502
Скрипты / ColorpickerSpectrum — colorpicker выбор цвета
Скрипт выбора цветов — colorpicker. 3 066
Скрипты / Time & Clockflatpickr — datetime picker
Скрипт Date[Time]picker написанный на ванильном jаvascript
7 354
Скрипты / TabsАдаптивные вкладки — Responsive Tabs
Плагин отзывчивых вкладок. Вкладки трансформируются в аккордион при достижении заданного CSS breakpoint. Использование этого скрипта для табов будет отлично выглядеть и на десктопе, и на планшете и на мобильном устройстве.
Скроллбар — perfect-scrollbar
Плагин позволяющий кастомизировать стандартный скроллбар.
3 929
Скрипты / Menu & NavГибкое горизонтальное меню
Небольшой скрипт, который поможет в создании более эстетического адаптивного горизонтального меню. Если размер экрана не позволяет отобразить все пункты горизонтального меню, то данный скрипт перемещает эти пункты в выпадающее меню — «три точки». Использование этого скрипта, позволит отображать адаптивную иконку (гамбургер), тогда, когда вы сами это решите, так как меню теперь будет всегда смотреться аккуратно.
3 839
Скрипты / TabsTabulous — плагин вкладок, табов
Tabulous — представляет собой плагин для реализации у себя на сайте блока с вкладками с различными эффектами переключения самих вкладок.
4 277
Скрипты / ZoomZooMove — масштабирование изображений
jQuery плагин, который позволяет динамически менять масштаб изображения при наведении курсора мыши. Перемещая курсор, можно также зуммировать различные участки изображения.
Скрипты для сайтов » Страница 5
1 364 CodepenКосмическая стрелялка, игра на js
Срелялка на jаvascript. Вы соревнуетесь с компьютером в то, кто кого быстрее подстрелит. Осложняют ситуацию летающие астеройды.
Гибкий текст
Немного css магии font-variation-settings, -webkit-background-clip, -webkit-text-fill-color приправленной js и прикольный эффект над текстом.
1 411
CodepenЭкран из матрицы
Анимация экрана из фильма матрица
1 062
CodepenБесконечный CSS grid
Бесконечно перетаскиваемые изображения по всем направлении на гридах и с применением библиотеки anime.js
808
CodepenСпирали
Случайно генерируемые градиентные спирали на канвасе
1 536
CodepenЧастицы на three.js
Частицы на three.js с возможностью настроек вариантов отображения с помощью dat-gui
1 469
Скрипты / OtherИзменение формы курсора при наведении на ссылку
Эффект двойного курсора, когда за привычной стрелкой двигается кружок. Когда наводим на элемент с определенным классом, например на ссылку, то кружок плавно увеличивается в размере. Для придания плавности движения кружку используется библиотека GSAP.
1 905
Slider / CodepenСлайдер с размытыми градиентными не активными слайдами
Для эффекта размытия в местах сопряжения слайдов используется SVG c фильтром размытия
1 509
CodepenCSS фильтры для hover эффекта карточек
Hover эффект на CSS использующий фильтры для заблюривания неактивных карточек
1 090
CodepenГалактика на WebGL
Простая реализация галактики на three.js. В шейдерах используется текстура картинки звезды.
974
CodepenДеление клетки на канвасе, эффект для фона
Фоновый эффект для интро страницы сайта на канвасе. Митозис, деление клеток.
880
CodepenОблачный след от курсора на канвасе
Облачная маска привязанная к движению курсора позволяет увидеть скрытое изображение.
Скрипты для сайтов » Страница 6
883 CodepenПросто сфера на three.js
Просто три вращающиеся сферы со случайным цветом для граней на three.js.
846
CodepenЭффект шестигранной мозайки
Эффект мозайки на изображении реализованной с помощью three.js и шейдеров.
1 287
CodepenОбесцвечивание картинки под курсором
Область под курсором переводит в оттенки серого цветное изображение благодаря шейдерам
1 358
Animation / Menu & Nav / CodepenЭффект наведения следящий за курсором
Подчеркивание ссылки при наведении на пункт меню
1 051
CodepenАнимация иконки гамбургера
Анимации иконки гамбургера в нескольких разных вариациях на CSS
1 539
Form / CodepenФорма авторизации и регистрации
Концепт формы авторизации и регистрации с интересной анимацией переключения
832
CodepenGameBoy от Nintendo
GameBoy от Nintendo на CSS с той самой мелодией включения
1 041
CodepenДейнерис. Игра престолов
Мать драконов из игры престолов на SVG с параллакс эффектом
1 085
CodepenЭффект искажения на three.js
Эффект перетекания одного изображения в другое на шейдерах, с gsap анимацией на канвасе
863
CodepenПолет желе (noise)
Абстрактный noise — полет желе
707
CodepenSTARFOX Arwing Drone из игры на чистом CSS
Космический истребитель STARFOX Arwing Drone из игры, который воспроизвели с анимацией полета в космосе на чистом CSS
940
CodepenВодопад в лесу на three.js
Водопад в лесу на канвасе с помощью three.js в стиле minecraft
Загрузчики для страниц
1 797 Loading / CodepenЗагрузчик дрифтующая машина
Загрузчик для страницы в виде дрифтующей по кругу машины. Анимация на CSS, машинка это SVG.
1 498
Loading / CodepenЗагрузчик в виде кубиков лего
Анимация загрузчика страницы в виде кубиков лего. Сделано на CSS.
6 437
Скрипты / LoadingАнимированные прелоадеры
Несколько видов анимированных загрузчиков для сайта. Анимация сделана на CSS3
2 576
Скрипты / LoadingСтилизация кнопки загрузки
Креативные кнопки выполняющие роль прогресс бара, отображающего ход выполнения, какого-либо действия требующего время.
2 222
Скрипты / LoadingЭлементы загрузки на CSS3
Очередные элементы загрузки сделанные только на CSS3. Изображения в трех приведенных примерах не используются.
2 157
Скрипты / LoadingCSS3 анимация загрузки
Прелоадер на CSS3 в котором используется два вида анимации: выцветание теругольников и анимация поворота всего элемента. Все вместе эти анимации позволяют создать довольно неплохой эффект.
3 317
Скрипты / LoadingОригинальный прелоадер
Необычный анимированный эффект для прелоадера (загрузчика) на css3 и jQuery.
1 258
Скрипты / LoadingЗагрузчик как на Facebook
Внешне похожий загрузчик, на ajax загрузчик, используемый на facebook, когда подгружается, что-то тяжелое или ваше интернет соединение не позволяет загрузить страничку мгновенно.
3 705
Скрипты / LoadingПрелоадер на CSS3
Сделаем CSS3 анимацию, которую можно будет использовать в качестве прелоадера, статуса загрузки чего-либо. Работает в Firefox, Chrome и Safari.
1 335
Скрипты / LoadingКартинка загрузки для аякс запросов
Небольшая заметка о том, как при выполнении на страницы ajax запросов показывается изображение процесса отправки этого запроса — обычной gif анимации.
3 045
Скрипты / LoadingПрелоадер — preloader
Красивые загрузчики использующие HTML5 canvas.
2 106
Скрипты / LoadingПрелоадер (анимированная загрузка) на HTML5
Простой прелоадер для сайта. Эффект анимированной загрузки чего-либо.
google » Скрипты для сайтов
3 970 ПолезноАнализ скорости мобильной версии сайта
Инструмент от Google для владельцев сайтов и разработчиков предназначенный для оценки производительности мобильной версии сайта. Тестирование при 3G подключении, проверка html/css, запуск jаvascript, обнаружение сжатия, юзабилити адаптивности, читаемости текста и т.п.
2 186
ПолезноСервисы социальных кнопок для сайта
Рассмотрим самые интересные веб-сервисы предоставляющие кнопки популярных социальных сетей, сервисов закладок в «одном флаконе». Не нужно будет ставить для каждой соц. сети их персональный код кнопки, сервисы выдадут вам один код сразу для всех.
1 583
Скрипты / ButtonsCSS3 кнопки в стиле Google Plus
Повторим реализацию кнопок, которые сейчас используются на сервисе Google Plus с помощью CSS3.
1 330
ПолезноСжатие javascript файлов
В этой статье рассмотрим online способы сжатия js (jаvascript) файлов для уменьшения их размеров. Сейчас очень много веб-ресурсов используют, как сторонние java скрипты (например, таже jQuery библиотека и многочисленные плагины к ней), так и собственной разработки. Сжатие позволит уменьшить размер загружаемой страницы сайта, а соответсвенно и время его загрузки. Это один из этапов оптимизации, который желательно проделать всем.
1 801
ПолезноШрифты Google API
Google представил для всех бесплатный веб-интерфейс каталога шрифтов Google Font Directory и собственно интерфейса Google Font API , который позволяет веб-мастерам легко и эффективно пользоваться шрифтами, отличающимися от стандартного набора веб-безопасных шрифтов просто подключив выбранный шрифт в CSS.