Эффекты изображений

Работа с изображениями

Содержание сайта
Разное
Работа с изображениями
Обзор программ л. 45 /
Список программ

Сайт dynamicdrive.com (http://www.dynamicdrive.com/) предлагает код, позволяющтй применить к изображениям раздичные эффекты. В коде может использоваться HTML (DHTML), CSS, JavaScript и jQuery.


Site Logo/ Watermark Script
Логотип сайта / скрипт водяных знаков FF1 + IE6 + Opr8 +
Скрипт позволяет вам отображать статическое изображение в любом из четырех углов браузера, не выходя из поля зрения. Это полезно для брендинга или для того, чтобы предложить посетителям простой способ вернуться на главную страницу вашего сайта из любой точки на странице. Логотип можно настроить на исчезновение через x секунд.
Подробнее

JQuery Image Warp
FF1 + IE6 + Opr8 +
Скрипт добавляет интересный эффект «деформации» для выбора изображений на вашей странице, поэтому при щелчке по ним изображение временно расширяется, а затем возвращается к исходным размерам изображения. Это наиболее полезно применительно к изображениям с гиперссылками, чтобы создать эффект задержки перед тем, как пользователь перейдет к реальной ссылке.
Подробнее

jQuery Image Magnify
FF1 + IE6 + Opr8 +
Скрипт позволяет увеличивать любое изображение на странице по желаемому коэффициенту при нажатии, с помощью эффекта увеличения / уменьшения. Увеличенное изображение центрируется на экране пользователя, пока не будет закрыто.
Подробнее

Zoomio jQuery Image Zoom
FF1 + IE9 + Opr8 +
Скрипт накладывает увеличенное изображение прямо поверх исходного изображения. Многие сайты электронной коммерции используют аналогичные сценарии, чтобы позволить пользователям ближе познакомиться с изображениями продуктов.
Подробнее

Featured Image Zoomer (multi-zoom)
 FF1 + IE6 + Opr8 +
Этот скрипт позволяет вам просматривать увеличенную часть любого изображения, наведя на него указатель мыши. Рядом с изображением появляется увеличительное стекло, отображающее увеличенную область по запросу. Пользователь может переключать уровень масштабирования с помощью колесика мыши. Замечательно использовать изображения продуктов, фотографии или другие изображения с большим количеством деталей, которые вы хотите, чтобы пользователи могли получить по команде.
Подробнее

Image Power Zoomer
FF1 + IE6 + Opr8 +
Некоторые изображения заслуживают более пристального внимания, поэтому есть Image Power Zoomer. Это дает любому изображению на вашей странице возможность увеличиваться при наведении на него указателя мыши. «Увеличительное стекло», которое появляется над изображением, позволяет пользователю увеличивать любую его часть, следуя за курсором вокруг. Кроме того, мощность увеличения можно регулировать на лету, поворачивая колесико мыши назад или вперед, как во многих графических программах.
Подробнее

Simple Image Panner and Zoomer
FF1 + IE8 + Opr8 +
Простое панорамирование и увеличение изображений. Simple Image Panner позволяет вам частично обрезать и ограничить большие изображения на вашем сайте в меньшем контейнере, чтобы сэкономить место, со скрытой частью, доступной перетаскиванием - или панорамированием - внутри изображения. Опциональная функция масштабирования позволяет пользователю увеличивать и уменьшать изображение одновременно. Этот скрипт отлично подходит для встраивания больших изображений на вашу страницу, которые пользователи могут также захотеть увеличить, чтобы ближе рассмотреть.
Подробнее

Before and After Image script
 FF2 + IE9 + Opr9 +
 Этот сценарий позволяет вам просматривать любое изображение  как наложение  оригинала. Пользователь может регулировать соотношение двух изображений для одновременного просмотра. Он поддерживает возможность обновления набора изображений, отображаемых по требованию, а также изменения размеров основного контейнера, освобождая место для галереи изображений до / после.
Подробнее

Floating Image script
FF1 + IE5 + Opr7 +
Скурипт плавающего изображения, который перемещает любое количество изображений по странице, каждое из которых идет по произвольно определенному пути. Кроме того, изображения кликабельны, что делает этот скрипт не только невероятно крутым, но и практичным!
Подробнее

Floating Image script II
II FF1 + IE5 + Opr7 +
Скрипт плавающего изображения. Плавающие изображения II оживляют любое изображение (или блок HTML) вверх и вниз по окну браузера, оставаясь на виду, даже если пользователь прокручивает страницу. Определенно интересный эффект со многими использования ...
Подробнее

Expando Image Script
FF1 + IE5 + Opr7
Expando - это простой скрипт, позволяющий увеличить изображение до его фактического размера при наведении курсора. Это позволяет вам изначально отображать большие изображения в уменьшенном размере (размер миниатюры) и динамически расширять их при наведении на них мыши.
Подробнее

Image Bubbles effect
FF1 + IE5 + Opr7
Пузыри изображения - это крутой эффект, похожий на Flash, который заставляет изображение пузыриться и расширяться всякий раз при  наведении курсора на него из серии изображений. Для изображений с определенным атрибутом «alt» сценарий будет использовать его для отображения хорошей всплывающей подсказки, которая показана над увеличенным изображением. Как скорость, так и уровень увеличения изображения, когда оно всплывает, могут быть настроены.
Подробнее

Bouncing Image script
FF1 + IE5 + Opr7
Скрипт прыгающего изображения. Этот скрипт добавляет любое количество изображений в ваш документ, которые перемещаются, отражаясь от края окна браузера.
Подробнее

Flying Butterfly script
FF1 + IE5 + Opr7 +
С этим сценарием DHTML бабочка бесцельно перемещается вокруг вашей страницы. Маленькое насекомое можно убрать, нажав на него.
Подробнее

Flying Planes script
 FF1 + IE5 + Opr7 +
Этот скрипт DHTML анимирует изображения, пересекающие экран по горизонтали, влево и вправо.
Подробнее

Flying Cupids script
FF1 + IE5 + Opr7 +
Создайте группу Купидонов, которые перемещаются по странице, а затем исчезают. Отличный аксессуар, который можно надеть в особых случаях, например, на день Святого Валентина.
Подробнее

Flying Bats script
FF1 + IE5 + Opr7 +
Скрипт анимирует летающих летучих мышей в любом указанном месте на вашей веб-странице, и его можно отключить через x секунд. Изображения являются изменяемыми, вы можете легко настроить этот сценарий на любой случай.
Подробнее

Watching Eyes Script
FF1 + IE5 + Opr7 +
Этот забавный кросс-браузерный скрипт DHTML следит за вашей мышью с «наблюдательным взглядом». Так что веди себя хорошо!
Подробнее

Preload Image (with progress bar) Script
FF1 + IE5 + Opr7 +
Предварительная загрузка изображения (с индикатором выполнения)  Скрипт применяется, чтобы не только предварительно загрузить любое количество изображений перед их отображением, но также получать живое обновление о его ходе с помощью панели обновлений. Как только предварительная загрузка завершена, серфер направляется на страницу, содержащую предварительно загруженные изображения.
Подробнее

Depressible Image link
FF1 + IE5 + Opr7 +
Скрипт, который заставляет ссылку на изображение казаться «нажатым», когда на него удерживают мышь. Эффект подобен эффектам опрокидывания, но эффект имеет место только когда мышь нажата.
Подробнее

Dragable Elements
FF1 + IE5 + Opr7 +
Скрипт, который позволяет перетаскивать по странице  любое количество элементов, таких как DIV, изображения или текст на странице. Просто дайте элементу класс «перетаскивания» ("drag").
Подробнее
 

Эффекты при наведении курсора на изображения

(Image Mouseover Effects)

Image w/ description tooltip
FF1 + IE5 + Opr7 +
При наведении курсора на ссылку появляется всплывающее окно, в котором можно разместить изображение и текстовое описание
Подробнее

Image Figure Caption effects
Изображение Рисунок Эффекты титров FF1 + IE8 + Opr9 +
Скрипт преобразует любое изображение (<img>) в HTML5-совместимый элемент рисунка с красивым заголовком, также работает с существующими элементами фигуры. Выберите один из 7 различных эффектов, чтобы представить заголовок в разном стиле.
Подробнее

Pop-up image Script
FF3 + IE10 + Opr8 +
Превратите свои изображения в всплывающие кнопки. Этот код CSS3 создает иллюзию возвышенного изображения, применяя блочную тень CSS3 и смещая изображение вверх и влево. Когда пользователь удерживает кнопку мыши, тень удаляется, и изображение возвращается в свое обычное положение, т.е. ведет себя как кнопка!
Подробнее

Shake Image script FF
FF1 + IE5 + Opr7 +
Этот скрипт «встряхивает» изображение, когда мышь соприкасается с ним. Используйте его, чтобы добавить мгновенный эффект к вашим ссылкам изображения.
Подробнее

DOM image and sound rollover
FF1 + IE5 + Opr7 +
Сценарий DHTM позволяет добавлять классический эффект «переворачивания» к изображениям. Просто вставьте собственный атрибут HTML внутри изображения, и все готово. Вы также можете применить необязательный аудиофайл для воспроизведения поверх музыки, используя звук HTML5.
Подробнее

Image Swap and HTML5 audio effect
 FF1 + IE5 + Opr7 +
Этот скрипт позволяет легко добавлять эффекты прокрутки / размытия к любому элементу на странице, будь то изображение или текстовая ссылка, даже кнопки отправки изображения. Два возможных эффекта - это либо смена изображения, либо воспроизведение аудио с использованием HTML5. Какой бы эффект вы ни использовали, скрипт будет предварительно загружать изображение или аудио для плавного перехода.
Подробнее

Dissolving image rollover
FF1 + IE5 + Opr7 +
Скрипт представляет из себя улучшенную версию классического ролловер-изображения, добавляет эффект растворения при смене изображения в браузере IE4 +.
Скрипт будет работать во всех браузерах, но только IE4 + будет добавлять переход растворения.
Подробнее

См. также:

Online Image Optimizer
Оптимизатор изображений позволяет вам легко оптимизировать ваши GIF-файлы, анимированные GIF-файлы, JPEG-файлы и PNG-файлы, чтобы они максимально быстро загружались на ваш сайт. Кроме того, вы можете легко конвертировать из одного типа изображения в другой. Максимальный размер загружаемого файла: 2,86 МБ
Страница программы


FavIcon Generator
Онлайн-программа позволяет создать значок сайта (значок избранного) для вашего сайта. Фавикон - это небольшое изображение размером 16x16, которое отображается в строке адреса браузера и в меню закладок при вызове вашего сайта.
Страница программы


Gradient Image Maker
Градиентные изображения используются повсеместно в дизайне веб-страниц в качестве фона, при создании кнопок, форм, DIV, в качестве теней и других интересных визуальных эффектов и т. д. Программа позволяет генерировать градиентное изображение 3 типов, с мгновенным просмотром.
Страница программы


Button Maker Online
Программа для создания популярных «XHTML валидных» микро-кнопок (80x15). Вы также можете выбрать большую кнопку 88x31. Русский язык текста не поддерживается
Страница программы


Библиотека  Горизонтальные меню CSS

Библиотека Вертикальные CSS-меню

Библиотека Эффекты изображений CSS

Библиотека Ссылки и кнопки CSS

Календари



Вернуться к обзору

Последнее обновление: июль 2020 г.