gsap+ScrollTrigger浏览器滚动实现捕鱼效果代码
代码语言：html
所属分类：加载滚动
代码描述：gsap+ScrollTrigger浏览器滚动实现捕鱼效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body,
html {
margin: 0;
padding: 0;
overflow: y-scroll;
height: 100%;
}
#bub-line, #bub-line2 {
display: none;
}
</style>
</head>
<body >
<div id="container">
<svg id="svg" width="100%" height="100%" viewBox="0 0 800 2512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<rect id="artboard" x="0" y="0" width="800" height="2512" style="fill:none;"/>
<clipPath id="_clip1">
<rect id="artboard1" serif:id="artboard" x="0" y="0" width="800" height="2512"/>
</clipPath>
<g clip-path="url(#_clip1)">
<rect id="bg" x="0" y="0" width="800" height="2512" style="fill:rgb(34,97,112);stroke:rgb(241,196,107);"/>
<rect id="night-bg" x="0" y="0" width="800" height="521" style="fill:rgb(10,78,95);"/>
<g id="moon">
<circle class="moon-el" cx="419.741" cy="282" r="187.9" style="fill:white;fill-opacity:0.8;"/>
<circle class="moon-el" cx="419.741" cy="282" r="223.923" style="fill:white;fill-opacity:0.6;"/>
<circle class="moon-el" cx="419.741" cy="282" r="262.501" style="fill:white;fill-opacity:0.4;"/>
<circle class="moon-main" cx="419.741" cy="282" r="156.182" style="fill:white;"/>
</g>
<g id="ship">
<rect x="287.447" y="221.734" width="10.887" height="17.112" style="fill:rgb(241,196,107);"/>
<rect x="271.121" y="233.731" width="66.196" height="26.769" style="fill:rgb(35,101,116);"/>
<path d="M400,211.292C400,211.292 380.921,228.546 354.438,255.03" style="fill:rgb(10,78,95);"/>
<path d="M399.613,210.864C399.613,210.864 390.482,218.693 376.004,231.897C369.301,238.011 361.462,245.269 352.847,253.439C351.969,254.317 351.969,255.743 352.847,256.621C353.725,257.499 355.151,257.499 356.029,256.621C364.181,248.025 371.608,240.38 377.964,233.935C391.699,220.007 400.387,211.719 400.387,211.719C400.623,211.506 400.642,211.141 400.428,210.904C400.214,210.668 399.849,210.65 399.613,210.864Z" style="fill:rgb(10,78,95);"/>
<path d="M242.548,254.398C242.311,253.857 242.362,253.233 242.685,252.739C243.008,252.244 243.559,251.946 244.149,251.946L366.888,251.946C367.479,251.946 368.029,252.244 368.352,252.739C368.675,253.233 368.727,253.857 368.489,254.398C366.806,258.234 363.428,265.93 360.403,272.822C356.765,281.111 348.569,286.465 339.516,286.465C321.098,286.465 289.939,286.465 271.521,286.465C262.468,286.465 254.272,281.111 250.634,272.822C247.609,265.93 244.232,258.234 242.548,254.398Z" style="fill:rgb(241,196,107);"/>
<circle cx="286.996" cy="243.94" r="5.094" style="fill:white;"/>
<circle cx="305.472" cy="243.94" r="5.094" style="fill:white;"/>
<ellipse class="ship-smoke" cx="277.63" cy="212.19" rx="9.816" ry="5.881" style="fill:white;"/>
<ellipse class="ship-smoke" cx="251.786" cy="191.34" rx="17.846" ry="8.916" style="fill:white;"/>
<circle cx="323.892" cy="243.94" r="5.094" style="fill:white;"/>
<path d="M254.089,260.5L359.468,260.5" style="fill:none;stroke:white;stroke-width:2.5px;"/>
<path d="M254.089,268.404L359.468,268.404" style="fill:none;stroke:white;stroke-width:2.5px;"/>
</g>
<g id="top-hill">
<use id="hill-2" xlink:href="#_Image2" x="398.795" y="24" width="401.601px" height="345.361px" transform="matrix(0.999007,0,0,0.998153,0,0)"/>
<path id="hill-21" serif:id="hill-2" d="M460.437,287.903L467.13,279.203L467.122,272.436L471.425,268.811L473.574,259.869L471.88,254.552L480.724,248.994L486.7,245.611L485.479,239.569L489.782,223.135L501.256,212.811L537.21,206.46L556.095,202.104L580.477,197.502L599.123,196.052L611.314,188.802L618.485,190.948L629.003,177.173L626.093,151.119L639.718,131.785L663.623,129.847L672.468,135.823L682.986,135.337L684.399,108.753L693.955,98.361L719.018,100.034L744.462,100.746L786.02,99.294L805.86,106.465C805.86,106.465 815.892,108.506 826.896,108.855C837.9,109.205 878.738,108.719 878.738,108.719L908.172,292.219L603.21,291.494L606.315,278.202L608.706,270.952L615.16,264.666L609.601,250.166L606.943,241.707L601.868,231.557L593.168,235.86L584.709,246.617L578.909,250.68L579.847,260.959L572.355,269.804L565.105,275.302L572.276,283.43L570.826,292.274L460.437,287.903Z" style="fill:white;"/>
<path id="hill" d="M456.468,287.826L463.28,278.971L463.272,272.084L467.651,268.395L469.838,259.295L468.114,253.884L477.115,248.227L483.197,244.783L481.954,238.634L486.333,221.909L498.011,211.403L534.602,204.938L553.822,200.506L578.636,195.822L597.613,194.346L610.02,186.967L617.319,189.152L628.023,175.132L625.061,148.617L638.928,128.94L663.256,126.967L672.258,133.049L682.962,132.555L684.401,105.499L694.127,94.923L719.634,96.626L745.529,97.351L787.823,95.872L808.015,103.171C808.015,103.171 818.225,105.248 829.424,105.604C840.623,105.959 882.185,105.465 882.185,105.465L912.141,292.218L601.772,291.48L604.932,277.953L607.365,270.574L613.934,264.176L608.277,249.419L605.571,240.81L600.406,230.48L591.552,234.859L582.943,245.807L577.04,249.943L577.995,260.404L570.37,269.406L562.991,275.001L570.29,283.273L568.814,292.274L456.468,287.826Z" style="fill:rgb(10,78,95);"/>
</g>
<rect id="water-bg" x="0" y="282" width="800" height="2230" style="fill:rgb(35,101,116);"/>
<g id="water2">
<path class="water-top" d="M672.216,613.227C672.217,597.856 666.11,583.114 655.241,572.244C644.372,561.375 629.63,555.269 614.259,555.269C525.23,555.269 355.803,555.269 266.774,555.269C251.402,555.269 236.66,561.375 225.791,572.244C214.922,583.114 208.816,597.856 208.816,613.227C208.816,613.228 208.816,613.229 208.816,613.23C208.816,628.602 214.922,643.344 225.791,654.213C236.66,665.082 251.402,671.188 266.774,671.188C355.803,671.188 525.23,671.188 614.259,671.188C629.63,671.188 644.372,665.082 655.241,654.213C666.11,643.344 672.217,628.602 672.216,613.23C672.216,613.229 672.216,613.228 672.216,613.227Z" style="fill:rgb(38,110,126);"/>
<path class="water-top" d="M888.121,613.227C888.121,597.856 882.015,583.114 871.146,572.244C860.277,561.375 845.535,555.269 830.163,555.269C807.366,555.269 781.243,555.269 758.445,555.269C743.074,555.269 728.332,561.375 717.463,572.244C706.593,583.114 700.487,597.856 700.487,613.227C700.487,613.228 700.487,613.229 700.487,613.23C700.487,628.602 706.593,643.344 717.463,654.213C728.332,665.082 743.074,671.188 758.445,671.188C781.243,671.188 807.366,671.188 830.163,671.188C845.535,671.188 860.277,665.082 871.146,654.213C882.015,643.344 888.121,628.602 888.121,613.23C888.121,613.229 888.121,613.228 888.121,613.227Z" style="fill:rgb(38,110,126);"/>
<path class="water-mid" d="M764.556,748.041C764.556,732.669 758.45,717.927 747.58,707.058C736.711,696.189 721.969,690.083 706.598,690.083C611.706,690.083 424.279,690.083 329.387,690.083C314.016,690.083 299.274,696.189 288.404,707.058C277.535,717.927 271.429,732.669 271.429,748.041C271.429,748.042 271.429,748.043 271.429,748.044C271.429,763.415 277.535,778.157 288.404,789.026C299.274,799.896 314.016,806.002 329.387,806.002C424.279,806.002 611.706,806.002 706.598,806.002C721.969,806.002 736.711,799.896 747.58,789.026C758.45,778.157 764.556,763.415 764.556,748.044L764.556,748.041Z" style="fill:rgb(38,110,126);"/>
<path class="water-btm" d="M831.945,882.854C831.945,867.483 825.839,852.741 814.97,841.872C804.101,831.002 789.359,824.896 773.987,824.896C646.448,824.896 342.706,824.896 215.167,824.896C199.796,824.896 185.054,831.002 174.185,841.872C163.315,852.741 157.209,867.483 157.209,882.854C157.209,882.855 157.209,882.856 157.209,882.857C157.209,898.229 163.315,912.971 174.185,923.84C185.054,934.709 199.796,940.815 215.167,940.815C342.706,940.815 646.448,940.815 773.987,940.815C789.359,940.815 804.101,934.709 814.97,923.84C825.839,912.971 831.945,898.229 831.945,882.857C831.945,882.856 831.945,882.855 831.945,882.854Z" style="fill:rgb(38,110,126);"/>
<path class="water-btw" d="M527.248,671.189C527.215,671.188 527.182,671.188 527.15,671.188C522.096,671.188 517.992,675.421 517.992,680.635C517.992,685.849 522.096,690.083 527.15,690.083C527.182,690.083 527.215,690.082 527.248,690.082L527.248,748.042L379.105,748.042L379.105,690.083C384.158,690.083 388.262,685.849 388.262,680.635C388.262,675.421 384.158,671.188 379.105,671.188L379.105,635.95L527.248,635.95L527.248,671.189Z" style="fill:rgb(38,110,126);"/>
<path class="water-btw" d="M686.874,806.002C681.82,806.002 677.717,810.235 677.717,815.449C677.717,820.663 681.82,824.896 686.874,824.896L686.874,894.158L517.992,894.158L517.992,824.896C518.025,824.896 518.058,824.896 518.091,824.896C523.145,824.896 527.248,820.663 527.248,815.449C527.248,810.235 523.145,806.002 518.091,806.002C518.058,806.002 518.025,806.002 517.992,806.002L517.992,782.066L686.874,782.066L686.874,806.002Z" style="fill:rgb(38,110,126);"/>
</g>
<g id="water1">
<path class="water-top" d="M531.676,1781.7C531.676,1766.33 525.57,1751.59 514.7,1740.72C503.831,1729.85 489.089,1723.74 473.718,1723.74C384.689,1723.74 215.262,1723.74 126.233,1723.74C110.862,1723.74 96.12,1729.85 85.251,1740.72C74.381,1751.59 68.275,1766.33 68.275,1781.7C68.275,1781.7 68.275,1781.7 68.275,1781.7C68.275,1797.08 74.381,1811.82 85.251,1822.69C96.12,1833.56 110.862,1839.66 126.233,1839.66C215.262,1839.66 384.689,1839.66 473.718,1839.66C489.089,1839.66 503.831,1833.56 514.7,1822.69C525.57,1811.82 531.676,1797.08 531.676,1781.7C531.676,1781.7 531.676,1781.7 531.676,1781.7Z" style="fill:rgb(38,110,126);"/>
<path class="water-top" d="M724.792,1646.89C724.792,1631.52 718.685,1616.78 707.816,1605.9C696.947,1595.04 682.205,1588.93 666.834,1588.93C577.805,1588.93 408.378,1588.93 319.349,1588.93C303.977,1588.93 289.235,1595.04 278.366,1605.9C267.497,1616.78 261.391,1631.52 261.391,1646.89C261.391,1646.89 261.391,1646.89 261.391,1646.89C261.391,1662.26 267.497,1677 278.366,1687.87C289.235,1698.74 303.977,1704.85 319.349,1704.85C408.378,1704.85 577.805,1704.85 666.834,1704.85C682.205,1704.85 696.947,1698.74 707.816,1687.87C718.685,1677 724.792,1662.26 724.792,1646.89C724.792,1646.89 724.792,1646.89 724.792,1646.89Z" style="fill:rgb(38,110,126);"/>
<path class="water-top" d="M747.581,1781.7C747.581,1766.33 741.474,1751.59 730.605,1740.72C719.736,1729.85 704.994,1723.74 689.623,1723.74C666.825,1723.74 640.702,1723.74 617.905,1723.74C602.533,1723.74 587.791,1729.85 576.922,1740.72C566.053,1751.59 559.947,1766.33 559.947,1781.7C559.947,1781.7 559.947,1781.7 559.947,1781.7C559.947,1797.08 566.053,1811.82 576.922,1822.69C587.791,1833.56 602.533,1839.66 617.905,1839.66C640.702,1839.66 666.825,1839.66 689.623,1839.66C704.994,1839.66 719.736,1833.56 730.605,1822.69C741.474,1811.82 747.581,1797.08 747.581,1781.7C747.581,1781.7 747.581,1781.7 747.581,1781.7Z" style="fill:rgb(38,110,126);"/>
<path class="water-mid" d="M624.015,1916.52C624.015,1901.14 617.909,1886.4 607.04,1875.53C596.17,1864.66 581.429,1858.56 566.057,1858.56C471.165,1858.56 283.739,1858.56 188.846,1858.56C173.475,1858.56 158.733,1864.66 147.864,1875.53C136.995,1886.4 130.888,1901.14 130.888,1916.52L130.888,1916.52C130.888,1931.89 136.995,1946.63 147.864,1957.5C158.733,1968.37 173.475,1974.48 188.846,1974.48C283.739,1974.48 471.165,1974.48 566.057,1974.48C581.429,1974.48 596.17,1968.37 607.04,1957.5C617.909,1946.63 624.015,1931.89 624.015,1916.52L624.015,1916.52Z" style="fill:rgb(38,110,126);"/>
<path class="water-btm" d="M691.405,2051.33C691.405,2035.96 685.299,2021.22 674.429,2010.35C663.56,1999.48 648.818,1993.37 633.447,1993.37C505.908,1993.37 202.166,1993.37 74.627,1993.37C59.255,1993.37 44.513,1999.48 33.644,2010.35C22.775,2021.22 16.669,2035.96 16.669,2051.33C16.669,2051.33 16.669,2051.33 16.669,2051.33C16.669,2066.7 22.775,2081.45 33.644,2092.31C44.513,2103.18 59.255,2109.29 74.627,2109.29C202.166,2109.29 505.908,2109.29 633.447,2109.29C648.818,2109.29 663.56,2103.18 674.429,2092.31C685.299,2081.45 691.405,2066.7 691.405,2051.33C691.405,2051.33 691.405,2051.33 691.405,2051.33Z" style="fill:rgb(38,110,126);"/>
<path class="water-btw" d="M386.707,1839.66C386.675,1839.66 386.642,1839.66 386.609,1839.66C381.555,1839.66 377.452,1843.9 377.452,1849.11C377.452,1854.32 381.555,1858.56 386.609,1858.56C386.642,1858.56 386.675,1858.56 386.707,1858.56L386.707,1916.52L238.564,1916.52L238.564,1858.56C243.618,1858.56 247.721,1854.32 247.721,1849.11C247.721,1843.9 243.618,1839.66 238.564,1839.66L238.564,1804.42L386.707,1804.42L386.707,1839.66Z" style="fill:rgb(38,110,126);"/>
<path class="water-btw" d="M471.682,1704.85C471.649,1704.85 471.617,1704.85 471.584,1704.85C466.53,1704.85 462.427,1709.08 462.427,1714.3C462.427,1719.51 466.53,1723.74 471.584,1723.74C471.617,1723.74 471.649,1723.74 471.682,1723.74L471.682,1781.7L323.539,1781.7L323.539,1723.74C328.593,1723.74 332.696,1719.51 332.696,1714.3C332.696,1709.08 328.593,1704.85 323.539,1704.85L323.539,1669.61L471.682,1669.61L471.682,1704.85Z" style="fill:rgb(38,110,126);"/>
<path class="water-btw" d="M546.333,1974.48C541.279,1974.48 537.176,1978.71 537.176,1983.92C537.176,1989.14 541.279,1993.37 546.333,1993.37L546.333,2062.63L377.452,2062.63L377.452,1993.37C377.485,1993.37 377.517,1993.37 377.55,1993.37C382.604,1993.37 386.707,1989.14 386.707,1983.92C386.707,1978.71 382.604,1974.48 377.55,1974.48C377.517,1974.48 377.485,1974.48 377.452,1974.48L377.452,1950.54L546.333,1950.54L546.333,1974.48Z" style="fill:rgb(38,110,126);"/>
</g>
<g id="rock-left-w">
<path d="M-31,950L164,1096L180,1225L226,1295L254,1352L244,1462C244,1462 153.423,1557.59 160,1576C166.577,1594.41 151,1652 151,1652L-54,1770L-31,950Z" style="fill:rgb(185,212,218);"/>
<g>
<path d="M23,965.338C28.65,969.414 28.421,973.002 26.474,977.077C25.629,978.846 24.481,980.65 23.384,982.611C22.406,984.36 21.43,986.193 20.72,988.122C19.566,991.257 18.961,994.565 19.384,997.885C19.67,1000.13 20.346,1002.37 21.789,1004.56C23.331,1006.91 25.58,1009.15 28.977,1011.32C29.027,1011.37 29.101,1011.36 29.144,1011.31C29.187,1011.26 29.181,1011.19 29.132,1011.14C24.889,1006.32 23.662,1002.18 23.853,998.304C23.912,997.122 24.169,996.006 24.465,994.883C24.927,993.131 25.699,991.481 26.455,989.81C27.013,988.577 27.569,987.343 28.112,986.126C28.709,984.788 29.271,983.471 29.744,982.172C30.972,978.797 31.764,975.654 31.167,972.854C30.503,969.741 28.438,966.973 23.11,965.129C23.052,965.099 22.98,965.121 22.95,965.179C22.92,965.237 22.942,965.308 23,965.338Z" style="fill:rgb(101,177,194);"/>
<path d="M37.171,978.722C37.506,982.862 36.297,984.537 34.529,985.903C33.595,986.625 32.517,987.146 31.439,987.86C30.094,988.75 28.79,989.825 27.686,991.25C27.252,991.81 26.865,992.439 26.551,993.138C26.137,994.06 25.788,995.081 25.631,996.251C25.384,998.093 25.347,1000.23 25.99,1002.83C26.597,1005.27 27.671,1007.93 29.401,1011.27C29.419,1011.33 29.484,1011.37 29.547,1011.35C29.609,1011.33 29.646,1011.26 29.628,1011.2C29.357,1007.65 29.511,1004.94 29.771,1002.56C29.936,1001.06 30.247,999.842 30.556,998.728C30.907,997.465 31.441,996.513 31.954,995.647C32.347,994.981 32.748,994.388 33.187,993.85C33.743,993.168 34.291,992.538 34.851,991.932C36.471,990.179 38.019,988.648 38.667,986.559C39.305,984.503 39.331,982.138 37.397,978.654C37.379,978.591 37.313,978.556 37.25,978.575C37.188,978.593 37.152,978.659 37.171,978.722Z" style="fill:rgb(101,177,194);"/>
</g>
<path d="M48,10.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0