Интересные скрипты для сайта
Анимированные чекбоксы на чистом 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 жук.
30 легковесных JavaScript плагинов и библиотек
В это обзоре мы познакомимся с 30 бесплатными JavaScript плагинами и библиотеками, которые сфокусированы на определенных задачах. Это простые, полезные и легкие решения, которые помогут сделать процесс веб-дизайна и разработки гораздо проще и быстрее.
Как и следовало ожидать ниже вы найдете много плагинов для создания ползунков, галерей с изображениями, адаптивных меню, а также много других полезных плагинов и библиотек. Также в списке представлены плагины, которые предлагают действительно уникальные функциональные возможности. Давайте взглянем на список!
Philter
Philter доступен как плагин для jQuery и vanilla JavaScript. Дает вам возможность контролировать CSS фильтры с HTML атрибутами.
iziModal.js
Современный плагин, который позволит Вам создавать красивые модальные окна с оригинальным дизайном. Всплывающие окна на jQuery можно настраивать с разными эффектами и разметкой. Есть готовые варианты для фрейма, формы, AJAX`a. Все, что необходимо — это подключить библиотеку и стили плагина. Скачать плагин jQuery modal можно по ссылке выше.
Algolia Places
Algolia Places может мгновенно превратить любой input в элемент поиска адреса с помощью автозаполнения. Она имеет встроенную систему ранжирования, которая предлагает наиболее очевидные варианты в первую очередь, и другие мощные функции, такие как возможность игнорировать небольшие опечатки и понять, что на самом деле имел в виду пользователь. Библиотека очень проста в использовании и поможет вам сэкономить кучу времени.
Marginotes
Библиотека Marginotes позволит вам сделать крутые подсказочки «на полях», почти как на Медиуме. Есть версия с jQuery и без неё.
Microlight.js
Microlight.js — это небольшой инструмент, предназначенный для подсветки кода в любом языке программирования. Вам не потребуется подключение сторонних пакетов или библиотек, все уже готово в этом миниатюрном скрипте.
Force.js
Force.js – это простой способ анимировать скроллинг или другой элемент на странице. Библиотека имеет много различных функций для анимации и пытается использовать CSS-анимации по умолчанию, что очень хорошо, однако, если браузер не поддерживает CSS3, будут использованы средства javascript. Force.js поддерживает даже настолько старые браузеры, которые не поддерживают свойство transition.
Substance
Substance это JavaScript библиотека для редактирования веб контента. Она включает в себя все необходимые инструменты для создания тестовых редакторов и системы веб публикаций.
List.js
Простой мини-скрипт List.js размером 7 КБ добавляет интерактивности маркированным спискам в HTML. С помощью скрипта можно сделать удобный поиск, сортировку, редактирование списка с добавлением или удалением новых элементов (например, адресная книга на странице).
Datedropper.js
Datedropper плагин JQuery, который обеспечивает быстрый и простой способ управлять полем ввода даты.
jfMagnify
JQuery плагин, который создает эффект лупы для увеличения изображений и HTML-элементов.
Bricks.js
Генератор структуры в стиле masonry для элементов с фиксированной шириной.
jQuery formBuilder
jQuery formBuilder это новый jQuery плагин для быстрого создания drag & drop форм.
SweetAlert2
Библиотека sweetAlert это замена стандартной функции window.alert(). Библиотека не несет за собой никакие зависимости. Состоит только из двух файлов: js и css. Эта библиотека имеет три особенности. Первое — вы можете использовать ее в любом проекте. Второе это отдельная ветка специально адаптированная для Twitter Bootstrap. И третье, отдельная ветка которую вы можете использовать в ваших Android проектах.
Popper.js
Библиотека Popper.js предлагает ещё один легковесный вариант для имплементации всплывающих подсказок на сайтах и web приложениях. В сжатом виде занимает около 4 килобайт и имеет удобный API.
Image Blur Plugin
Image Blur Plugin представляет собой легкий кросс-браузерный плагин JQuery для размытия изображений.
Lightgallery.js
LightGallery это скрипт-галерея (лайтбокс), написанная на языке JavaScript, которая показывает изображения поверх веб страницы и способна работать как с одиночными изображениями, так и с галереями с использованием эффектов плавного изменения размеров и прозрачности (fade in/out). Скрипт протестирован во всех A-grade браузерах: IE 7+, Firefox 2+, Safari 3+, Opera 9.5+, Chrome.
iMissYou.js
Небольшой, удобный JQuery плагин для изменения названия и фавикона страницы, при уходе пользователя с вашего сайта.
ScrollReveal
Плагин, позволяющий анимировать элементы при скролле страницы.
baguetteBox.js
baguetteBox.js простой и легкий в использовании лайтбокс, без зависимостей от внешних библиотек с поддержкой жестов на мобильных устройствах. Написан на чистом JavaScript.
Bideo.js
Bideo.js это JavaScript библиотека, которая упрощает процесс добавления видео на фон веб-страниц.
flatpickr
Небольшой инструмент, который поможет вам быстро создавать стилизованные всплывающие окна с выбором даты. Используется стандартный HTML-тег input с назначением класса плагина. Ничего лишнего, все аккуратно и без зависимостей.
Slidebars
Slidebars – это JQuery фреймворк позволяющий очень быстро подобрать необходимые стили для мобильного меню без определённой привязки к источнику. Slidebars может редактировать и обрабатывать все основные размеры мобильного меню сайта.
Loud Links
Иногда требуется создать на сайте интерактивные звуковые эффекты. Данный плагин справиться с любой задачей в этом направлении. Устанавливайте любые звуковые дорожки на любые блоки и элементы.
anime.js
Anime.js – гибкая и легковесная JavaScript библиотека, помогающая анимировать различные штуки. Если вам нужно добавить анимации, то с помощью anime.js сделать это будет легче. Проект существует не так давно, но уже успел собрать почти семь тысяч звезд на гитхабе
Cleave.js
Делаете много форм, но каждый раз пишите маски для инпутов вручную? Тогда библиотека Cleave.js — для вас. Она предлагает большое количество вариантов форматирования текстовых полей.
Skippr
Skippr — это простой и удобный в использовании jQuery плагин, для реализации полноэкранного слайдера на вашем сайте.
Turntable.js
Turntable.js – библиотека, которая позволяет из нескольких картинок сделать одну модель, которую можно вращать. Плюсы этой библиотеки в том, что она легковесная, отзывчивая, легка в установке и настройке.
jqGifPreview
Легкий плагин jQuery для создания удобного превью GIF-анимаций, как на Facebook. Подключаете плагин и указываете идентификатор объекта, к которому хотите применить эффекты.
MediumEditor
Плагин написан на vanilla JavaScript, расширяет возможности MediumEditor (копии medium.com WYSIWYG редактора) и дает возможность пользователям вставлять в редактор различные виды контента (в зависимости от доступных аддонов).
Push.js
Push.js это кросс-браузерное решение для получения и запуска JavaScript desktop уведомлений.
SuperEmbed.js
Крошечная библиотека JavaScript, которая делает встроенные объекты отзывчивыми, сохраняя при этом оригинальные пропорции. Она поддерживает широкий спектр источников, включая Youtube, Flickr, Vine, VideoPress и DailyMotion.
InlineTweet.js
Благодаря этой библиотеке, вы сможете добавить кнопку Twitter к любому тексту на веб-странице. Просто добавьте span с нужными атрибутами и InlineTweet автоматически добавит выбранный текст в ссылку. При нажатии по тексту, он сгенерирует твит, вместе с хэштегами и URL.
Группы: СКРИПТЫ САЙТОВ
Скрипты сайтов, все категории на seo-zona.com
Скрипт хайп проекта Investcoin
Скачать бесплатно скрипт хайп проекта Investcoin. Зарабатывай на криптовалютном рынке вместе с Investcoin. Заключи контракт в личном кабинете и получай до 3% прибыли еженедельно. Качаем…
Скрипт экономической игры Castle Crashers
Современный скрипт экономической игры Castle Crashers скачать бесплатно. CastleCrashers – Это увлекательная онлайн игра с выводом реальных денег! В нашей игре Вам предстоит нанимать и…
Слив скрипта экономической игры Fox Money
Выкладываю чистый скрипт экономической игры без дыр Fox Money. Скрипт на движке фруктовой фермы, но отличается от обычных (в бесплатном доступе). Качаем скрипт и тестируем.
Современный скрипт фруктовой фермы
Скачать бесплатно современный скрипт фруктовой фермы. Фруктовая ферма — это движок экономической онлайн игры с выводом реальных денег. Данный скрипт фруктовой фермы позволяет зарабатывать на…
Скрипт экономической игры человек паук
Качаем отличный скрипт экономической игры человек паук бесплатно. Яркий скрипт экономической игры. Качайте и тестируйте. Таким образом можно создать свою игру на скрипте фруктовая ферма…
Скрипт экономической игры Green Farm
Отличный скрипт экономической игры Green Farm на базе фруктовой фермы. Green Farm — это игровой симулятор фруктовой фермы с возможностью вывода реальных денег. Приобретайте саженцы фруктовых…
Скрипт экономической игры Solar Money
Современный и уникальный скрипт экономической игры Solar Money. Адаптивная экономическая игра с выводом денег в уникальном дизайне. Сёрфинг, бонусы. Платёжная система PAYEER, автовыплаты. Качаем скрипт…
Скрипт экономической игры чайная ферма
Отличный скрипт экономической игры чайная ферма на базе FF скачать бесплатно. ПОКУПАЙТЕ КУСТЫ ЧАЯ! СОБИРАЙТЕ ЛИСТЫ ЧАЯ С КУСТОВ! ВЫВОДИТЕ ДОХОД НА СВОИ КОШЕЛЬКИ! Как начать…
Скрипт сократителя ссылок phpShort v3.7.0 NULLED
Скрипт сократителя ссылок phpShort v3.7.0 NULLED – это усовершенствованная платформа URL Shortener, которая позволяет легко сокращать ссылки, ориентировать аудиторию на основе их местоположения или платформы…
Скрипт онлайн кинотеатра MTDb v3.2.4
Скрипт онлайн кинотеатра MTDb v3.2.4 позволяет вам легко создать свой собственный полнофункциональные сайт с фильмами и телешоу (киносайт) за считанные минуты с нулевым знанием в…
Трюки 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% к той, что указана на баннере.
Полезные скрипты на PHP и JavaScript
Для придания Вашему сайту большей функциональности и информативности, Вам рано или поздно придется использовать некоторые из ниже приведенных скриптов. Мы выкладываем только проверенные и действительно интересные скрипты!
Для удобства поиска скриптов, мы сгруппировали все скрипты в следующие группы:
Полный список полезных скриптов на PHP и JavaScript:
| Наименование темы | Оценка | Посещений | Ком.* | |
| 1) | Скрипт звездного рейтинга | 24 | 2988 | 8 |
| 2) | Скрипт текущей даты и времени на jQuery | 32 | 7030 | 1 |
| 3) | Простой скрипт плавающего блока | 106 | 4984 | 4 |
| 4) | Создание вкладок при помощи HTML и CSS | 174 | 31108 | 38 |
| 5) | Простая форма обратной связи | 29 | 8947 | 2 |
| 6) | Скрипт рейтинга со звездочками | 190 | 26035 | 36 |
| 7) | Скрипт спойлеров в один ряд | 27 | 5035 | 4 |
| 8) | Скрипт слайдера, спрятанного под спойлер | 10 | 3632 | 5 |
| 9) | Скрипт спойлера с отдельным размещением заголовка и содержимого | 11 | 4851 | 14 |
| 10) | Защита сайта от частых обращений к страничкам | 11 | 4701 | 12 |
| 11) | Добавление комментариев на сайт | 151 | 44784 | 119 |
| 12) | Модерация комментариев на сайте | 16 | 3962 | 7 |
| 13) | Скрипт спойлера с динамической загрузкой изображений | 19 | 3472 | 7 |
| 14) | JQuery подсветка строк таблицы | 21 | 4663 | 3 |
| 15) | Подсветка столбцов и строк таблицы на jQuery | 28 | 4713 | 1 |
| 16) | Скрипт галереи изображений на jQuery | 22 | 5314 | 4 |
| 17) | Обновленный скрипт спойлера с плавным открытием и скрытием содержимого | 225 | 25565 | 100 |
| 18) | Показать скрытые данные по клику мышки | 59 | 12561 | 11 |
| 19) | Скрипт выбора цвета фона на jQuery | 130 | 7510 | 11 |
| 20) | Скрипт опросов на PHP и MySQLi | 60 | 10372 | 61 |
* Количество комментариев к теме, прошедших модерацию.
Если Вы знаете еще какие-нибудь полезные скрипты для вебмастеров и хотите ими поделиться, то пишите нам через форму обратной связи или на форум.
После проверки работоспособности скрипта, мы обязательно добавим Ваши скрипты на сайт, если они будут действительно полезными и интересными для вебмастеров.