HTML5 » Скрипты для сайтов
Эффекты для текстовых полей
Несколько интересных эффектов для текстовых полей включающих некоторые новые методы реализации и идеи. В основном используются CSS transitions и изредка CSS animations на label тегах или на псевдо-элементах.
2 545
Скрипты / Loading
Стилизация кнопки загрузки
Креативные кнопки выполняющие роль прогресс бара, отображающего ход выполнения, какого-либо действия требующего время.
8 723
Скрипты / Gallery
Адаптивная галерея least.js
Пришло время адаптивных сайтов, продолжаем эту тематику в галерее, одинаково хорошо отображаемой как на десктопе, так и на мобильных устройствах. В галерее используется плагин lazyload - отложенная загрузка картинок, который позволяет экономить трафик. При наведении курсора на изображение отображается краткое описание, а по клику происходит показ полной версии изображения. По умолчанию изображения формируются случайным образом на странице.
5 019
Скрипты / Menu & Nav
Адаптивное многоуровневое меню
Экспериментальное меню позволяющее с экономить пространство на вашем сайте, где требуется использование много уровневого меню. "Детки" заменяют собой "родителей" не загромождая страницу. Меню можно устанавливать на страницы с адаптивным дизайном.
3 327
Скрипты / Menu & Nav
Адаптивное Retina меню
Красочное адаптивное меню с поддержкой Retina дисплеев. В зависимости от размера окна браузера меню принимает один из трех видов: для десктопов - обычное горизонтальное отображение, двухколоночное для планшетов и мобильная версия ввиде иконки-ссылки для отображения и скрытия пунктов меню на экранах небольших размеров. Для поддержки Retina используются иконки ввиде шрифта, а не ввиде картинок, таким образом мы избегаем пикселизации при изменении размера.
2 196
Скрипты / Menu & Nav
Размытое меню на CSS3
Простое горизонтальное меню с эффектом размытия и с элементом адаптивности. Используется CSS3 и HTML5.
3 810
Скрипты / Form
Стильная форма регистрации на CSS3
Простая и стильная регистрационная форма для сайта. Для её работы требуется jQuery и плагин placeholder.
1 838
Полезно
HTML5 Boilerplate
«Самый популярный фронтенд шаблон» - или как было написано раньше - это HTML/CSS/JS шаблон для всех маньяков, пишущих быстрые, неглючные и ориентированные на будущее сайты.
1 469
Скрипты / Social Media
Круглое социальное меню
Сделаем круглое социальное меню в котором не используются изображения. Иконки социальных сервисов берутся из специального шрифта.
4 854
Скрипты / Slider
Turn.js - перелистывание страниц
Turn.js плагин добавляющий эффект похожий на перелистывание страниц в книгах для HTML5. Используется аппаратное ускорение. Работает на планшетах и смартфонах. Прост в управлении и весит всего 6Kb.
943
Скрипты / Other
Кисть с эффектом кривой Безье
Создадим ещё одну кисть, теперь уже с эффектом кривой Безье, для созданной нами ранее paint программы.
731
Скрипты / Other
Bubble кисть для Paint программы
Сейчас сделаем bubble кисть для созданной в прошлой статье paint программы на html5.
- Назад
- 1
- 2
- Вперёд
Скрипты для сайтов » Страница 3
Curl noise
Пример curl noise с элементами в виде коробок. Используются шейдеры и webGL библиотека Kgl
1 026
Codepen
Глубокий фрактальный зум
Три разновидности фрактала. При перемещении курсора мы либо погружаемся, либо всплываем. Для эффектов используются шейдеры.
Клянусь Богом, я не пьян!
Три одинаковых изображения накладываются друг на друга образуя интересный эффект. При движении курсора, меняется положение изображений, создавая дополнительный объем.
591
Codepen
Фрактальные круги
Случайно генерируемые круги
473
Codepen
Носорог
Носорог
472
Codepen
Линейный фрактал
Анимация линейного фрактала на канвасе
758
Codepen
Сверкающие звезды
Космос с сияющими звездами на канвасе и шейдерах
577
Codepen
Свинья-копилка
Анимация svg свиньи копилки с помощью GSAP tweenmax
977
Codepen
Неоновые огни
Неоновые огни на канвасе с помощью шейдеров. Неоновое сердце и знак бесконечности
632
Codepen
Одуванчик
Одуванчик на канвасе. Реагирует на движение курсора.
622
Codepen
Долгий путь
Бесконечный цикл из простейших геометрических фигур расположенных по заданной траектории. Перемещаясь вместе с камерой, пролетаем через каждую фигуру.
743
Codepen
Ночь, улица, фонарь... шейдеры
Эксперимент с шейдерами. Мелькающий свет фонарей и машин сквозь окно в дождливую ночь... воображение достраивает примерно такую картину. Реализовано с помощью three.js и tweenmax
Скрипты для сайтов » Страница 4
Резиновый ползунок или range slider
Range slider с эффектом резиновости реализованном с помощью gsap tweenmax.
1 061
Text / Codepen
Жидкий текст при наведении
При hover на текст его фон становится текучим, как жидкость.
Разлетающиеся на осколки изображения
Слайдер изображений, которые при клике разлетаются на осколки с плавной анимацией реализованной на GSAP.
798
Codepen
Красочный мир турбулентности
Разноцветные частицы закручиваются в одну или несколько спиралей на канвасе. По клику генерируется новая случайная картинка.
940
Codepen
Рассеивающиеся шестиугольники
Рассеивающиеся шестиугольники по канвасу на jаvascript
859
Codepen
Солнечные лучи
Солнечные лучи на изображении. При движении изображения создается эффект прохождения лучей сквозь листву дерева. Сделано с использованием шейдеров и jаvascript
786
Codepen
Энергия
Энергетические лучи следующие за курсором. Написано на JS на canvas
1 347
Codepen
Волна из частиц
Волна на canvas из летящих частиц
891
Codepen
Бегущая лошадь на CSS
Реализованная на CSS бегущая лошадь.
1 255
Codepen
Текстурный переход между изображениями на three.js
При наведении на картинку происходит плавный переход сквозь текстуру для показа другой картинки. При движении курсора мыши так же происходит наклон в 3d пространстве. Реализовано на three.js
1 322
Codepen
Космическая стрелялка, игра на js
Срелялка на jаvascript. Вы соревнуетесь с компьютером в то, кто кого быстрее подстрелит. Осложняют ситуацию летающие астеройды.
1 134
Text / Codepen
Гибкий текст
Немного css магии font-variation-settings, -webkit-background-clip, -webkit-text-fill-color приправленной js и прикольный эффект над текстом.
Скрипт голосования для сайта
Скрипт голосования для сайта написан на PHP с применением ява скриптов AJAX и легко интегрируется на html страницы. Голосование и вывод показателей в скрипте происходит без перезагрузки страницы, и для каждого IP адреса голосовать можно только 1 раз в сутки.Первый вариант скрипта голосования показывает сколько проголосовавших всего, выводит на экран сумму голосов, и имеет две кнопки "Понравилось" и "Не понравилось".
Второй вариант почти такой же, только вместо вывода общего числа проголосовавших, он показывает сколько посетителей проголосовало "за", и сколько "против".
Третий вариант самый упрощённый вариант, и здесь отсутствуют кнопки "за" и "против", здесь нет вывода общего числа голосовавших, здесь есть одна кнопка, которая фиксирует, что пользователю понравилось и суммарное число выводится на дисплей формы. И кстати, эта форма имеет соответственно самый маленький размер, что так же является её достоинством.
Для установки скрипта голосования, вам всего лишь нужно скачать архив (ниже), залить его на сервер и там распаковать. А в 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
Спасибо большое!!!!
Добавить комментарийСкрипты для сайта
FlipBook jQuery 1.6 Скрипты для сайта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