HTML5 » Скрипты для сайтов
Эффекты для текстовых полей
Несколько интересных эффектов для текстовых полей включающих некоторые новые методы реализации и идеи. В основном используются CSS transitions и изредка CSS animations на label тегах или на псевдо-элементах.

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

Адаптивная галерея least.js
Пришло время адаптивных сайтов, продолжаем эту тематику в галерее, одинаково хорошо отображаемой как на десктопе, так и на мобильных устройствах. В галерее используется плагин lazyload - отложенная загрузка картинок, который позволяет экономить трафик. При наведении курсора на изображение отображается краткое описание, а по клику происходит показ полной версии изображения. По умолчанию изображения формируются случайным образом на странице.

Адаптивное многоуровневое меню
Экспериментальное меню позволяющее с экономить пространство на вашем сайте, где требуется использование много уровневого меню. "Детки" заменяют собой "родителей" не загромождая страницу. Меню можно устанавливать на страницы с адаптивным дизайном.

Адаптивное Retina меню
Красочное адаптивное меню с поддержкой Retina дисплеев. В зависимости от размера окна браузера меню принимает один из трех видов: для десктопов - обычное горизонтальное отображение, двухколоночное для планшетов и мобильная версия ввиде иконки-ссылки для отображения и скрытия пунктов меню на экранах небольших размеров. Для поддержки Retina используются иконки ввиде шрифта, а не ввиде картинок, таким образом мы избегаем пикселизации при изменении размера.

Размытое меню на CSS3
Простое горизонтальное меню с эффектом размытия и с элементом адаптивности. Используется CSS3 и HTML5.

Стильная форма регистрации на CSS3
Простая и стильная регистрационная форма для сайта. Для её работы требуется jQuery и плагин placeholder.

HTML5 Boilerplate
«Самый популярный фронтенд шаблон» - или как было написано раньше - это HTML/CSS/JS шаблон для всех маньяков, пишущих быстрые, неглючные и ориентированные на будущее сайты.

Круглое социальное меню
Сделаем круглое социальное меню в котором не используются изображения. Иконки социальных сервисов берутся из специального шрифта.

Turn.js - перелистывание страниц
Turn.js плагин добавляющий эффект похожий на перелистывание страниц в книгах для HTML5. Используется аппаратное ускорение. Работает на планшетах и смартфонах. Прост в управлении и весит всего 6Kb.

Кисть с эффектом кривой Безье
Создадим ещё одну кисть, теперь уже с эффектом кривой Безье, для созданной нами ранее paint программы.

Bubble кисть для Paint программы
Сейчас сделаем bubble кисть для созданной в прошлой статье paint программы на html5.

- Назад
- 1
- 2
- Вперёд
Скрипты для сайтов » Страница 3
Curl noise
Пример curl noise с элементами в виде коробок. Используются шейдеры и webGL библиотека Kgl

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

Клянусь Богом, я не пьян!
Три одинаковых изображения накладываются друг на друга образуя интересный эффект. При движении курсора, меняется положение изображений, создавая дополнительный объем.

Фрактальные круги
Случайно генерируемые круги

Носорог
Носорог

Линейный фрактал
Анимация линейного фрактала на канвасе

Сверкающие звезды
Космос с сияющими звездами на канвасе и шейдерах

Свинья-копилка
Анимация svg свиньи копилки с помощью GSAP tweenmax

Неоновые огни
Неоновые огни на канвасе с помощью шейдеров. Неоновое сердце и знак бесконечности

Одуванчик
Одуванчик на канвасе. Реагирует на движение курсора.

Долгий путь
Бесконечный цикл из простейших геометрических фигур расположенных по заданной траектории. Перемещаясь вместе с камерой, пролетаем через каждую фигуру.

Ночь, улица, фонарь... шейдеры
Эксперимент с шейдерами. Мелькающий свет фонарей и машин сквозь окно в дождливую ночь... воображение достраивает примерно такую картину. Реализовано с помощью three.js и tweenmax

Скрипты для сайтов » Страница 4
Резиновый ползунок или range slider
Range slider с эффектом резиновости реализованном с помощью gsap tweenmax.

Жидкий текст при наведении
При hover на текст его фон становится текучим, как жидкость.

Разлетающиеся на осколки изображения
Слайдер изображений, которые при клике разлетаются на осколки с плавной анимацией реализованной на GSAP.

Красочный мир турбулентности
Разноцветные частицы закручиваются в одну или несколько спиралей на канвасе. По клику генерируется новая случайная картинка.

Рассеивающиеся шестиугольники
Рассеивающиеся шестиугольники по канвасу на jаvascript

Солнечные лучи
Солнечные лучи на изображении. При движении изображения создается эффект прохождения лучей сквозь листву дерева. Сделано с использованием шейдеров и jаvascript

Энергия
Энергетические лучи следующие за курсором. Написано на JS на canvas

Волна из частиц
Волна на canvas из летящих частиц

Бегущая лошадь на CSS
Реализованная на CSS бегущая лошадь.

Текстурный переход между изображениями на three.js
При наведении на картинку происходит плавный переход сквозь текстуру для показа другой картинки. При движении курсора мыши так же происходит наклон в 3d пространстве. Реализовано на three.js

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

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

Скрипт голосования для сайта

Первый вариант скрипта голосования показывает сколько проголосовавших всего, выводит на экран сумму голосов, и имеет две кнопки "Понравилось" и "Не понравилось".
Второй вариант почти такой же, только вместо вывода общего числа проголосовавших, он показывает сколько посетителей проголосовало "за", и сколько "против".
Третий вариант самый упрощённый вариант, и здесь отсутствуют кнопки "за" и "против", здесь нет вывода общего числа голосовавших, здесь есть одна кнопка, которая фиксирует, что пользователю понравилось и суммарное число выводится на дисплей формы. И кстати, эта форма имеет соответственно самый маленький размер, что так же является её достоинством.
Для установки скрипта голосования, вам всего лишь нужно скачать архив (ниже), залить его на сервер и там распаковать. А в html коде прописать любой из вариантов.
Код для *.html
<!DOCTYPE html>
<html>
<head>
<link href="votingfiles/voting.css" rel="stylesheet" type="text/css" />
<script src="votingfiles/voting.js" type="text/jаvascript"></script>
</head>
<body>
<!-- Первый вариант -->
<div></div>
<!-- Второй вариант -->
<div></div>
<!-- Третий вариант -->
<div></div>
</body>
</html>
Для того, чтобы формы голосования на всех ваших страницах работали от одного скрипта, нужно на каждой странице в коде (выше) сделать одно изменение.А именно здесь: изменяете только вторую часть после vt_. Придумывать можно абсолютно любые имена, только латиницей разумеется, и так для каждой страницы - своё имя. Всё, изменений больше делать никаких не нужно, кроме того, что если изменить оформление в стилевом файле, и заменить в скрипте латиницу на русские слова.
Все данные о пользователях, "скрипт голосования" хранит в текстовом файле, а кому нужно будет подключить Базу данных MySQL (о чём писал выше), тот найдёт инструкцию с указаниями, как это сделать (прилагается в архиве).
На этом всё, кому понравилась статья о скрипте голосования, нажимаем на Лайки и пишем комментарии!

Скачать скрипт голосования для сайта
Похожие статьи
Станислав
16 мая 2019 18:47

Спасибо большое!!!!
Добавить комментарийСкрипты для сайта


Responsive FlipBook jQuery — один из лучших своего рода скриптов для организации журнала, брошюры или книжки-каталога на сайте. Скрипт разработан с помощью jQuery c эффектом перелистывания страниц, что выглядит очень красиво и привлекательно. Пример такого скрипта можно посмотреть на сайтах популярных брендов: oriflame, avon и т.д.
Скрипт онлайн чата для любого сайт на PHP (WordPress, Joomla, Drupal, OpenCart,…) Скрипты для сайтаУниверсальный скрипт онлайн чата, который подойдет для любого сайта, в том числе и для популярных CMS: WordPress, Joomla, Drupal, OpenCart и других, работающих на PHP и MySQL.
Простой скрипт доски объявлений о работе (вакансии и резюме). Скрипты для сайтаПример работы
С помощью скрипта доски объявлений о работе можно создать простую поисковую базу данных рабочих мест. Пользователи могут зарегистрироваться/авторизоваться с помощью социально сети facebook или твиттера.
Скрипт полностью настраиваемый, Вы может создавать любые типы и категории полей, запросов и форм (график работы, полные или не полный рабочий день, категории вакансий и т.д.)
Особенности скрипта:
- авторизация через соц.сети
- форма поиска
- страница список пользователей
- пользователи могут редактировать свои профили
- управление правами на группы пользователям
- уведомления по почте
Пример работы
Geo Locator — Мультиязычный (присутствует поддержка русского языка) скрипт, который выводит информацию по заданному IP адресу или по имени хоста (название сайта). Данный скрипт разработан на основе Google Maps и Maxmind GeoIP.
Чистый и современный дизайн. Код полностью написан на XHTML и CSS, что не составит труда внести изменения и использовать данный скрипт на своем сайте в определенной форме или на отдельной странице.
3D Аккордеон меню — скрипт (CSS3 и HTML5) Скрипты для сайта
Пример работы
Это чистый скрипт 3D аккордеон меню, выполненный на CSS3 и HTML5 с эффектами анимации. Скрипт легко настроить и персонализировать под свой стиль.
Особенности скрипта:
- чистый код
- поддержка iOS систем
- 42 цветовых стиля
- 3D эффекты вращения
- 6 эффектов анимации
Хотите организовать на свое сайте что-то вроде файлообменной сети или создать полностью специализированный сайт файлового хостинга, тогда скрипт Paid4Upload, написанный полностью на PHP, вам обязательно подойдет.
Sitemap Generator Pro v6.0 — PHP скрипт карты сайта Скрипты для сайтаВсем известно что карта сайта является неотъемлемой составляющей для улучшения показателей поисковой оптимизации (SEO) нашего сайта. С помощью карты сайта поисковикам проще отслеживать изменение информации на вашем сайте, что приводит к более быстрому индексированию сайта.
Sitemap Generator Pro — является простым и легким в установке PHP скриптом.
Особенности плагина:
- никаких ограничении во вложенности и кол-ву страниц
- скрипт может генерировать:
— XML карту сайта
— HTML карту сайта
— Карту сайта изображений, виде, новостей
— Карту сайта для мобильных устройств - дополнительные поля для описании теста и изображении
- быстрая и легкая установка
- Авто-пинг для поисковых систем
Пример работы
WheEllipse — это уникальный плагин, разработанный на библиотеках jQuery, с помощью которого Вы можете создать несколько интерактивных социальных закладок с эффектом вращения по окружности или по форме эллипса.
Таблица тарифов и цен на CSS3 и jQuery Скрипты для сайта
Пример работы
Особенности скрипта:
- Быстрый и функциональный
- Эффекты и анимация выполнены на CSS3 и jQuery
- 8 цветовых стилей и 29 эффектов анимации
- Дополнительный стиль анимации каждой строки, вы можете определить глобальные анимации и настраивать каждую строку
- В архиве документация, исходники, скриншоты и PNG