国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

[轉(zhuǎn)]滾動(dòng)視差？CSS 不在話下/background attachment

darry / 3350人閱讀

摘要：通常而言，滾動(dòng)視差在前端需要輔助才能實(shí)現(xiàn)。當(dāng)然，其實(shí)在實(shí)現(xiàn)滾動(dòng)視差效果方面，也有著不俗的能力。此關(guān)鍵字表示背景相對(duì)于視口固定。使用實(shí)現(xiàn)滾動(dòng)視差言歸正傳，下面介紹另外一種使用實(shí)現(xiàn)的滾動(dòng)視差效果，利用的是。

?

?

何為滾動(dòng)視差

視差滾動(dòng)（Parallax Scrolling）是指讓多層背景以不同的速度移動(dòng)，形成立體的運(yùn)動(dòng)效果，帶來非常出色的視覺體驗(yàn)。 作為網(wǎng)頁(yè)設(shè)計(jì)的熱點(diǎn)趨勢(shì)，越來越多的網(wǎng)站應(yīng)用了這項(xiàng)技術(shù)。

通常而言，滾動(dòng)視差在前端需要輔助 Javascript 才能實(shí)現(xiàn)。當(dāng)然，其實(shí) CSS 在實(shí)現(xiàn)滾動(dòng)視差效果方面，也有著不俗的能力。下面就讓我們來見識(shí)一二：

?

認(rèn)識(shí)?background-attachment

background-attachment?算是一個(gè)比較生僻的屬性，基本上平時(shí)寫業(yè)務(wù)樣式都用不到這個(gè)屬性。但是它本身很有意思。

background-attachment：如果指定了?background-image?，那么?background-attachment?決定背景是在視口中固定的還是隨著包含它的區(qū)塊滾動(dòng)的。

單單從定義上有點(diǎn)難以理解，隨下面幾個(gè) Demo 了解下?background-attachment?到底是什么意思：

background-attachment: scroll

scroll?此關(guān)鍵字表示背景相對(duì)于元素本身固定， 而不是隨著它的內(nèi)容滾動(dòng)。

background-attachment: local

local?此關(guān)鍵字表示背景相對(duì)于元素的內(nèi)容固定。如果一個(gè)元素?fù)碛袧L動(dòng)機(jī)制，背景將會(huì)隨著元素的內(nèi)容滾動(dòng)， 并且背景的繪制區(qū)域和定位區(qū)域是相對(duì)于可滾動(dòng)的區(qū)域而不是包含他們的邊框。

background-attachment: fixed

fixed?此關(guān)鍵字表示背景相對(duì)于視口固定。即使一個(gè)元素?fù)碛袧L動(dòng)機(jī)制，背景也不會(huì)隨著元素的內(nèi)容滾動(dòng)。

注意一下 scroll 與 fixed，一個(gè)是相對(duì)元素本身固定，一個(gè)是相對(duì)視口固定，有點(diǎn)類似?position?定位的?absolute?和?fixed。

可以感受下 3 種不同取值的不同效果：

CodePen Demo -- bg-attachment Demo

?

使用?background-attachment: fixed?實(shí)現(xiàn)滾動(dòng)視差

首先，我們使用?background-attachment: fixed?來實(shí)現(xiàn)滾動(dòng)視差。fixed?此關(guān)鍵字表示背景相對(duì)于視口固定。即使一個(gè)元素?fù)碛袧L動(dòng)機(jī)制，背景也不會(huì)隨著元素的內(nèi)容滾動(dòng)。

這里的關(guān)鍵在于，即使一個(gè)元素?fù)碛袧L動(dòng)機(jī)制，背景也不會(huì)隨著元素的內(nèi)容滾動(dòng)。也就是說，背景圖從一開始就已經(jīng)被固定死在初始所在的位置。

我們使用，圖文混合排布的方式，實(shí)現(xiàn)滾動(dòng)視差，HTML 結(jié)構(gòu)如下，.g-word?表示內(nèi)容結(jié)構(gòu)，.g-img?表示背景圖片結(jié)構(gòu)：

1 2 3 4 5 6 7 <section?class="g-word">Headersection> <section?class="g-img">IMG1section> <section?class="g-word">Content1section> <section?class="g-img">IMG2section> <section?class="g-word">Content2section> <section?class="g-img">IMG3section> <section?class="g-word">Footersection>

關(guān)鍵 CSS：

1 2 3 4 5 6 7 8 9 10 section { ????height:?100vh; } ? .g-img { ????background-image:?url(...); ????background-attachment:?fixed; ????background-size: cover; ????background-position:?center?center; }

效果如下：

CodePen Demo -- https://codepen.io/Chokcoco/pen/JBaQoY

嗯？有點(diǎn)神奇，為什么會(huì)是這樣呢？可能很多人會(huì)和我一樣，第一次接觸這個(gè)屬性對(duì)這樣的效果感到懵逼。

我們把上面?background-attachment: fixed?注釋掉，或者改為?background-attachment: local，再看看效果：

CodePen Demo -- bg-attachment:local

這次，圖片正常跟隨滾動(dòng)條滾動(dòng)了，按常理，這種效果才符合我們大腦的思維。

而滾動(dòng)視差效果，正是不按常理出牌的一個(gè)效果，重點(diǎn)來了：

當(dāng)頁(yè)面滾動(dòng)到圖片應(yīng)該出現(xiàn)的位置，被設(shè)置了?background-attachment: fixed?的圖片并不會(huì)繼續(xù)跟隨頁(yè)面的滾動(dòng)而跟隨上下移動(dòng)，而是相對(duì)于視口固定死了。

好，我們?cè)賮碓囈幌?，如果把所?.g-word?內(nèi)容區(qū)塊都去掉，只剩下全部設(shè)置了?background-attachment: fixed?的背景圖區(qū)塊，會(huì)是怎么樣呢？

HTML 代碼如下：

1 2 3 <section?class="g-img">IMG1section> <section?class="g-img">IMG2section> <section?class="g-img">IMG3section>
1 2 3 4 5 6 7 8 9 10 section { ????height:?100vh; } ? .g-img { ????background-image:?url(...); ????background-attachment:?fixed; ????background-size: cover; ????background-position:?center?center; }

效果如下：

CodePen Demo

結(jié)合這張 GIF，相信能對(duì)?background-attachment: fixed?有個(gè)更深刻的認(rèn)識(shí)，移動(dòng)的只有視口，而背景圖是一直固定死的。

綜上，就是 CSS 使用?background-attachment: fixed?實(shí)現(xiàn)滾動(dòng)視差的一種方式，也是相對(duì)而言比較容易的一種。當(dāng)然，background-attachment: fixed?本身的效果并不僅只是能有用來實(shí)現(xiàn)滾動(dòng)視差效果，合理運(yùn)用，還可以實(shí)現(xiàn)其他很多有趣的效果，這里簡(jiǎn)單再列一個(gè)：

?

background-attachment: fixed?實(shí)現(xiàn)圖片點(diǎn)擊水紋效果

利用圖片相對(duì)視口固定，可以有很多有趣的效果，譬如下面這個(gè)，來源于這篇文章CSS Water Wave (水波效果)：

CodePen Demo -- bg-attachment:fixed Wave

利用圖片相對(duì)視口固定的特性實(shí)現(xiàn)點(diǎn)擊的水紋效果。

上面這個(gè)效果有點(diǎn)瑕疵，圖片在放大容器變大的過程中發(fā)生了明顯的抖動(dòng)。當(dāng)然，效果還是可以的，background-attachment?還有很多有意思的效果可以挖掘。

?

使用?transform: translate3d?實(shí)現(xiàn)滾動(dòng)視差

言歸正傳，下面介紹另外一種使用 CSS 實(shí)現(xiàn)的滾動(dòng)視差效果，利用的是 CSS 3D。

原理就是：

  1. 我們給容器設(shè)置上?transform-style: preserve-3d?和?perspective: xpx，那么處于這個(gè)容器的子元素就將位于3D空間中，

  2. 再給子元素設(shè)置不同的?transform: translateZ()，這個(gè)時(shí)候，不同元素在 3D Z軸方向距離屏幕（我們的眼睛）的距離也就不一樣

  3. 滾動(dòng)滾動(dòng)條，由于子元素設(shè)置了不同的?transform: translateZ()，那么他們滾動(dòng)的上下距離?translateY?相對(duì)屏幕（我們的眼睛），也是不一樣的，這就達(dá)到了滾動(dòng)視差的效果。

關(guān)于?transform-style: preserve-3d?以及?perspective?本文不做過多篇幅展開，默認(rèn)讀者都有所了解，還不是特別清楚的，可以先了解下 CSS 3D。

核心代碼表示就是：

1 2 3 4 5 <div?class="g-container"> ????<div?class="section-one">translateZ(-1)div> ????<div?class="section-two">translateZ(-2)div> ????<div?class="section-three">translateZ(-3)div> div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 html { ????height:?100%; ????overflow:?hidden; } ? body { ????perspective:?1px; ????transform-style: preserve-3d; ????height:?100%; ????overflow-y:?scroll; ????overflow-x:?hidden; } ? .g-container { ????height:?150%; ? ????.section-one { ????????transform: translateZ(-1px); ????} ????.section-two { ????????transform: translateZ(-2px); ????} ????.section-three { ????????transform: translateZ(-3px); ????} }

總結(jié)就是父元素設(shè)置?transform-style: preserve-3d?和?perspective: 1px，子元素設(shè)置不同的?transform: translateZ，滾動(dòng)滾動(dòng)條，效果如下：

CodePen Demo -- CSS 3D parallax

很明顯，當(dāng)滾動(dòng)滾動(dòng)條時(shí)，不同子元素的位移程度從視覺上看是不一樣的，也就達(dá)到了所謂的滾動(dòng)視差效果。

滾動(dòng)視差文字陰影/虛影效果

那么，運(yùn)用 translate3d 的視差效果，又能有一些什么好玩的效果呢？下面這個(gè)滾動(dòng)視差文字陰影/虛影效果很有意思：

?

CodePen Demo -- CSS translate3d Parallax

當(dāng)然，通過調(diào)整參數(shù)（perspective: ?px?以及?transform: translateZ(-?px);），還能有其他很有意思的效果出現(xiàn)：

CodePen Demo -- CSS translate3d Parallax 2

是不是很有電影開片的廠商 LOGO 的特效的感覺??。

師父領(lǐng)進(jìn)門，修行在個(gè)人，怎么制作更好更有意思的效果還是需要花時(shí)間鉆研和琢磨，這里我僅僅是拋磚引玉，希望能見到更多 Nice 的效果。

?

?

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/1847.html

相關(guān)文章

  • 滾動(dòng)視差？CSS 不在話下

    摘要：可以感受下種不同取值的不同效果使用實(shí)現(xiàn)滾動(dòng)視差首先，我們使用來實(shí)現(xiàn)滾動(dòng)視差。何為滾動(dòng)視差 視差滾動(dòng)（Parallax Scrolling）是指讓多層背景以不同的速度移動(dòng)，形成立體的運(yùn)動(dòng)效果，帶來非常出色的視覺體驗(yàn)。 作為網(wǎng)頁(yè)設(shè)計(jì)的熱點(diǎn)趨勢(shì)，越來越多的網(wǎng)站應(yīng)用了這項(xiàng)技術(shù)。 通常而言，滾動(dòng)視差在前端需要輔助 Javascript 才能實(shí)現(xiàn)。當(dāng)然，其實(shí) CSS 在實(shí)現(xiàn)滾動(dòng)視差效果方面，也有著不俗...

    RobinTang 評(píng)論0 收藏0

  • 練習(xí)視差滾動(dòng)例子_byKL

    摘要：練習(xí)視差滾動(dòng)例子介紹一下視差指網(wǎng)頁(yè)滾動(dòng)過程中，多層次的元素進(jìn)行不同程度的移動(dòng)，視覺上形成立體運(yùn)動(dòng)效果的網(wǎng)頁(yè)展示技術(shù)。背景圖像會(huì)隨著頁(yè)面其余部分的滾動(dòng)而移動(dòng)。 練習(xí)視差滾動(dòng)例子 介紹一下視差 指網(wǎng)頁(yè)滾動(dòng)過程中，多層次的元素進(jìn)行不同程度的移動(dòng)，視覺上形成立體運(yùn)動(dòng)效果的網(wǎng)頁(yè)展示技術(shù)。通過前景與背景在場(chǎng)景移動(dòng)時(shí)產(chǎn)生不同的視差，從而達(dá)到簡(jiǎn)單的立體效果 說的簡(jiǎn)單點(diǎn)就是網(wǎng)頁(yè)內(nèi)的元素在滾動(dòng)屏幕時(shí)發(fā)生...

    wangbinke 評(píng)論0 收藏0

  • css 滾動(dòng)視差 之 水波紋效果

    摘要：我們來看個(gè)例子代碼很簡(jiǎn)單，讓視口出現(xiàn)滾動(dòng)條，然后它是這樣的很普通的一個(gè)滾動(dòng)效果，然后我們把注釋去掉，就是加上這句話華麗變身由于它相對(duì)視口固定，看起來就好像只有一個(gè)背景一樣。核心屬性： background-attachment 這個(gè)屬性就牛逼了， 它可以定義背景圖片是相對(duì)視口固定， 還是隨著視口滾動(dòng)， 加上這個(gè)屬性網(wǎng)頁(yè)瞬間就從屌絲變成 高大上。 我們來看個(gè)例子： ...

    _ang 評(píng)論0 收藏0

  • css 滾動(dòng)視差 之 水波紋效果

    摘要：我們來看個(gè)例子代碼很簡(jiǎn)單，讓視口出現(xiàn)滾動(dòng)條，然后它是這樣的很普通的一個(gè)滾動(dòng)效果，然后我們把注釋去掉，就是加上這句話華麗變身由于它相對(duì)視口固定，看起來就好像只有一個(gè)背景一樣。核心屬性： background-attachment 這個(gè)屬性就牛逼了， 它可以定義背景圖片是相對(duì)視口固定， 還是隨著視口滾動(dòng)， 加上這個(gè)屬性網(wǎng)頁(yè)瞬間就從屌絲變成 高大上。 我們來看個(gè)例子： html: I WANT...

    番茄西紅柿 評(píng)論0 收藏0

  • css 滾動(dòng)視差 之 水波紋效果

    摘要：我們來看個(gè)例子代碼很簡(jiǎn)單，讓視口出現(xiàn)滾動(dòng)條，然后它是這樣的很普通的一個(gè)滾動(dòng)效果，然后我們把注釋去掉，就是加上這句話華麗變身由于它相對(duì)視口固定，看起來就好像只有一個(gè)背景一樣。核心屬性： background-attachment 這個(gè)屬性就牛逼了， 它可以定義背景圖片是相對(duì)視口固定， 還是隨著視口滾動(dòng)， 加上這個(gè)屬性網(wǎng)頁(yè)瞬間就從屌絲變成 高大上。 我們來看個(gè)例子： html: d...

    番茄西紅柿 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<