Автор

25 08.2017
Эффект маски изображения

Эффект маски изображения


Эффект погружения, основанный на масках изображений и CSS-преобразованиях.

 

ДЕМО
ИСХОДНИКИ

 

Мы публиковали в нашем блоге хорошие эффекты маски, основанные на свойствах SVG. На этот раз мы использовали прозрачный фон PNG, чтобы увеличить масштаб слоя маски, в фоновое изображение проекта.

Если вы хотите изменить цвет масок .png, вы можете легко сделать это в Photoshop (или любом другом графическом инструменте), применив цветное наложение на весь слой изображения. Если вы планируете создавать свои собственные маски, обратите внимание, что этот эффект работает только в том случае, если в самом центре маски есть пустое пространство.

 

Создание структуры

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

<section class="project-1 cd-project-mask">
<h1>Project Name</h1>
<div class="featured-image"></div>
<div class="mask">
<img src="img/mask-01.png" alt="mask">
<span class="mask-border mask-border-top"></span>
<span class="mask-border mask-border-bottom"></span>
<span class="mask-border mask-border-left"></span>
<span class="mask-border mask-border-right"></span>
</div>

<a href="#0" class="project-trigger">Explore Project</a>

<a href="#0" class="cd-scroll cd-img-replace">Scroll down</a>

<div class="cd-project-info" data-url="project-1">
<!-- content loaded using js -->
</div>

<a href="#0" class="project-close cd-img-replace">Close Project</a>
</section> <!-- .cd-project-mask -->

<section class="project-2 cd-project-mask">
<!-- content here -->
</section>

<!-- other sections here -->

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

 

Добавление стиля

Каждая .cd-project-mask имеет высоту 100vh (высота видового экрана) и ширину 100%; Образ проекта задается как фоновое изображение элемента .featured-image, в то время как изображение маски обернуто внутри элемента .mask.
Четыре элемента .mask-border используются для создания фрейма вокруг маски изображения, чтобы убедиться, что изображение с проектом не видно за пределами маски (мы использовали элементы <span>, а не псевдоэлементы, потому что их поведение было ошибочным в Safari 9) ,

.cd-project-mask {
position: relative;
height: 100vh;
width: 100%;
overflow: hidden;
}

.cd-project-mask .featured-image {
/* project intro image */
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
transform: translateX(-50%) translateY(-50%);
height: 100%;
width: 100%;
background: url(../img/img-01.jpg) no-repeat center center;
background-size: cover;
}

.cd-project-mask .mask {
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
transform: translateX(-50%) translateY(-50%);
width: 300px;
height: 300px;
}

.cd-project-mask .mask .mask-border {
/* this is used to create a frame around the mask */
position: absolute;
}

.cd-project-mask .mask .mask-border-top,
.cd-project-mask .mask .mask-border-bottom {
/* this is used to create a frame around the mask */
height: calc(50vh - 150px + 10px);
width: 100vw;
left: 50%;
right: auto;
transform: translateX(-50%);
}

.cd-project-mask .mask .mask-border-top {
bottom: calc(100% - 10px);
}

.cd-project-mask .mask .mask-border-bottom {
top: calc(100% - 10px);
}

.cd-project-mask .mask .mask-border-left,
.cd-project-mask .mask .mask-border-right {
/* this is used to create a frame around the mask */
height: 100vh;
width: calc(50vw - 150px + 10px);
top: 50%;
bottom: auto;
transform: translateY(-50%);
}

.cd-project-mask .mask .mask-border-left {
left: calc(100% - 10px);
}

.cd-project-mask .mask .mask-border-right {
right: calc(100% - 10px);
}

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

.project-view .cd-project-mask:not(.project-selected) {
   /* the project-view class is added to the .cd-image-mask-effect element when a project is selected - hide all not selected projects */
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
   visibility: hidden;
}

 

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

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

function ProjectMask( element ) {
	this.element = element;
	this.projectTrigger = this.element.find('.project-trigger');
	this.projectClose = this.element.find('.project-close'); 
	this.projectTitle = this.element.find('h1');
	this.projectMask = this.element.find('.mask');
	//...
	this.initProject();
}
 
var revealingProjects = $('.cd-project-mask');
var objProjectMasks = [];
 
if( revealingProjects.length > 0 ) {
	revealingProjects.each(function(){
		//create ProjectMask objects
		objProjectMasks.push(new ProjectMask($(this)));
	});
}

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

ProjectMask.prototype.initProject = function() {
	var self = this;
 
	//open the project
	this.projectTrigger.on('click', function(event){
		event.preventDefault();
		if( !self.animating ) {
			self.animating = true;
			//upload project content
			self.uploadContent();
			//show project content and scale up mask
			self.revealProject();
		}
	});
 
	//...
};
 
ProjectMask.prototype.revealProject = function() {
	var self = this;
	//get mask scale value
	self.updateMaskScale();
	//scale up mask and animate project title
	self.projectTitle.attr('style', 'opacity: 0;');
	self.projectMask.css('transform', 'translateX(-50%) translateY(-50%) scale('+self.maskScaleValue+')').one(transitionEnd, function(){
		self.element.addClass('center-title');
		self.projectTitle.attr('style', '');
		self.animating = false;
	});
 
	//hide the other sections
	self.element.addClass('project-selected content-visible').parent('.cd-image-mask-effect').addClass('project-view');
}
 
ProjectMask.prototype.uploadContent = function(){
	var self = this;
	//if content has not been loaded -> load it
	if( self.projectContent.find('.content-wrapper').length == 0 ) self.projectContent.load(self.projectContentUrl+'.html .cd-project-info > *');
	
	if( self.projectContentUrl+'.html'!=window.location ){
        //add the new page to the window.history
        window.history.pushState({path: self.projectContentUrl+'.html'},'',self.projectContentUrl+'.html');
    }
}

 

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

06 06.2014
Эффект маски изображения

Современный веб-дизайнер должен идти в ногу с новыми тенденция, одна из таких тенденций это длинный тени. Мы уже не раз рассказывали, о подобной сфере и как ее реализовать на сайте. В данном уроке мы рассмотрим, как реализовать навигацию для сайта, в объемном виде, но стилизованных объемными тенями. Это создаст не только реализм на сайте, но и скрасит при наведении курсором мыши, ведь навигация будет кнопочная и немного анимироваться, выглядит достаточно просто, но тем не менее очень практично. И так, давайте посмотрим, что у нас получилось.


10 05.2017
Эффект маски изображения

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


28 10.2015
Эффект маски изображения

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


14 06.2014
Эффект маски изображения

В последнее время стали весьма популярны интерактивные баннеры на сайтах, то есть такие которые взаимодействуют с пользователем, а соответственно заинтересовывают пользователя. Не каждый разработчик владеет технологией разработки флеша, чтобы создать интерактивное развлечение. Но что делать если все же необходимо реализовать "живой" баннер, но приложив при этом минимум усилий. Тогда Вам пригодится такой эффект как параллакс, с помощью которого можно создать весьма отзывчивый, анимированный баннер.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close