今天我們想告訴你如何通過圖像來實現(xiàn)一個非常簡單而有趣的效果。本問的靈感來自poster of the Grand Canyon，圖像的一些小片段被裁剪掉并放置在差別的位置，創(chuàng)造出一種有趣和創(chuàng)造性的外不雅觀。今天我們將向你展示如何使用CSS和一些JavaScript創(chuàng)建類似的效果。

一般的想法是創(chuàng)建一個具有配景圖像的分區(qū)，然后動態(tài)添加幾個新的分區(qū)。這些分區(qū)的子divs將被移動，另一個內(nèi)部div將有一個剪輯路徑，只顯示圖像的一小部分。為了讓海報更有趣，我們希望可以選擇視差(或傾斜)效果。這就是為什么我們將使用兩個嵌套分區(qū)。

趕緊開始吧!

查看效果圖

小片段標(biāo)記

為了創(chuàng)建動態(tài)片段，只需要一個帶有配景圖像的簡單的div：

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

腳本創(chuàng)建如下：

<div class="fragment-wrap" >

我們的腳本仍然需要為div添加一些單獨的樣式屬性，但是讓我們先來看一下常見的樣式。

The Styles

主圖像div，片段包裝需要寬度和高度以及一些邊距，以便它在我們的布局中正確定位。為了使圖像響應(yīng)，我們將使用相對的視口單位。由于我們需要一個替代布局，我們還將編寫一個修飾符類來將圖像放在右側(cè)：

.fragment-wrap {

該片段和fragment__piece分區(qū)將是絕對的位置，并占據(jù)所有可用的寬度和高度。我們將動態(tài)地應(yīng)用剪輯路徑到這個div，所以現(xiàn)在還沒有其他的需要添加：

.fragment，

對于視差情況，我們將設(shè)置到片段 div 的位移：

.fragment {

我們也將在父配景圖像中應(yīng)用到它。對于兩個div，我們設(shè)置以下配景圖像屬性：

.fragment-wrap，

這些都是我們需要的元素的常見樣式。如果我們沒有JS可用，圖像就會被簡單地顯示出來，，而沒有很少的片段效果。

現(xiàn)在我們來編寫效果功能。

JavaScript

對于這種效果的功能，我們將做一個小插件。讓我們來看看選項：

FragmentsFx.prototype.options = {

了解如何使用randomIntervals和維度的最佳方式是查看演示示例。我們采用五種差別的方式，視覺效果顯示出它們的差別之處。

首先要做的是從我們的片段包裝元素構(gòu)建布局，并創(chuàng)建我們前面提到的結(jié)構(gòu)：

FragmentsFx.prototype._init = function() {

我們將創(chuàng)建在選項中指定的片段元素數(shù)量：

FragmentsFx.prototype._layout = function() {

對于設(shè)置translations和clip-path屬性(如果支持的話);如果不支持，我們使用clip：rect())，我們從選項中取出我們定義的值。Translations 總是隨機(jī)的，但我們確實需要確保片段保存在預(yù)定義的界限內(nèi)。剪輯路徑可以是隨機(jī)的(在定義的間隔內(nèi))或明確設(shè)置。

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

當(dāng)我們調(diào)整窗口大小時，元素的尺寸可能會改變，所以我們要確保所有內(nèi)容都被調(diào)整。為了連結(jié)簡單，我們再次重新計算一下，這意味著我們將做一個新的布局。

如果視差選項為真，我們希望遵循鼠標(biāo)位置(如果我們將鼠標(biāo)懸停在元素上)并在選項中定義的范圍內(nèi)翻譯片段。如果我們離開元素，我們希望碎片能夠移回本來的位置。

FragmentsFx.prototype._initEvents = function() {

就這樣!看看演示，看一些例子。感謝你的閱讀，我們希望你喜歡這個小教程!

標(biāo)簽：烏魯木齊 東營 九江 鹽城 林芝