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

資訊專欄INFORMATION COLUMN

css 滾動視差 之 水波紋效果

番茄西紅柿 / 951人閱讀

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

核心屬性: background-attachment

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

還是隨著視口滾動, 加上這個屬性網頁瞬間就從屌絲變成

高大上。

我們來看個例子:

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

代碼很簡單,讓視口出現滾動條,

然后它是這樣的:

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

就是加上這句話:

background-attachment: fixed;

華麗變身:

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

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

波紋效果其實就是動態生成幾個div 疊加在一起, 并且背景圖片一樣

它們的寬高逐漸變大, 透明度逐漸變為0, 并且每個div有delay, 效果

結束后remove掉,并且多次點擊產生的波紋的層級越來越高才不會被前面的波紋覆蓋;

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; /*存放波紋的一個自適應的正方形*/ .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由大變小再 變為100%這樣效果更逼真*/ .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漸變,不然沒有水波紋的效果*/ /*但是這樣又會產生一點小抖動, 不過不影響效果*/ /*你也可以注釋掉看看*/ 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; // 自定義產生幾個水波紋 let index = 0; // 定義每次點擊產生的波紋的層級 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) { // 渲染完波紋后插入父級, 傳入波紋數, 點擊的坐標x, y ,層級 parentNode.appendChild(renderWave(number, e.pageX, e.pageY, index)); // 移除每次點擊產生的波紋, // index是用來識別每次點擊的波紋相當于唯一的ID removeWave(parentNode, index); // 渲染波紋的函數 function renderWave(number, x, y, z) { let childrenNode = ; // 創建一個父級div元素用來包裹波紋 let childrenContainer = document.createElement(div); // 添加一個class用來標記,方便刪除 childrenContainer.classList.add(`remove${z}`); // 循環產生波紋 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); }

注釋已經寫的很詳細了, 自己動手寫寫才能發現問題哦

我們來看看最終效果:

 

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

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/867.html

相關文章

  • css 滾動視差 波紋效果

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

    _ang 評論0 收藏0
  • css 滾動視差 波紋效果

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

    番茄西紅柿 評論0 收藏0
  • css 滾動視差 波紋效果

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

    番茄西紅柿 評論0 收藏0
  • css 滾動視差 波紋效果

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

    番茄西紅柿 評論0 收藏0
  • 滾動視差CSS 不在話下

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

    RobinTang 評論0 收藏0

發表評論

0條評論

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