Parallax.js<視差效果>

gif

???? Parallax官網(wǎng)效果預(yù)覽 ????
????Github地址????

安裝方法：

1.使用CDN引入顽爹；
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>

2.parallax.js 代碼引入；

3.通過npm安裝；
npm i -s parallax-js

具體參數(shù)和屬性可直接查看 Github地址參數(shù)介紹

代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>parallax</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
  <style>
    body {
      margin: 0;
    }

    #scene {
      position: relative;
      overflow: hidden;
      height: 100vh;
      width: 100vw;
    }

    .layer {
      position: absolute;
      top: 0%;
      left: 0%;
      width: 100%;
      height: 100%;
    }

    .layer svg {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      transform: scale(1.1);
      filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.3));
    }
  </style>
</head>

<body>
  <div id="scene">
    <div class="layer">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="-260.5 -143 1920 1080">
        <path fill="#010F1C" d="M-4283.3-877.2h9976v2610h-9976z" />
      </svg>
    </div>
  <!-- data-depth:應(yīng)用于每個圖層的移動將與其深度屬性相乘 -->
    <div class="layer" data-depth="0.1">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="-260.5 -143 1920 1080">
        <path fill="#054B8C"
          d="M-4283.3-877.2v2610h9976v-2610h-9976zM839.6 371c19.4 13.4 44.6 16.4 64.3 30.4 13.2 9.4 41.7 42.6 22.9 59.2 4.9-4.3 2.5-2.2 0 0l-.3.3c.1-.1.2-.2.3-.2-2.7 2.4-5.5 4.8-.3.2-18.9 16.1-39.5-6.5-54.1-16.9-23.1-16.5-48-26.3-75.2-33.6C740 395 680.7 397 622.1 396.2c-50.6-.7-112.8 9.6-152.1-30-10.9-11-25-30.5-12.6-45.5 19.8-24.3 47.3-4.6 68.5 3.8 20.9 8.3 39.7 5.4 63.4 7.2 9 .6 58.1-12.5 82.7-25 17.3-8.8 36.8-20.6 52.7-3.4 19.5 21 44.9 15.1 70.1 10.4 13.4-2.5 43-9.9 53.8 2.2 19.3 21.6-30.1 40.4-9 55.1zm-64.7 270.1c-7.3 19-69.3-26.7-78.6-31.7-20.4-10.9-42.1-18.6-63.9-26-5.3-1.8-64.9-20.4-47.5-32.9 31.6-22.6 97.2 8.7 127.3 21.3 23.8 10 77.7 30.4 62.7 69.3zm.6-1.5l-.1.2.1-.2zm-.2.5l-.3.7.3-.7zm325.3-485.7c-6.8 33.6-75.3 5.6-97.8 5.6-25 0-53.1 12-77.1-.3-16.5-8.4-27.7-48.4-.2-44.1 19 3 38.7 14.4 58.4 7.9 20.6-6.8 22.8-32.8 46.9-30.6 25.9 2.4 76.7 27.7 69.8 61.5z" />
      </svg>
    </div>
    <div class="layer" data-depth="0.2">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="-260.5 -143 1920 1080">
        <path fill="#0887CB"
          d="M-4283.3-877.2v2610h9976v-2610h-9976zM917.2 396.1c19 10.6 72 85.5 21.8 87.9l10.9-.5-10.9.5c-15.5.7-8.2.4 0 0-55.1 2.6-111.8-42.3-164.4-56.1-70.2-18.4-144.7-12.8-216.5-16.1-48.7-2.2-128.4-3.9-122.1-73.9 2.1-23.6 20.5-45.4 43.8-50.9 24.8-5.8 40.4 18.5 60.8 27.3 21.7 9.3 53.2-2.1 76.2-3.2 32.5-1.6 59.2-26.2 89.9-34.7 21.8-6 39.7 12.4 58.8 19.2 25.4 9.1 53.3-.4 79.1-.5 34.9 0 19.8 37.2 19.4 57.9-.4 23.1 37 34 53.2 43.1zM791 672.9c-25.7-5.5-51.7-24.9-74.8-37.1-29.5-15.5-59.3-27.8-89.9-40.9-16.8-7.2-38.5-14.8-52-27.4-15.4-14.4-3.8-33.6 14.8-35.9 49.9-6 93.5 17.7 137.8 36 25.3 10.5 45.6 29 61.6 51 5.9 8.3 35.2 61.3 2.5 54.3zm325.1-512.1c-8.2 37-102.4 11.3-125.6 11.2-25.1-.2-51.1 7.8-75.4-2.3-23.4-9.7-26.1-36.1-10.3-55.6 14.5-17.9 39 5.7 57.7-2.1 20.9-8.7 31.4-31.1 55.5-32.5 21.2-1.3 45.4 10.8 62.8 24.3 15.5 12 39.7 37.1 35.3 57z" />
      </svg>
    </div>
    <div class="layer" data-depth="0.3">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="-260.5 -143 1920 1080">
        <path fill="#54C3FF"
          d="M-4283.3-877.2v2610h9976v-2610h-9976zM982.9 483.9v-.2c.1.1.1.2 0 .2-5.2 19.4-2.3 8.6 0 0-10.9 39.9-80.8 25.4-108 15.6-64.9-23.3-123.8-54.5-193.4-63.1-39.9-4.9-80.3-7.3-120.5-9.6-32.6-1.9-68.4 3.9-100-5.4-63.8-19-34.6-89.1-21.1-133.4 31.7-37.2 111.8 13.8 146.7 13.1 33.3-.7 63.8-15.6 92.5-30.8 32.2-17.1 57.3 1.6 87.8 8.1 32.3 6.8 61.4 7.3 93.9 9.9 34.6 2.7 26.1 32.7 28.5 58 2.9 30.7 41.5 42.6 59.9 63.5 16.9 19.3 41.3 45.9 33.7 74 3.3-11.6 1.8-6.5 0 .1zM837.3 685.4c.1-.4.3-.8.5-1.4l-.5 1.4c0 .1-.1.3-.1.4l-.1.2.1-.2c-14.8 38.3-135-34.1-157-44.9-27.5-13.5-194-78.7-113-120.2 35.5-18.2 116 8.8 150.1 24.8 42.4 19.8 143.3 78.2 120 139.9zm2-5.2c.1-.2.1-.2 0 0zm0 .2l-.1.1.1-.1zm-.3.6l-.4 1 .4-1zm-.6 1.7l-.1.4.1-.4zm288-501.1l.2-.1s-.1.1-.2.1zm1.1-.5l.2-.1-.2.1zm.3-.2c.2 0 .2 0 0 0zm-2.9 1.4c-47.6 22.9-124.4 20.6-175.8 18.5-21.3-.9-51.8-7.9-68.2-22.6-24.3-21.8-.1-59.4 19.6-74.2 20-14.9 34.2-3.6 57-9.7 15-4 26.3-17.2 42.5-21.2 17.2-4.2 34.5-4.6 51.1 2.1 18.8 7.6 115.4 87.1 73.8 107.1z" />
      </svg>
    </div>
    <div class="layer" data-depth="0.4">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="-260.5 -143 1920 1080">
        <path fill="#ADECFF"
          d="M-4283.3-877.2v2610h9976v-2610h-9976zM962.3 544c6.9-1.7 11.5-2.8 0 0-35.2 8.5-71.1-4.2-103.8-16-41.5-15-83.7-28.4-126.1-40.6-80.6-23.1-158.9-28.5-241.1-40.1-37.6-5.3-124.6-6.9-130.6-56.2-4.4-35.5 19.9-62 42.3-86.1 10.1-10.9 16.5-19.9 21.4-33.7 5.9-16.6 30.4-15.4 45.3-16.4 35.1-2.4 63.7 11.7 97.5 15.5 38.6 4.4 77.1-9.7 114.9-15.5 34.8-5.3 68.8-5.9 102.9 3.9 34.9 10.1 74.8 9 107.6 25.5 25.5 12.9 37.6 52.6 55.7 74 26 30.8 52.2 60.3 71.5 96.1 11.2 20.7 30 55.2 4 72.5-18 11.8-41.2 12.2-61.5 17.1zM860.9 705.6c0-.1 0-.2.1-.3 0 .1 0 .2-.1.3 0 .2-.1.4-.1.6.1-.2.1-.4.1-.6-5.9 27.7-76.9 8.1-91.4 3.5-45.8-14.5-87.1-35.1-127.9-60.5-20.1-12.5-37.3-29-57.3-41.7-16.7-10.6-35.6-20.5-47.2-37.2-19.1-27.3 11.3-46.9 29.6-59.6 26.2-8.6 60.3 4.7 86.8 5.8 33.6 1.3 74.4 12.9 102.3 32.1 41.7 28.8 117.1 99.3 105.2 157.2.4-1.6.2-.9-.1.4zm-.2 1c-.5 2.6-.8 3.7-.8 4 .1-.4.5-2.4.8-4zm300.9-535.1c-12.5 53.9-151 44.7-189.9 44.5-61.8-.5-134.9-19.4-109.6-97.3 8.7-26.8 27.8-35.3 54.4-36.3 16.1-.6 27.7-6.1 40.6-15.1 17.8-12.5 37.9-9.6 58.6-8.5 29.5 1.5 73 22.9 91.5 47.3 9.5 12.5 16.2 26.5 30.4 34.7 11.7 6.6 27.9 13.7 24 30.7z" />
      </svg>
    </div>
    <div class="layer" data-depth="0.5">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="-260.5 -143 1920 1080">
        <path fill="#EFFBFF"
          d="M-4283.3-877.2v2610h9976v-2610h-9976zM924.4 587c-76.3 35.7 33.1 149.2-60.1 163.3-79.8 12-168.9-13.7-235.3-56.9-37-24.1-70.5-52.9-106.5-78.4-37.3-26.4-28.7-42.7-23.9-83.1 8.5-71.1-124.9-50.8-167.4-87.9-32.8-28.6-13.7-75.7.6-109 12.9-30.1 21.1-69 40.4-95.5 21-28.8 58.5-20.3 89.4-20.5 46.8-.2 92.5 12.1 139.3 12.1 47.6 0 94-9.9 141.9-8.5 24 .7 83.6-3.6 102.1 15.5 5.2 12.8 57.3 18.8 68.5 23.4 30.5 12.7 53.2 36.3 73.8 61.5 33.9 41.5 111.8 107.8 108.8 167-4.9 96.6-112 69-171.6 97zm171.1-87.5v.1-.1zm1-18.8c0-.2 0-.2 0 0zm95.2-312.4c-2.9 60.4-113.6 61.2-153.3 64.4-67.9 5.4-150.5 10.8-201.8-42.4-19.3-20-19.8-52-12.2-77.2 10.3-33.8 34.9-44.5 67.7-48.4 32-3.9 59.5-23.8 89.9-26.8 36.3-3.6 68 6.7 97.6 25.1 12.1 7.5 38.1 39.5 57.8 57.5 17.1 15.5 55.7 18 54.3 47.8z" />
      </svg>
    </div>
  </div>
</body>
<script>
  // 運(yùn)行視差
  var scene = document.getElementById('scene');
  var parallaxInstance = new Parallax(scene, {
    //更多參數(shù)可參考 https://github.com/wagerfield/parallax
    relativeInput: true, //默認(rèn)值：false 使鼠標(biāo)相對于場景元素的位置輸入。
    clipRelativeInput: false, //默認(rèn)值：false 將鼠標(biāo)輸入剪切到場景的邊界。這意味著一旦光標(biāo)到達(dá)場景元素的邊緣，移動就會停止。
    hoverOnly:false //默認(rèn)值：false 視差僅在光標(biāo)位于場景元素上方時才有效啄踊，否則所有圖層將移回到其初始位置。
  });
</script>

</html>

最后編輯于：2021.04.20 11:21:09

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末刁标，一起剝皮案震驚了整個濱河市颠通，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌膀懈，老刑警劉巖顿锰，帶你破解...
沈念sama閱讀 219,188評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異启搂，居然都是意外死亡硼控，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,464評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門胳赌，熙熙樓的掌柜王于貴愁眉苦臉地迎上來牢撼，“玉大人，你說我怎么就攤上這事疑苫⊙妫” “怎么了？”我有些...
開封第一講書人閱讀 165,562評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵捍掺，是天一觀的道長撼短。經(jīng)常有香客問我，道長乡小，這世上最難降的妖魔是什么阔加？我笑而不...
開封第一講書人閱讀 58,893評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮满钟，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘胳喷。我一直安慰自己湃番，他們只是感情好，可當(dāng)我...
茶點故事閱讀 67,917評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布吭露。她就那樣靜靜地躺著吠撮，像睡著了一般。火紅的嫁衣襯著肌膚如雪讲竿。梳的紋絲不亂的頭發(fā)上泥兰，一...
開封第一講書人閱讀 51,708評論 1贊 305
城市分裂傳說
那天弄屡，我揣著相機(jī)與錄音，去河邊找鬼鞋诗。笑死膀捷，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的削彬。我是一名探鬼主播全庸，決...
沈念sama閱讀 40,430評論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼融痛！你這毒婦竟也來了壶笼？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,342評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤雁刷，失蹤者是張志新（化名）和其女友劉穎覆劈，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體沛励，經(jīng)...
沈念sama閱讀 45,801評論 1贊 317
?護(hù)林員之死
正文獨居荒郊野嶺守林人離奇死亡墩崩，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,976評論 3贊 337
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了侯勉。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片鹦筹。...
茶點故事閱讀 40,115評論 1贊 351
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖址貌，靈堂內(nèi)的尸體忽然破棺而出铐拐，到底是詐尸還是另有隱情，我是刑警寧澤练对，帶...
沈念sama閱讀 35,804評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布遍蟋，位于F島的核電站，受9級特大地震影響螟凭，放射性物質(zhì)發(fā)生泄漏虚青。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 41,458評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一螺男、第九天我趴在偏房一處隱蔽的房頂上張望棒厘。院中可真熱鬧，春花似錦下隧、人聲如沸奢人。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,008評論 0贊 22
一樁弒父案淆院，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽何乎。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間支救，已是汗流浹背抢野。一陣腳步聲響...
開封第一講書人閱讀 33,135評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留各墨，地道東北人指孤。一個月前我還...
沈念sama閱讀 48,365評論 3贊 373
代替公主和親
正文我出身青樓，卻偏偏與公主長得像欲主，于是被迫代替她去往敵國和親邓厕。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 45,055評論 2贊 355

Parallax.js<視差效果>

安裝方法：

代碼如下：

推薦閱讀更多精彩內(nèi)容