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

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


Эффект погружения, основанный на масках изображений и 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



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

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

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


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

Дорогие веб-мастера, хочу поделиться с вами очень хорошим решением создания календаря событий, так как при создании нового сайта заказчику нужен был именно ткого рода календарь мероприятий и я перелопатил весь инет в поисках чего-то приличного! И вот оно счастье!!! Я выкладываю уже перелапаченый мной вариант и в него забил даты до 28.01.2021.


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

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


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

В данном уроке мы создадим интересные визуальные 3D эффекты с помощью CSS3 и jQuery. Идея для урока возникла под впечатлением страниц демонстрации проектов Google SketchUp.

В нашем примере мы будем использовать миниатюры, которые открывают дополнительную информацию при наведении курсора мыши на них. Структура будет построена на jQuery, который позволит вывести изображение в сложенном или отогнутом виде при наведении курсора мыши. Для формирования эффектов будем использовать трансформации CSS 3D. В тексте урока префиксы браузеров опущены для большей наглядности. Полный код можно посмотреть в исходниках к уроку.


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

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


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