HTML5/GSAP波浪式滑块动画

Wave Slider Animation (GSAP)

svg, slider, wave

《使用js把svg图形转成png图像》申请公开！

第三方库
作品简介 2215
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

let initPaths = {
      topWave: "M-12,348.3c12-8.7,36.3-30,76.3-23.6c40.3,0.7,103.2,17.6,152.5-15.8c26.1-17.7,48.5-49.6,61.5-105.6	c9.3-40,34.7-55.3,41.7-55.3s67.5-16.1,64.3-65.8C381,30,263.7-174.7,196-187c-17.7-5.7-32.3,15.3-41.7,55.3	c-13.1,56-35.4,87.9-61.5,105.6C43.5,7.3-19.4-9.7-59.7-10.3c-47.3-0.8-50.7,29.7-52.4,53C-113.7,64.9-96.4,229-82.3,275C-64.3,334-33.3,364.3-12,348.3z",
      botWave: "M0,521.6c61.5,4.4,76.9-47.4,157.4-34.4c95.3,15.4,150.5-9,168.9-57.7c15.6-41.3,32.1-271.6,20.1-316.6	c-8.1-30.3-29-18.2-29-18.2s-32.5,24.5-50.7,61.3c-27.9,56.6-35.3,79.3-78.5,103.1c-52.2,28.7-79.5,4.8-123.5,3.3	c-47.3-1.6-67.7,10-85.3,30c-25.5,29-42,53.8-41.5,94.8c0.3,28.8-2.6,82.6,7,113C-53.6,505-71.7,516.5,0,521.6z"
  };
  let dragPaths = {
      topWave: "M-10.5,342c42.5-4.5,43-26.5,77-19.5c39.5,8.1,187.2,137.3,236.5,104c36.1-24.4-22-132.5-21-207.5	c0.5-41.1,31-71,38-71s67.5-16.1,64.3-65.8C381,30,263.7-174.7,196-187c-17.7-5.7-32.3,15.3-41.7,55.3c-13.1,56,47.8,171,21.7,188.7	C126.7,90.4-19.4-9.7-59.7-10.3c-47.3-0.8-50.7,29.7-52.4,53C-113.7,64.9-96.4,229-82.3,275C-64.3,334-57.3,347-10.5,342z",
      botWave: "M0,531.5c28.7-60.7,160.8-38.1,217.7-6.8c74,40.7,80,70,116,55.3c38.8-15.8,30.3-409.5,18.3-454.5c-8.1-30.3-29-18.2-29-18.2s-32.5,24.5-50.7,61.3C244.5,225.2,296.2,295.3,253,319c-52.2,28.7-138.7-42.5-182.7-44	C23,273.4,2.6,285-15,305c-25.5,29-25.5,70-25,111c0.3,28.8,15.4,119.6,25,150C-13.5,570.8,0,531.5,0,531.5z"
  }

let dragParams = {
      maxDrag: 160 // y distance
  }

let adjustDrag = function(curY, maxDrag, timeLine) {
      if (curY <= 0) curY = 0;
      let progress = curY / maxDrag;
      timeLine.progress(progress);
  };

$(document).on("mousedown touchstart", ".slider", function(e) {
      let startY = e.pageY || e.originalEvent.touches[0].pageY;
      let curDy = 0;
      let dragTL = newDragTL();

$(document).on("mousemove touchmove", function(e) {
          e.preventDefault();
          let curY = e.pageY || e.originalEvent.touches[0].pageY;
          curDy = curY - startY;
          adjustDrag(curDy, dragParams.maxDrag, dragTL);
      });

$(document).on("mouseup touchend", function(e) {
          $(document).off("mousemove touchmove mouseup touchend");
          if (curDy < dragParams.maxDrag) {
              tweenBack();
          } else {
              tweenForward();
              texts.next();
          }
      });
  });

TweenMax.to("#pTop", 1, {
      morphSVG: dragPaths.topWave,
  });
  TweenMax.to("#pBot", 1, {
      morphSVG: dragPaths.botWave,
  });

TweenMax.to("#pTop", 0.4, {
      morphSVG: initPaths.topWave,
      ease: Elastic.easeOut.config(1.2, 0.4),
      delay: 1.2
  });
  TweenMax.to("#pBot", 0.4, {
      morphSVG: initPaths.botWave,
      ease: Elastic.easeOut.config(1.2, 0.4),
      delay: 1.2
  });

编译

CSS

*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    background-color: #fff;
    overflow-x: hidden;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 0.8em;
    color: #3D4773;
}
.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
}
.sliderContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 320px;
    height: 550px;
}
.sliderParent {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    width: 100%;
    height: 100%;
    background-color: white;
    box-shadow: 0.5rem 1rem 3rem rgba(0, 0, 0, 0.4);
}
.slider {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 330px;
    height: 560px;
    cursor: -webkit-grab;
    cursor: grab;
}
.text {
    position: absolute;
    top: 60px;
    left: 60px;
    z-index: 2;
    font-size: 1.2em;
    opacity: 0;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    line-height: 1.8;
}
.text-1 {
    letter-spacing: 10px;
    font-size: inherit;
    text-transform: uppercase;
}
.fadeIn {
    opacity: 1;
}
.hide {
    visibility: hidden;
}
.twitLink {
    width: 35px;
    height: 27px;
    -webkit-transform: translate(6%, 0%);
    transform: translate(6%, 0%);
    display: inline-block;
    vertical-align: top;
}
.dribLink {
    width: 35px;
    display: inline-block;
    -webkit-transform: translate(5%, -15%);
    transform: translate(5%, -15%);
}
.dribLink img {
    width: 100%;
    vertical-align: top;
}
svg,
path,
.slider {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

HTML

<div class="sliderContainer">
    <div class="sliderParent">
        <div class="text text-1 fadeIn">
            <p>Glue</p>
            <p>Slider</p>
        </div>
        <div class="text text-2 hide">
            Original Dribbble shot:
            <a href="https://dribbble.com/shots/2850583-Wave-Slider-Animation" target="_blank" class="dribLink">
                <img src="https://icons.iconarchive.com/icons/uiconstock/socialmedia/256/Dribbble-icon.png">
            </a>
        </div>
        <div class="text text-3 hide">
            Follow me on Twitter:
            <div class="twitLink">
                <svg viewbox="0 0 35 23" class="china">
                    <a xlink:href="https://twitter.com/AntonMudrenok" target="_blank">
                        <path d="M31.3,2.7c-1,0.5-2.2,0.8-3.3,0.9c1.2-0.7,2.1-1.9,2.6-3.2c-1.1,0.7-2.4,1.1-3.7,1.4C25.8,0.7,24.3,0,22.6,0               c-3.2,0-5.8,2.6-5.8,5.8c0,0.5,0.1,0.9,0.1,1.3C12.1,6.9,7.8,4.6,5,1.1C4.5,1.9,4.2,2.9,4.2,4c0,2,1,3.8,2.6,4.8               c-1,0-1.8-0.3-2.6-0.7c0,0,0,0,0,0.1c0,2.8,2,5.2,4.7,5.7c-0.5,0.1-1,0.2-1.5,0.2c-0.4,0-0.7,0-1.1-0.1c0.7,2.3,2.9,4,5.4,4               c-2,1.6-4.5,2.5-7.2,2.5c-0.5,0-0.9,0-1.4-0.1C5.6,22,8.6,23,11.9,23c10.7,0,16.5-8.8,16.5-16.5c0-0.3,0-0.5,0-0.8               C29.5,4.9,30.5,3.9,31.3,2.7z"
                        fill="#55ACEE"></path>
                    </a>
                </svg>
            </div>
        </div>

Wave Slider Animation (GSAP)

svg, slider, wave

编辑器支持Emmet

快捷键

Wave Slider Animation (GSAP)

svg, slider, wave

HTML5/SVG海洋波浪动画运动模拟

HTML5 Vue.js+D3.js+GSAP交互式机场飞行距离演示动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：