今天我們想告訴你如何通過圖像來實現一個非常簡單而有趣的效果。本問的靈感來自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() {

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

標簽：烏魯木齊 東營 九江 鹽城 林芝