首頁 > 網頁教程 > CSS > 如何用CSS和JavaScript實現海報濾鏡效果 附教程代碼

江苏十一选五任2:如何用CSS和JavaScript實現海報濾鏡效果 附教程代碼

時間:2017-07-12    來源:秦溪

江苏十一选五开奖公告 www.ervgn.com

今天我們想告訴你如何通過圖像來實現一個非常簡單而有趣的效果。本問的靈感來自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實現透明邊框的方法分享

精彩推薦

熱門教程