成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css 滾動視差 之 水波紋效果

番茄西紅柿 / 3335人閱讀

摘要：我們來看個例子代碼很簡單，讓視口出現(xiàn)滾動條，然后它是這樣的很普通的一個滾動效果，然后我們把注釋去掉，就是加上這句話華麗變身由于它相對視口固定，看起來就好像只有一個背景一樣。

核心屬性： background-attachment

這個屬性就牛逼了， 它可以定義背景圖片是相對視口固定，

還是隨著視口滾動， 加上這個屬性網(wǎng)頁瞬間就從屌絲變成

高大上。

我們來看個例子：

html:

div /div div I WANT FLY /div div /div div I WANT FLY /div div /div div I WANT FLY /div div /div

css:

body{ background-color: #cccccc; margin: 0; padding: 0; .attach{ background-image: url("./img/1.jpg"); background-size: cover; /*background-attachment: fixed;*/ background-position: center center; .view{ height: 100vh; .text{ font-size: 45px; text-align: center; line-height: 100vh; color: #ffffff; }

代碼很簡單，讓視口出現(xiàn)滾動條，

然后它是這樣的：

很普通的一個滾動效果， 然后我們把注釋去掉，

就是加上這句話：

background-attachment: fixed;

華麗變身：

由于它相對視口固定， 看起來就好像只有一個背景一樣。

我們就用這個屬性來制作水波紋效果：

波紋效果其實就是動態(tài)生成幾個div 疊加在一起， 并且背景圖片一樣

它們的寬高逐漸變大， 透明度逐漸變?yōu)?， 并且每個div有delay, 效果

結(jié)束后remove掉，并且多次點擊產(chǎn)生的波紋的層級越來越高才不會被前面的波紋覆蓋；

HTML：

div /div

CSS:

/*整體的背景*/ .water-wave { /*占滿整個屏幕*/ position: relative; height: 100vh; width: 100vw; background-image: url("./img/1.jpg"); background-size: cover; background-position: center center; background-attachment: fixed; overflow: hidden; cursor: pointer; /*存放波紋的一個自適應(yīng)的正方形*/ .wave-container { position: absolute; /* vmin = 視口width 視口height ? height : width*/ width: 80vmin; height: 80vmin; .center{ position: relative; width: 100%; height: 100%; /*背景鋪滿*/ background-size: cover; .wave { /*每個波紋居中*/ position: absolute; top: calc((100% - 10vmin) / 2); left: calc((100% - 10vmin) / 2); width: 10vmin; height: 10vmin; border-radius: 50%; /*開啟3d加速*/ transform: translate3d(0, 0, 0); background-image: url("./img/1.jpg"); background-position: center center; background-attachment: fixed; /*所有屬性變化過渡200ms*/ transition: all .2s; /*每個波紋的動畫延遲不一樣， size由大變小再 變?yōu)?00%這樣效果更逼真*/ .wave1 { /*forwards停留在動畫的最后一幀*/ animation: move 1s ease-out .1s forwards; background-size: 106%; z-index: 10; .wave2 { animation: move 1s ease-out .15s forwards; background-size: 102%; z-index: 20; .wave3 { animation: move 1s ease-out .25s forwards; background-size: 104%; z-index: 30; .wave4 { animation: move 1s ease-out .4s forwards; background-size: 100%; z-index: 40; @keyframes move { 0% { top: calc((100% - 10vmin) / 2); left: calc((100% - 10vmin) / 2); width: 10vmin; height: 10vmin; opacity: 1; /*動畫過程中不能讓opacity漸變，不然沒有水波紋的效果*/ /*但是這樣又會產(chǎn)生一點小抖動， 不過不影響效果*/ /*你也可以注釋掉看看*/ 99% { opacity: 1; 100% { top: calc((100% - 40vmin) / 2); left: calc((100% - 40vmin) / 2); width: 40vmin; height: 40vmin; opacity: 0; }

JS:   我盡量每行都寫注釋

const container = document.getElementsByClassName(water-wave); // 取父級 const number = 4; // 自定義產(chǎn)生幾個水波紋 let index = 0; // 定義每次點擊產(chǎn)生的波紋的層級 const containerWidth = document.body.clientHeight document.body.clientWidth ? document.body.clientWidth * 0.8 / 2 : document.body.clientHeight * 0.8 / 2; // 取包裹波紋的正方形的半個寬 這是為了計算點擊時正方形的位置 function addWave(e, parentNode, number, index) { // 渲染完波紋后插入父級， 傳入波紋數(shù)， 點擊的坐標x, y ，層級 parentNode.appendChild(renderWave(number, e.pageX, e.pageY, index)); // 移除每次點擊產(chǎn)生的波紋， // index是用來識別每次點擊的波紋相當于唯一的ID removeWave(parentNode, index); // 渲染波紋的函數(shù) function renderWave(number, x, y, z) { let childrenNode = ; // 創(chuàng)建一個父級div元素用來包裹波紋 let childrenContainer = document.createElement(div); // 添加一個class用來標記，方便刪除 childrenContainer.classList.add(`remove${z}`); // 循環(huán)產(chǎn)生波紋 for (let i = 0; i number; i++) { childrenNode += ` div /div ` // 波紋放進div里 childrenContainer.innerHTML = ` div div ${childrenNode} /div /div // 返回這個div return childrenContainer; function removeWave(parentNode, index) { // 延遲3秒刪除波紋 setTimeout(() = { const node = document.getElementsByClassName(`remove${index}`)[0]; parentNode.removeChild(node); }, 3000); }

注釋已經(jīng)寫的很詳細了， 自己動手寫寫才能發(fā)現(xiàn)問題哦

我們來看看最終效果：

 

可在下方評論大聲說出你的看法

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/845.html

相關(guān)文章

  • css 滾動視差 之 水波紋效果

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

    _ang 評論0 收藏0

  • css 滾動視差 之 水波紋效果

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

    番茄西紅柿 評論0 收藏0

  • css 滾動視差 之 水波紋效果

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

    番茄西紅柿 評論0 收藏0

  • css 滾動視差 之 水波紋效果

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

    番茄西紅柿 評論0 收藏0

  • 滾動視差？CSS 不在話下

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

    RobinTang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<