一份關(guān)于如何使用 CSS 遮罩來創(chuàng)建一些有趣的視覺滑動過渡的教程。這份教程具有高度試驗(yàn)性！
今天我們想向你展示怎樣創(chuàng)建一個(gè)有趣簡單并且吸引眼球的過渡效果，采用的是 CSS 遮罩 。 與剪裁一樣，遮罩是另一種定義可見性和與一個(gè)元素組合的方式。在接下來的教程中我們將展示給你的是：如何將一種現(xiàn)代過渡效果的新屬性應(yīng)用在簡單的幻燈片上。我們使用 steps() 時(shí)間函數(shù)來應(yīng)用動畫，并將一張遮罩 PNG 移動到一張圖片上方，來達(dá)到有趣的過渡效果。
注意：請記住，這種效果是具有高度試驗(yàn)性的，只能被某些現(xiàn)代瀏覽器支持。
記住 Firefox 只部分支持（它只支持行內(nèi) SVG 遮罩元素），因此我們現(xiàn)在需要有一個(gè)回退機(jī)制，很快我們就可以迎接所有現(xiàn)有瀏覽器的支持。注意我們加入 Modernizr 來檢查是否支持。
所以讓我們開始吧！
_ 我們將走進(jìn)本教程的第一個(gè)例子（演示1）。_
為了讓遮罩過渡效果可行，我們需要一張用來隱藏／顯示底層圖片某些部分的圖片。該遮罩圖會是一張帶有透明部分的 PNG 。該 PNG 自身是一張雪碧圖，看上去像下圖這樣：
黑色部分顯示的是當(dāng)前圖，同時(shí)，白色部分（其實(shí)是透明的）就是圖片中被遮住的部分，它露出了第二張圖。
為了創(chuàng)建雪碧圖，我們需要用到這個(gè) 視頻 。我們將它導(dǎo)入 Adobe After Effects 內(nèi)來減短視頻時(shí)間，移除白色部分并作為 PNG 序列導(dǎo)出。
為了將時(shí)長減短至 1.4 秒（即我們想要過渡發(fā)生的時(shí)間），我們將采用 Time stretch 效果。
為了移除白色部分，我們將采用 Keying -> extract 并將白點(diǎn)設(shè)為 0。在以下的截圖里，藍(lán)色部分是我們的組合背景，視頻的透明部分。
最終，我們可以將我們的組合用 PNG 序列保存，然后使用 Photoshop 或者類似于 CSS 雪碧圖生成器 這樣的工具來生成單張圖片。
這是一張為了達(dá)到有機(jī)外觀（譯者注：指一種貼近大自然的外觀）揭露效果生成的雪碧圖。我們將創(chuàng)建另一個(gè)『翻轉(zhuǎn)的』雪碧圖，用來達(dá)到相反的效果。你可以在 img 這個(gè)存放演示文件的文件夾下找到所有不同的雪碧圖。
既然我們已經(jīng)創(chuàng)建好了遮罩圖，現(xiàn)在讓我們挖掘一下我們簡單的幻燈片例子中的 HTML 結(jié)構(gòu)。
為了我們的演示，我們將創(chuàng)建一個(gè)簡單的幻燈片來展示遮罩效果。我們的幻燈片將會充斥整個(gè)屏幕，并且我們會添加幾個(gè)能夠觸發(fā)幻燈頁過渡的箭頭。這個(gè)想法是用來將幻燈片重疊，然后在動畫結(jié)束的時(shí)候，改變接下來的幻燈頁的 z-index 。我們的幻燈片結(jié)構(gòu)如下所示：
<div class="page-view">
<div class="project">
<div class="text">
<h1>“All good things are <br> wild & free”</h1>
<p>Photo by Andreas R?nningen</p>
</div>
</div>
<div class="project">
<div class="text">
<h1>“Into the wild”</h1>
<p>Photo by John Price</p>
</div>
</div>
<div class="project">
<div class="text">
<h1>“Is spring coming?”</h1>
<p>Photo by Thomas Lefebvre</p>
</div>
</div>
<div class="project">
<div class="text">
<h1>“Stay curious”</h1>
<p>Photo by Maria</p>
</div>
</div>
<nav class="arrows">
<div class="arrow previous">
<svg viewBox="208.3 352 4.2 6.4">
<polygon class="st0" points="212.1,357.3 211.5,358 208.7,355.1 211.5,352.3 212.1,353 209.9,355.1"/>
</svg>
</div>
<div class="arrow next">
<svg viewBox="208.3 352 4.2 6.4">
<polygon class="st0" points="212.1,357.3 211.5,358 208.7,355.1 211.5,352.3 212.1,353 209.9,355.1"/>
</svg>
</div>
</nav>
</div>
這個(gè) div 頁面視圖是我們的主容器，它將包含我們所有的幻燈頁。這個(gè)項(xiàng)目內(nèi)部的 div 是我們幻燈片中的幻燈頁，每一張包含了一個(gè)標(biāo)題和一個(gè)題注。并且，我們將為每張幻燈頁設(shè)置一個(gè)單獨(dú)的背景圖。
箭頭用來觸發(fā)后一個(gè)或前一個(gè)動畫，以及在幻燈頁里跳轉(zhuǎn)。
讓我們看看這種風(fēng)格。
在這部分，我們將為我們的效果設(shè)定 CSS 。
我們將創(chuàng)建一個(gè)典型的全屏幻燈片布局，里面包括一些居中標(biāo)題和頁面左下角的跳轉(zhuǎn)鏈接。并且，我們會定義一些媒體查詢來使移動設(shè)備兼容這種風(fēng)格。
除此之外，我們還會將我們的雪碧圖設(shè)置成在我們的全局容器上不可見的背景，只有這樣才能讓它們在頁面剛被打開的時(shí)候就能加載。
.demo-1 {
background: url(../img/nature-sprite.png) no-repeat -9999px -9999px;
background-size: 0;
}
.demo-1 .page-view {
background: url(../img/nature-sprite-2.png) no-repeat -9999px -9999px;
background-size: 0;
}
每張幻燈頁將會有一個(gè)不同的背景圖：
.demo-1 .page-view .project:nth-child(1) {
background-image: url(../img/nature-1.jpg);
}
.demo-1 .page-view .project:nth-child(2) {
background-image: url(../img/nature-2.jpg);
}
.demo-1 .page-view .project:nth-child(3) {
background-image: url(../img/nature-3.jpg);
}
.demo-1 .page-view .project:nth-child(4) {
background-image: url(../img/nature-4.jpg);
}
這不同的背景圖當(dāng)然會是你們動態(tài)實(shí)現(xiàn)的，但是在本教程中，我們的興趣點(diǎn)在于效果，所以就讓它簡單一點(diǎn)。
我們定義了一個(gè)叫做 hide 的類，無論何時(shí)我們想隱藏一張幻燈頁，我們就將這個(gè)類加在幻燈頁上。這個(gè)類的定義中包括了我們用作遮罩的雪碧圖。
已知一幀占據(jù)了屏幕的 100% 且我們的動畫包含 23 張圖，我們需要將寬度設(shè)置成 23 * 100% = 2300%。
現(xiàn)在我們要使用 steps 來添加我們的 CSS 動畫。我們想要我們的雪碧圖在最后一幀的開頭停住。因此，為了達(dá)到這個(gè)目的，我們需要數(shù)到 22 步，比總數(shù)少了一步。
.demo-1 .page-view .project:nth-child(even).hide {
-webkit-mask: url(../img/nature-sprite.png);
mask: url(../img/nature-sprite.png);
-webkit-mask-size: 2300% 100%;
mask-size: 2300% 100%;
-webkit-animation: mask-play 1.4s steps(22) forwards;
animation: mask-play 1.4s steps(22) forwards;
}
.demo-1 .page-view .project:nth-child(odd).hide {
-webkit-mask: url(../img/nature-sprite-2.png);
mask: url(../img/nature-sprite-2.png);
-webkit-mask-size: 7100% 100%;
mask-size: 7100% 100%;
-webkit-animation: mask-play 1.4s steps(70) forwards;
animation: mask-play 1.4s steps(70) forwards;
}
最后，我們定義動畫的關(guān)鍵幀：
@-webkit-keyframes mask-play {
from {
-webkit-mask-position: 0% 0;
mask-position: 0% 0;
}
to {
-webkit-mask-position: 100% 0;
mask-position: 100% 0;
}
}
@keyframes mask-play {
from {
-webkit-mask-position: 0% 0;
mask-position: 0% 0;
}
to {
-webkit-mask-position: 100% 0;
mask-position: 100% 0;
}
}
現(xiàn)在我們已經(jīng)走到這兒啦，我們有了一個(gè)結(jié)構(gòu)化、風(fēng)格化的幻燈片。讓我們往上面添加功能！
我們將使用 zepto.js 來進(jìn)行演示，這是一個(gè)類似于 jQuery 的輕量級 JavaScript 框架。
我們從聲明所有的變量、設(shè)置長度和元素開始。
然后我們初始化事件，得到當(dāng)前和后一張幻燈頁，設(shè)置正確的 z-index。
function Slider() {
// 長度
this.durations = {
auto: 5000,
slide: 1400
};
// DOM
this.dom = {
wrapper: null,
container: null,
project: null,
current: null,
next: null,
arrow: null
};
// 雜七雜八的代碼
this.length = 0;
this.current = 0;
this.next = 0;
this.isAuto = true;
this.working = false;
this.dom.wrapper = $('.page-view');
this.dom.project = this.dom.wrapper.find('.project');
this.dom.arrow = this.dom.wrapper.find('.arrow');
this.length = this.dom.project.length;
this.init();
this.events();
this.auto = setInterval(this.updateNext.bind(this), this.durations.auto);
}
/**
* 設(shè)置初始的 z-indexes & 得到當(dāng)前項(xiàng)目
*/
Slider.prototype.init = function () {
this.dom.project.css('z-index', 10);
this.dom.current = $(this.dom.project[this.current]);
this.dom.next = $(this.dom.project[this.current + 1]);
this.dom.current.css('z-index', 30);
this.dom.next.css('z-index', 20);
};
我們監(jiān)聽箭頭上的點(diǎn)擊事件，如果幻燈片目前沒有動畫的話，我們檢查點(diǎn)擊是否發(fā)生在后一個(gè)或者前一個(gè)箭頭上。像這樣，我們接受 next 這個(gè)變量的值，處理它并更換幻燈頁。
/**
* 初始化事件
*/
Slider.prototype.events = function () {
var self = this;
this.dom.arrow.on('click', function () {
if (self.working)
return;
self.processBtn($(this));
});
};
Slider.prototype.processBtn = function (btn) {
if (this.isAuto) {
this.isAuto = false;
clearInterval(this.auto);
}
if (btn.hasClass('next'))
this.updateNext();
if (btn.hasClass('previous'))
this.updatePrevious();
};
/**
* 更新后一個(gè)全局 index
*/
Slider.prototype.updateNext = function () {
this.next = (this.current + 1) % this.length;
this.process();
};
/**
* 更新前一個(gè)全局 index
*/
Slider.prototype.updatePrevious = function () {
this.next--;
if (this.next < 0)
this.next = this.length - 1;
this.process();
};
這個(gè)函數(shù)是我們幻燈片的心臟所在：我們對當(dāng)前幻燈頁設(shè)置 “hide” 類，一旦動畫結(jié)束，我們減小前一頁的 z-index ，增加當(dāng)前頁的 z-index ，然后移除前一頁的 “hide” 類。
/**
* 處理，計(jì)算并在幻燈頁之間切換
*/
Slider.prototype.process = function () {
var self = this;
this.working = true;
this.dom.next = $(this.dom.project[this.next]);
this.dom.current.css('z-index', 30);
self.dom.next.css('z-index', 20);
// Hide current
this.dom.current.addClass('hide');
setTimeout(function () {
self.dom.current.css('z-index', 10);
self.dom.next.css('z-index', 30);
self.dom.current.removeClass('hide');
self.dom.current = self.dom.next;
self.current = self.next;
self.working = false;
}, this.durations.slide);
};
加入相應(yīng)的類會觸發(fā)我們的動畫，這些動畫輪流將遮罩圖片應(yīng)用到我們的幻燈頁上。主要的思想是用步伐動畫函數(shù)來移動遮罩，從而創(chuàng)建過渡流。
這就是本文所有內(nèi)容了！我希望你們能夠覺得本教程有用，并且在你們自己創(chuàng)建很酷的遮罩效果時(shí)享受它！不要猶豫，分享你們的創(chuàng)造，我會很高興看到的！
瀏覽器支持：
文章下載，點(diǎn)擊：CSS 遮罩的過渡效果