Автор

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

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

Тенденции в области инфографического дизайна 2018, безусловно, будут следовать правилам графического дизайна 2018 года. Однако инфографика имеет эту специфическую и обязательную функцию, которую вы должны иметь в виду при проектировании: информации.


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

Простая, отзывчивая карусель с анимированными дорожками SVG, используемыми в качестве эффектов перехода.


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close