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

資訊專欄INFORMATION COLUMN

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

番茄西紅柿 / 962人閱讀

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

核心屬性： background-attachment

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

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

高大上。

我們來看個(gè)例子：

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; }

代碼很簡(jiǎn)單，讓視口出現(xiàn)滾動(dòng)條，

然后它是這樣的：

很普通的一個(gè)滾動(dòng)效果， 然后我們把注釋去掉，

就是加上這句話：

background-attachment: fixed;

華麗變身：

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

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

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

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

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

HTML：

div /div

CSS:

/*整體的背景*/ .water-wave { /*占滿整個(gè)屏幕*/ 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; /*存放波紋的一個(gè)自適應(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 { /*每個(gè)波紋居中*/ 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; /*每個(gè)波紋的動(dòng)畫延遲不一樣， size由大變小再 變?yōu)?00%這樣效果更逼真*/ .wave1 { /*forwards停留在動(dòng)畫的最后一幀*/ 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; /*動(dòng)畫過程中不能讓opacity漸變，不然沒有水波紋的效果*/ /*但是這樣又會(huì)產(chǎn)生一點(diǎn)小抖動(dòng)， 不過不影響效果*/ /*你也可以注釋掉看看*/ 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); // 取父級(jí) const number = 4; // 自定義產(chǎn)生幾個(gè)水波紋 let index = 0; // 定義每次點(diǎn)擊產(chǎn)生的波紋的層級(jí) const containerWidth = document.body.clientHeight document.body.clientWidth ? document.body.clientWidth * 0.8 / 2 : document.body.clientHeight * 0.8 / 2; // 取包裹波紋的正方形的半個(gè)寬 這是為了計(jì)算點(diǎn)擊時(shí)正方形的位置 function addWave(e, parentNode, number, index) { // 渲染完波紋后插入父級(jí)， 傳入波紋數(shù)， 點(diǎn)擊的坐標(biāo)x, y ，層級(jí) parentNode.appendChild(renderWave(number, e.pageX, e.pageY, index)); // 移除每次點(diǎn)擊產(chǎn)生的波紋， // index是用來識(shí)別每次點(diǎn)擊的波紋相當(dāng)于唯一的ID removeWave(parentNode, index); // 渲染波紋的函數(shù) function renderWave(number, x, y, z) { let childrenNode = ; // 創(chuàng)建一個(gè)父級(jí)div元素用來包裹波紋 let childrenContainer = document.createElement(div); // 添加一個(gè)class用來標(biāo)記，方便刪除 childrenContainer.classList.add(`remove${z}`); // 循環(huán)產(chǎn)生波紋 for (let i = 0; i number; i++) { childrenNode += ` div /div ` // 波紋放進(jìn)div里 childrenContainer.innerHTML = ` div div ${childrenNode} /div /div // 返回這個(gè)div return childrenContainer; function removeWave(parentNode, index) { // 延遲3秒刪除波紋 setTimeout(() = { const node = document.getElementsByClassName(`remove${index}`)[0]; parentNode.removeChild(node); }, 3000); }

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

我們來看看最終效果：

 

可在下方評(píng)論大聲說出你的看法

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

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

相關(guān)文章

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

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

    番茄西紅柿 評(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)頁瞬間就從屌絲變成 高大上。 我們來看個(gè)例子： html: d...

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

  • 滾動(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)頁設(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

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

0條評(píng)論

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