CSS遮罩的过渡效果有趣的幻灯片

今天,我们想向您展示如何使用CSS Masks创建一个有趣而简单却引人注目的过渡效果。与裁剪一起,遮罩是定义可见性和与元素合成的另一种方式。在下面的教程中,我们将向您展示如何在简单的幻灯片上应用现代过渡效果的新属性。我们将使用步骤()计时功能应用动画,并将掩模PNG移动到图像上以实现有趣的过渡效果。

注意:请记住,这种效果是高度实验性的,只有一些现代浏览器(现在的Chrome,Safari和Opera)才支持。

CSS面具

显示部分元素的方法,使用选定的图像作为蒙版

W3C候选推荐

来自caniuse.com的统计信息

请记住,Firefox只有部分支持(它只支持内联的SVG掩码元素),所以我们现在有一个回退。希望我们很快就能欢迎所有现代浏览器的支持。请注意,我们正在添加Modernizr来检查支持。

所以让我们开始吧!

创建蒙版图像

在本教程中,我们将通过第一个示例(演示1)。

为了使遮罩过渡效果起作用,我们需要一个图像来隐藏/显示底层图像的某些部分。该蒙版图像将是一个带有透明部分的PNG。PNG本身将是一个精灵图像,它看起来如下:

虽然黑色部分将显示当前图像,但白色部分(实际上是透明的)将成为我们图像的蒙版部分,将显示第二个图像。

为了创建精灵图片,我们将使用这个视频。我们将其导入到Adobe After Effects中以减少视频的时间,将白色部分删除并将其导出为PNG序列。

为了将持续时间缩短到1.4秒(我们希望我们转换的时间),我们将使用时间拉伸效应。

要删除白色部分,我们将使用键控 - >提取并将白色点设置为0.在下面的截图中,蓝色部分是我们构图的背景,即视频的透明部分。

最后,我们可以将我们的作品保存为PNG序列,然后使用Photoshop或像这样的CSS Sprite生成器来生成单个图像:

这是一个非常有机的显示效果的精灵图像。我们将创建另一个“反转”的精灵来达到相反的效果。您将在演示文件的img文件夹中找到所有不同的精灵。

现在,我们已经创建了蒙版图像,让我们深入到我们简单的幻灯片示例的HTML结构。

标记

对于我们的演示,我们将创建一个简单的幻灯片来显示蒙版效果。我们的幻灯片会填满整个屏幕,我们会添加一些箭头来触发幻灯片切换。这个想法是叠加幻灯片,然后在动画结束时更改传入幻灯片的z-index。我们幻灯片的结构如下所示:

“All good things are

wild & free”

Photo by Andreas Rønningen

“Into the wild”

Photo by John Price

“Is spring coming?”

Photo by Thomas Lefebvre

“Stay curious”

Photo by Maria

部门页面视图是我们的全球容器,它将包含我们所有的幻灯片。该项目的部门是我们的幻灯片的幻灯片; 每一个都包含一个标题和一个图例。另外,我们将为每个幻灯片设置单独的背景图像。

箭头将作为我们触发下一个或上一个动画,并浏览幻灯片。

让我们来看看这个风格。

CSS

在这一部分中,我们将为我们的效果定义CSS。

我们将设置一个经典的全屏滑块的布局,一些居中的标题和导航在页面的左下角。此外,我们将定义一些媒体查询以适应移动设备的风格。

此外,我们将我们的精灵图像设置为全局容器上的不可见背景,以便我们在打开页面时开始加载它们。

.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;}

每张幻灯片将有不同的背景图像:

.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);}

这当然是你会动态实现的,但是我们对这个效果感兴趣,所以让我们保持简单。

我们定义了一个名为hide的类,只要我们想隐藏它就会添加到幻灯片中。类定义包含我们的精灵作为一个面具应用。

知道一个帧是100%的屏幕,我们的动画包含23个图像,我们需要将宽度设置为23 * 100%= 2300%。

现在我们添加我们的CSS动画利用步骤。我们希望我们的精灵在我们最后一帧的开始处停下来。因此,为了达到这个目标,我们需要比总数少一步,即22步:

.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;}

最后,我们定义动画关键帧:

@-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;

}

}

现在我们开始; 我们现在有一个结构化和风格的幻灯片。让我们把它变成功能!

JavaScript

我们将使用zepto.js来演示这个与jQuery类似的轻量级JavaScript框架。

我们首先声明所有的变量,设置持续时间和元素。

然后我们初始化事件,获取当前和下一张幻灯片,设置正确的Z-索引。

function Slider() {

// Durations

this.durations = {

auto: 5000,

slide: 1400

};

// DOM

this.dom = {

wrapper: null,

container: null,

project: null,

current: null,

next: null,

arrow: null

};

// Misc stuff

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.init();

this.events();

}/*** Set initial z-indexes & get current project*/

};

我们监听箭头上的点击事件,如果幻灯片当前不包含在动画中,我们检查点击是否在下一个或上一个箭头上。就像我们调整“下一个”变量的值一样,我们继续改变幻灯片。

/*** Initialize events*/

var self = this;

if (self.working)

return;

self.processBtn($(this));

});

};

if (this.isAuto) {

this.isAuto = false;

clearInterval(this.auto);

}

if (btn.hasClass('next'))

this.updateNext();

if (btn.hasClass('previous'))

this.updatePrevious();

};/** * Update next global index */

this.next = (this.current + 1) % this.length;

this.process();

};/*** Update next global index*/

this.next--;

if (this.next

this.next = this.length - 1;

this.process();

};

这个功能是我们幻灯片的核心:我们将类“隐藏”设置为当前幻灯片,一旦动画结束,我们减少前一张幻灯片的Z-索引,增加当前幻灯片的Z-索引,然后删除隐藏上一张幻灯片的类。

/*** Process, calculate and switch between slides*/

var self = this;

this.working = true;

// Hide current

setTimeout(function () {

self.current = self.next;

self.working = false;

};

添加相应的类将触发我们的动画,然后将蒙版图像应用到我们的幻灯片。主要思想是在步骤动画功能中移动蒙版以创建转换流程。

而就是这样!我希望你找到这个教程有用,并创造你自己的酷面具效果乐趣!不要犹豫,分享你的创作,我很想看到他们!

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171221A0FPPA00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券