Примочки для сайта: Скрипты для сайта – JavaScript Скрипты

Содержание

Скрипты для сайтов » Страница 7

988 Codepen

Перпендикулярные линии на canvas

Анимированные перпендикулярные линии на канвасе с привязкой к движению курсора.

Перпендикулярные линии на canvas 1 241 Codepen

Колебающиеся градиентные 3d трубки

Объёмные трубки с переливающимся градиентом с определенной амплитудой колыхаются в пространстве. По клику меняется градиент, а на движение курсора реагирует амплитуда трубок

Колебающиеся градиентные 3d трубки 1 243 Parallax / Codepen

Параллакс эффект при ресайзе браузера

Параллакс эффект, созданный на CSS. Тридцать дивов с одним и тем же фоном из цветов, абсолютно с позиционирован и, благодаря координате Z, каждый из дивов смещен на уровень ниже, относительно другого. При этом трансформация по оси Z находится в зависимости от ширины viewport, так как используется единица vw.

Параллакс эффект при ресайзе браузера 1 572 Codepen

Трава на канвасе

Реалистичная трава, колышущаяся от ветра. Камеру можно двигать и смотреть с разных ракурсов. Сделано на three.js

Трава на канвасе 1 253 Codepen

Пиво на CSS

Кружка пива, которая наполняется пивом. Сделано на CSS и с использованием SVG.

Пиво на CSS 1 743 Codepen

Создание 3d из изображения на канвасе и шейдерах

Плоское изображение на канвасе с помощью js и шейдеров переводится в 3d.

Создание 3d из изображения на канвасе и шейдерах 1 626 Codepen

Фосфоресценция

Светящиеся частицы на THREE.js и шейдерах. Продолжение экспериментов с частицами.

Фосфоресценция 1 974 Codepen

Улитка на CSS

Анимация улитки на чистом CSS

Улитка на CSS 1 797 Loading / Codepen

Загрузчик дрифтующая машина

Загрузчик для страницы в виде дрифтующей по кругу машины. Анимация на CSS, машинка это SVG.

Загрузчик дрифтующая машина 1 613 Codepen

Сфера на three.js и шейдерах с эффектом горения

Сфера с эффектом горения на three.js с использование шейдеров

Сфера на three.js и шейдерах с эффектом горения 1 210 Codepen

Кристалл генерируемый случайным образом на three.js

Кристалл генерируемый случайным образом на three.js

Кристалл генерируемый случайным образом на three.js 1 685 Codepen

Анимация svg сферы с помощью anime.js

Анимация svg сферы с помощью библиотеки anime.js

Анимация svg сферы с помощью anime.js

Скрипты для сайтов » Страница 10

5 137 Скрипты / Other

Открытка с Новым годом

Слегка видоизмененная открытка к новому году найденная на codepen. Смотрится эффектно, при этом никакого сложного кода не написано. В основном это анимации на CSS3.

Открытка с Новым годом 4 950 Скрипты / Other

Headroom — липкий header

Headroom.js — это легкий высокопроизводительный JS виджет (без зависимостей), который позволяет реагировать на прокрутку страницы пользователем. Позволяет скрывать шапку сайта при прокрутке вниз и отображать её снова при прокрутке страницы вверх.

Headroom — липкий header 7 613 Скрипты / Form

JQuery nice select — заменяем стандартный select

Легкий jQuery плагин, который заменяет стандартный select на кастомизированный dropdown.

JQuery nice select — заменяем стандартный select 3 970 Полезно

Анализ скорости мобильной версии сайта

Инструмент от Google для владельцев сайтов и разработчиков предназначенный для оценки производительности мобильной версии сайта. Тестирование при 3G подключении, проверка html/css, запуск jаvascript, обнаружение сжатия, юзабилити адаптивности, читаемости текста и т.п.

Анализ скорости мобильной версии сайта 7 062 Скрипты / Layout

Theia Sticky Sidebar — прилипание блоков при скроллировании страницы

Плагин позволяет приклеить любые блоки страницы при её прокручивании, делая их постоянно видимыми. Это полезно когда другие блоки значительно выше чем прикрепляемый блок. Закреплять полезно например такие блоки, как вертикальное меню, рекламный блок, блок с поиском, короткие формы и т.п.

Theia Sticky Sidebar — прилипание блоков при скроллировании страницы 3 502 Скрипты / Colorpicker

Spectrum — colorpicker выбор цвета

Скрипт выбора цветов — colorpicker.

Spectrum — colorpicker выбор цвета 3 066 Скрипты / Time & Clock

flatpickr — datetime picker

Скрипт Date[Time]picker написанный на ванильном jаvascript

flatpickr — datetime picker
7 354 Скрипты / Tabs

Адаптивные вкладки — Responsive Tabs

Плагин отзывчивых вкладок. Вкладки трансформируются в аккордион при достижении заданного CSS breakpoint. Использование этого скрипта для табов будет отлично выглядеть и на десктопе, и на планшете и на мобильном устройстве.

Адаптивные вкладки — Responsive Tabs 10 309 Скрипты / Scroll

Скроллбар — perfect-scrollbar

Плагин позволяющий кастомизировать стандартный скроллбар.

Скроллбар — perfect-scrollbar 3 929 Скрипты / Menu & Nav

Гибкое горизонтальное меню

Небольшой скрипт, который поможет в создании более эстетического адаптивного горизонтального меню. Если размер экрана не позволяет отобразить все пункты горизонтального меню, то данный скрипт перемещает эти пункты в выпадающее меню - "три точки". Использование этого скрипта, позволит отображать адаптивную иконку (гамбургер), тогда, когда вы сами это решите, так как меню теперь будет всегда смотреться аккуратно.

Гибкое горизонтальное меню 3 839 Скрипты / Tabs

Tabulous — плагин вкладок, табов

Tabulous - представляет собой плагин для реализации у себя на сайте блока с вкладками с различными эффектами переключения самих вкладок.

Tabulous — плагин вкладок, табов 4 277 Скрипты / Zoom

ZooMove — масштабирование изображений

jQuery плагин, который позволяет динамически менять масштаб изображения при наведении курсора мыши. Перемещая курсор, можно также зуммировать различные участки изображения.

ZooMove — масштабирование изображений

Скрипты для сайтов » Страница 5

1 364 Codepen

Космическая стрелялка, игра на js

Срелялка на jаvascript. Вы соревнуетесь с компьютером в то, кто кого быстрее подстрелит. Осложняют ситуацию летающие астеройды.

Космическая стрелялка, игра на js 1 187 Text / Codepen

Гибкий текст

Немного css магии font-variation-settings, -webkit-background-clip, -webkit-text-fill-color приправленной js и прикольный эффект над текстом.

Гибкий текст 1 411 Codepen

Экран из матрицы

Анимация экрана из фильма матрица

Экран из матрицы 1 062 Codepen

Бесконечный CSS grid

Бесконечно перетаскиваемые изображения по всем направлении на гридах и с применением библиотеки anime.js

Бесконечный CSS grid 808 Codepen

Спирали

Случайно генерируемые градиентные спирали на канвасе

Спирали 1 536 Codepen

Частицы на three.js

Частицы на three.js с возможностью настроек вариантов отображения с помощью dat-gui

Частицы на three.js 1 469 Скрипты / Other

Изменение формы курсора при наведении на ссылку

Эффект двойного курсора, когда за привычной стрелкой двигается кружок. Когда наводим на элемент с определенным классом, например на ссылку, то кружок плавно увеличивается в размере. Для придания плавности движения кружку используется библиотека GSAP.

Изменение формы курсора при наведении на ссылку 1 905 Slider / Codepen

Слайдер с размытыми градиентными не активными слайдами

Для эффекта размытия в местах сопряжения слайдов используется SVG c фильтром размытия

Слайдер с размытыми градиентными не активными слайдами 1 509 Codepen

CSS фильтры для hover эффекта карточек

Hover эффект на CSS использующий фильтры для заблюривания неактивных карточек

CSS фильтры для hover эффекта карточек 1 090 Codepen

Галактика на WebGL

Простая реализация галактики на three.js. В шейдерах используется текстура картинки звезды.

Галактика на WebGL 974 Codepen

Деление клетки на канвасе, эффект для фона

Фоновый эффект для интро страницы сайта на канвасе. Митозис, деление клеток.

Деление клетки на канвасе, эффект для фона
880 Codepen

Облачный след от курсора на канвасе

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

Облачный след от курсора на канвасе

Скрипты для сайтов » Страница 6

883 Codepen

Просто сфера на three.js

Просто три вращающиеся сферы со случайным цветом для граней на 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 Codepen

GameBoy от Nintendo

GameBoy от Nintendo на CSS с той самой мелодией включения

GameBoy от Nintendo 1 041 Codepen

Дейнерис. Игра престолов

Мать драконов из игры престолов на SVG с параллакс эффектом

Дейнерис. Игра престолов 1 085 Codepen

Эффект искажения на three.js

Эффект перетекания одного изображения в другое на шейдерах, с gsap анимацией на канвасе

Эффект искажения на three.js 863 Codepen

Полет желе (noise)

Абстрактный noise —  полет желе

Полет желе (noise) 707 Codepen

STARFOX Arwing Drone из игры на чистом CSS

Космический истребитель STARFOX Arwing Drone из игры, который воспроизвели с анимацией полета в космосе на чистом CSS

STARFOX Arwing Drone из игры на чистом CSS 940 Codepen

Водопад в лесу на three.js

Водопад в лесу на канвасе с помощью three.js в стиле minecraft

Водопад в лесу на three.js

Загрузчики для страниц

1 797 Loading / Codepen

Загрузчик дрифтующая машина

Загрузчик для страницы в виде дрифтующей по кругу машины. Анимация на CSS, машинка это SVG.

Загрузчик дрифтующая машина 1 498 Loading / Codepen

Загрузчик в виде кубиков лего

Анимация загрузчика страницы в виде кубиков лего. Сделано на CSS.

Загрузчик в виде кубиков лего 6 437 Скрипты / Loading

Анимированные прелоадеры

Несколько видов анимированных загрузчиков для сайта. Анимация сделана на CSS3

Анимированные прелоадеры 2 576 Скрипты / Loading

Стилизация кнопки загрузки

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

Стилизация кнопки загрузки 2 222 Скрипты / Loading

Элементы загрузки на CSS3

Очередные элементы загрузки сделанные только на CSS3. Изображения в трех приведенных примерах не используются.

Элементы загрузки на CSS3 2 157 Скрипты / Loading

CSS3 анимация загрузки

Прелоадер на CSS3 в котором используется два вида анимации: выцветание теругольников и анимация поворота всего элемента. Все вместе эти анимации позволяют создать довольно неплохой эффект.

CSS3 анимация загрузки 3 317 Скрипты / Loading

Оригинальный прелоадер

Необычный анимированный эффект для прелоадера (загрузчика) на css3 и jQuery.

Оригинальный прелоадер 1 258 Скрипты / Loading

Загрузчик как на Facebook

Внешне похожий загрузчик, на ajax загрузчик, используемый на facebook, когда подгружается, что-то тяжелое или ваше интернет соединение не позволяет загрузить страничку мгновенно.

Загрузчик как на Facebook 3 705 Скрипты / Loading

Прелоадер на CSS3

Сделаем CSS3 анимацию, которую можно будет использовать в качестве прелоадера, статуса загрузки чего-либо. Работает в Firefox, Chrome и Safari.

Прелоадер на CSS3 1 335 Скрипты / Loading

Картинка загрузки для аякс запросов

Небольшая заметка о том, как при выполнении на страницы ajax запросов показывается изображение процесса отправки этого запроса - обычной gif анимации.

Картинка загрузки для аякс запросов 3 045 Скрипты / Loading

Прелоадер - preloader

Красивые загрузчики использующие HTML5 canvas.

Прелоадер - preloader 2 106 Скрипты / Loading

Прелоадер (анимированная загрузка) на HTML5

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

Прелоадер (анимированная загрузка) на HTML5

google » Скрипты для сайтов

3 970 Полезно

Анализ скорости мобильной версии сайта

Инструмент от Google для владельцев сайтов и разработчиков предназначенный для оценки производительности мобильной версии сайта. Тестирование при 3G подключении, проверка html/css, запуск jаvascript, обнаружение сжатия, юзабилити адаптивности, читаемости текста и т.п.

Анализ скорости мобильной версии сайта 2 186 Полезно

Сервисы социальных кнопок для сайта

Рассмотрим самые интересные веб-сервисы предоставляющие кнопки популярных социальных сетей, сервисов закладок в "одном флаконе". Не нужно будет ставить для каждой соц. сети их персональный код кнопки, сервисы выдадут вам один код сразу для всех.

Сервисы социальных кнопок для сайта 1 583 Скрипты / Buttons

CSS3 кнопки в стиле Google Plus

Повторим реализацию кнопок, которые сейчас используются на сервисе Google Plus с помощью CSS3.

CSS3 кнопки в стиле Google Plus 1 330 Полезно

Сжатие javascript файлов

В этой статье рассмотрим online способы сжатия js (jаvascript) файлов для уменьшения их размеров. Сейчас очень много веб-ресурсов используют, как сторонние java скрипты (например, таже jQuery библиотека и многочисленные плагины к ней), так и собственной разработки. Сжатие позволит уменьшить размер загружаемой страницы сайта, а соответсвенно и время его загрузки. Это один из этапов оптимизации, который желательно проделать всем.

Сжатие javascript файлов 1 801 Полезно

Шрифты Google API

Google представил для всех бесплатный веб-интерфейс каталога шрифтов Google Font Directory и собственно интерфейса Google Font API , который позволяет веб-мастерам легко и эффективно пользоваться шрифтами, отличающимися от стандартного набора веб-безопасных шрифтов просто подключив выбранный шрифт в CSS.

Шрифты Google API

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *