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

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

17.04.2019 988 Codepen

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

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

02.04.2019 1 241 Codepen

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

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

29.03.2019 1 243 Parallax / Codepen

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

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

29.03.2019 1 572 Codepen

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

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

27.03.2019 1 253 Codepen

Пиво на CSS

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

28.01.2019 1 743 Codepen

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

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

27.01.2019 1 626 Codepen

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

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

26.01.2019 1 974 Codepen

Улитка на CSS

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

25.01.2019 1 797 Loading / Codepen

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

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

24.01.2019 1 613 Codepen

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

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

23.01.2019 1 210 Codepen

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

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

22.01.2019 1 685 Codepen

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

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

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

08.12.2017 5 137 Скрипты / Other

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

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

07.12.2017 4 950 Скрипты / Other

Headroom — липкий header

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

07.12.2017 7 613 Скрипты / Form

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

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

31.07.2017 3 970 Полезно

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

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

20.07.2017 7 062 Скрипты / Layout

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

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

23.09.2016 3 502 Скрипты / Colorpicker

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

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

22.09.2016 3 066 Скрипты / Time & Clock

flatpickr — datetime picker

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

13.09.2016 7 354 Скрипты / Tabs

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

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

12.09.2016

10 309 Скрипты / Scroll

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

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

11.09.2016 3 929 Скрипты / Menu & Nav

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

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

16.06.2016 3 839 Скрипты / Tabs

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

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

13.06.2016 4 277 Скрипты / Zoom

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

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

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

24.06.2019 1 364 Codepen

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

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

19.06.2019 1 187 Text / Codepen

Гибкий текст

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

18.06.2019 1 411 Codepen

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

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

10.06.2019 1 062 Codepen

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

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

08.06.2019 808 Codepen

Спирали

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

30.05.2019 1 536 Codepen

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

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

28.05.2019 1 469 Скрипты / Other

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

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

22.05.2019 1 905 Slider / Codepen

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

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

21.05.2019 1 509 Codepen

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

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

20.05.2019 1 090 Codepen

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

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

16.05.2019 974 Codepen

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

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

15.05.2019 880 Codepen

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

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

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

14.05.2019 883 Codepen

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

Просто три вращающиеся сферы со случайным цветом для граней на three.js.

07.05.2019 846 Codepen

Эффект шестигранной мозайки

Эффект мозайки на изображении реализованной с помощью three.js и шейдеров.

30.04.2019 1 287 Codepen

Обесцвечивание картинки под курсором

Область под курсором переводит в оттенки серого цветное изображение благодаря шейдерам

29.04.2019 1 358 Animation / Menu & Nav / Codepen

Эффект наведения следящий за курсором

Подчеркивание ссылки при наведении на пункт меню

28.04.2019 1 051 Codepen

Анимация иконки гамбургера

Анимации иконки гамбургера в нескольких разных вариациях на CSS

27.04.2019 1 539 Form / Codepen

Форма авторизации и регистрации

Концепт формы авторизации и регистрации с интересной анимацией переключения

26.04.2019 832 Codepen

GameBoy от Nintendo

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

25.04.2019 1 041 Codepen

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

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

24.04.2019 1 085 Codepen

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

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

20.04.2019 863 Codepen

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

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

19.04.2019 707 Codepen

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

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

18.04.2019 940 Codepen

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

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

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

25.01.2019 1 797 Loading / Codepen

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

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

21.01.2019 1 498 Loading / Codepen

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

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

19.12.2017 6 437 Скрипты / Loading

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

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

09.01.2014 2 576 Скрипты / Loading

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

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

12.08.2012 2 222 Скрипты / Loading

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

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

20.04.2012 2 157 Скрипты / Loading

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

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

07.04.2012 3 317 Скрипты / Loading

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

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

15.12.2011 1 258 Скрипты / Loading

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

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

12.12.2011 3 705 Скрипты / Loading

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

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

10.10.2011 1 335 Скрипты / Loading

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

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

23.09.2011 3 045 Скрипты / Loading

Прелоадер — preloader

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

28.03.2011 2 106 Скрипты / Loading

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

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

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

31.07.2017 3 970 Полезно

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

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

14.12.2012 2 186 Полезно

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

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

07.02.2012 1 583 Скрипты / Buttons

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

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

27.06.2011 1 330 Полезно

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

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

04.05.2011 1 801 Полезно

Шрифты Google API

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