首页 > 网页教程 > CSS > 如何用CSS和JavaScript实现海报滤镜效果 附教程代码

如何用CSS和JavaScript实现海报滤镜效果 附教程代码

时间:2017-07-12    来源:秦溪

今天我们想告诉你如何通过图像来实现一个非常简单而有趣的效果。本问的灵感来自poster of the Grand Canyon,图像的一些小片段被裁剪掉并放置在不同的位置,创造出一种有趣和创造性的外观。今天我们将向你展示如何使用CSS和一些JavaScript创建类似的效果。

一般的想法是创建一个具有背景图像的分区,然后动态添加几个新的分区。这些分区的子divs将被移动,另一个内部div将有一个剪辑路径,只显示图像的一小部分。为了让海报更有趣,我们希望可以选择视差(或倾斜)效果。这就是为什么我们将使用两个嵌套分区。

赶紧开始吧!

查看效果图

小片段标记

为了创建动态片段,只需要一个带有背景图像的简单的div:

<div class="fragment-wrap" ></div>

脚本创建如下:

<div class="fragment-wrap" >

我们的脚本仍然需要为div添加一些单独的样式属性,但是让我们先来看一下常见的样式。

The Styles

主图像div,片段包装需要宽度和高度以及一些边距,以便它在我们的布局中正确定位。为了使图像响应,我们将使用相对的视口单位。由于我们需要一个替代布局,我们还将编写一个修饰符类来将图像放在右侧:

.fragment-wrap {

该片段和fragment__piece分区将是绝对的位置,并占据所有可用的宽度和高度。我们将动态地应用剪辑路径到这个div,所以现在还没有其他的需要添加:

.fragment,

对于视差情况,我们将设置到片段 div 的位移:

.fragment {

我们也将在父背景图像中应用到它。对于两个div,我们设置以下背景图像属性:

.fragment-wrap,

这些都是我们需要的元素的常见样式。如果我们没有JS可用,图像就会被简单地显示出来,而没有很少的片段效果。

现在我们来编写效果功能。

JavaScript

对于这种效果的功能,我们将做一个小插件。让我们来看看选项:

FragmentsFx.prototype.options = {

了解如何使用randomIntervals和维度的最佳方式是查看演示示例。我们采用五种不同的方式,视觉效果显示出它们的不同之处。

首先要做的是从我们的片段包装元素构建布局,并创建我们前面提到的结构:

FragmentsFx.prototype._init = function() {

我们将创建在选项中指定的片段元素数量:

FragmentsFx.prototype._layout = function() {

对于设置translations和clip-path属性(如果支持的话);如果不支持,我们使用clip:rect()),我们从选项中取出我们定义的值。Translations 总是随机的,但我们确实需要确保片段保留在预定义的边界内。剪辑路径可以是随机的(在定义的间隔内)或明确设置。

FragmentsFx.prototype._positionFragment = function(pos, piece) {

当我们调整窗口大小时,元素的尺寸可能会改变,所以我们要确保所有内容都被调整。为了保持简单,我们再次重新计算一下,这意味着我们将做一个新的布局。

如果视差选项为真,我们希望遵循鼠标位置(如果我们将鼠标悬停在元素上)并在选项中定义的范围内翻译片段。如果我们离开元素,我们希望碎片能够移回原来的位置。

FragmentsFx.prototype._initEvents = function() {

就这样!看看演示,看一些例子。感谢你的阅读,我们希望你喜欢这个小教程!

相关推荐
10款精致漂亮的CSS+jQuery的加载中(loading)动画效果
CSS:清除多余的标签让代码更加有意义
DIV+CSS布局两列右列宽度自适应布局的不同实现方法
CSS排版中常遇到的五个问题及解决办法
CSS网页布局有关中文排版的九个技巧
详解如何用div+css模拟表格对角线
Firefox与IE浏览器在CSS样式表中的差异
加一段代码让IE6支持hover伪类效果
用CSS来控制字符长度和显示长度
CSS代码不同书写风格的优缺点
如何使一个DIV层居中于浏览器中?
正确理解CSS规则的优先级算法
创建高效CSS代码的五个好习惯
最新全面兼容ie6,ie7,ie8,ff的CSS HACK写法
理解CSS的查找匹配原理,打造简洁高效的CSS代码
掌握跨浏览器兼容的CSS代码编写准则
21个令人惊叹的CSS技术(案例)展示
CSS框架到底有那些优点与缺点?
如何使用CSS控制网页打印页面格式?
深入理解CSS的margin属性(外边距)
CSS中30个最常用的选择器,你学会了吗?
CSS进阶:用Margin还是用Padding?
WEB前端开发应该注意的问题8点(原创技巧)
xhtml+css 复杂的视觉效果解决方案与技巧(原创技巧)
CSS新手入门教程:CSS代码编写须注意的八大细节
资深seo利用css样式作弊手法全解
CSS新手教程:30个CSS常见问题的分析及解决方法
10种导致CSS布局页面错乱的解决方法分享
css教程:解决float属性的元素父元素高度不能自适应
CSS教程:清理浮动简洁有效的方式分享
CSS Sprites(CSS精灵)技术及其优化经验分享
IE6下文字或图片神秘消失的原因及解决方法分享
CSS相对定位实现div容器绝对居中的简单方法分享
8种CSS清除浮动的方法优缺点分析
高效CSS开发需要注意的要点以及提升性能的做法
CSS3实现透明边框的方法分享

精彩推荐

热门教程