Автор

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

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

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


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

  1. Использовать как часы
  2. Использовать в качестве таймера
  3. Использовать в качестве обратного отсчета
  4. Поддерживает широкий спектр использованием CSS
  5. Аннотация всех используемых объектов
  6. Полнофункциональный API для разработчиков и создания пользовательскогоциферблата

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

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


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

Если на вашем сайте пользователи имеют много возможностей, то скорее всего, что такой проект нуждается в создании раздела часто задаваемых вопросов с информацией для поддержки ваших пользователей, кроме контактной формы. Мы собрали простой в настройке шаблон частых вопросов, который можно использовать, чтобы построить свою справку по сайту с удобной навигацией. Благодаря отзывчивому интерфейсу и реализации с помощью CSS и JQuery мы получаем кроссбраузерный раздел, с поддержкой устройств где выключен JS.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close