эффект для изображений

Креативные jQuery и CSS эффекты для изображений — 5 примеров

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

Предлагаем взглянуть на необычные jQuery и CSS эффекты для изображений, которые создает эффект «взгляд сквозь» подложку. Если грамотно подобрать изображения, то можно очень креативном продемонстрировать объект (пример с кольцом из демки).

Поддержка браузерами:

поддержка браузерами

Идея заключается в использовании SVG-свойств и прозрачности изображения PNG. Особенность этих эффектов заключается в том, что Вы с легкостью сможете поменять цвет бекграунда, что позволяет сделать динамическое использование картинок (например, превью к новостям). Если вы планируете создавать свои собственные маски, обратите внимание, что этот эффект работает только если есть пустое место в центре объекта.

Немного  о том, как использовать CSS эффекты для изображений:

HTML-структура состоит из элементов <section>, обернутые .cd-image-mask-effect объекты. Каждый тег <section> содержит div.featured-image (изображения блоков), div.mask (маска изображения) и div.cd-project-info (сам контент).

Содержание проекта не входит в HTML, но загружается с помощью JavaScript.

Используемые стили:

Каждый элемент .cd-project-mask имеет высоту 100vh и ширину 100%. Изображения устанавливаются как бекграунд .featured-image.

Когда пользователь выбирает проект, класс .project-view (добавляется обертка .cd-image-mask-effect) используется, чтобы скрыть все остальные элементы.

Обработка событий JS:

Чтобы реализовать этот CSS эффект для изображения, мы создали объект ProjectMask и использовали метод initProject, чтобы применить необходимый обработчики событий.

Когда пользователь выбирает проект, метод revealProject используется для масштабирования изображения маски, в то время как способ uploadContent заботится о загрузке содержимого проекта (используется функция load ()) и добавляет новую страницу window.history (с помощью pushState() метод).

Скачать исходные файлы примеров можно со страницы автора (источник).

В поисках шаблона для сайта?