svg泳池水波

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

TweenMax.set("svg", { visibility: "visible" });

const randomMinMax = (min, max) => {
  return min + Math.floor(Math.random() * (max - min));
};

const rippleSmallH = document.querySelectorAll(".horizontalRippleSmall"),
  rippleMedH = document.querySelectorAll(".horizontalRippleMedium"),
  rippleSmallV = document.querySelectorAll(".verticalRippleSmall"),
  rippleMedV = document.querySelectorAll(".verticalRippleMedium"),
  rippleBigV = document.querySelectorAll(".verticalRippleBig");

// Animate Pool
const poolTl = new TimelineMax({});

poolTl
  .to(rippleSmallH, 6, { x: 800, ease: Linear.easeNone, repeat: -1 }, "one")
  .to(rippleMedH, 6, { x: 800, ease: Linear.easeNone, repeat: -1 }, "one")
  .to(rippleSmallV, 6, { y: -600, ease: Linear.easeNone, repeat: -1 }, "one")
  .to(rippleMedV, 6, { y: -600, ease: Linear.easeNone, repeat: -1 }, "one+=0.1")
  .to(
    rippleBigV,
    6,
    { y: -600, ease: Linear.easeNone, repeat: -1 },
    "one+=0.1"
  );

// Rotate tube
const tube = document.querySelector("#tube");
TweenMax.to(tube, 2, {
  rotation: 5,
  ease: Sine.easeInOut,
  transformOrigin: "50% 50%",
  repeat: -1,
  yoyo: true,
  yoyoEase: Linear.easeNone
});
const rotateTl = new TimelineMax({
  repeat: -1,
  yoyo: true,
  yoyoEase: Sine.easeInOut
});
rotateTl
  .to(tube, 2, { x: 4, y: 2, ease: Sine.easeInOut }, "rotate")
  .to(".tubeRipple", 2, { x: 4, y: 2, ease: Sine.easeInOut }, "rotate");

// Animating the tube shadow
const shadowTube = document.querySelector("#tubeShadow"),
  innerShadow = document.querySelector("#tubeInnerShadow");

// Rotating the shadow
const shadowTl = new TimelineMax({ repeat: -1 });
shadowTl
  .to(
    shadowTube,
    12,
    {
      rotation: "+=360",
      transformOrigin: "50% 50%",
      ease: Linear.easeNone
    },
    "rotate"
  )
  .to(
    innerShadow,
    12,
    {
      rotation: "+=360",
      transformOrigin: "50% 50%",
      ease: Linear.easeNone
    },
    "rotate"
  );
// Create tube ripples
const ripples = document.querySelectorAll(".tubeRipple"),
  rippleTl = new TimelineMax({ repeat: -1 });

rippleTl
  .staggerTo(
    ripples,
    3,
    { scale: 1.3, transformOrigin: "center center", ease: Sine.easeInOut },
    1,
    "in"
  )
  .staggerTo(ripples, 1, { attr: { "stroke-width": "0.5" } }, 0.5, "in+=1.5")
  .staggerTo(
    ripples,
    1,
    { opacity: 0, transformOrigin: "center center" },
    0.5,
    "in+=2.35"
  );

// Water Reflection
const reflectionGroup = document.querySelector("#waterReflection"),
  reflectOpacity = new TimelineMax({
    repeat: -1,
    repeatDelay: randomMinMax(1, 1.5)
  });

reflectOpacity
  .fromTo(
    reflectionGroup,
    1,
    { opacity: 0.13, transformOrigin: "center center" },
    { opacity: 0.3, ease: Sine.easeIn },
    "in"
  )
  .to(reflectionGroup, 1, { opacity: 0.13, ease: Sine.easeOut });

const waterReflectionTl = new TimelineMax({
    repeat: -1,
    yoyo: true,
    yoyoEase: Linear.easeNone
  }),
  waterReflectionFilter = document.querySelector("#waterReflect feTurbulence");

waterReflectionTl.fromTo(
  waterReflectionFilter,
  12,
  { attr: { baseFrequency: "0.005 0.015" } },
  { attr: { baseFrequency: "0.03 0.045" }, ease: Linear.easeNone },
  "in"
);

TweenMax.set("#strings", { scale: 0.9, transformOrigin: "50% 50%" });
const maskTl = new TimelineMax({
  repeat: -1,
  yoyo: true,
  yoyoEase: Linear.easeNone
});

const stringDistort = document.querySelector("#stringFilter feTurbulence");

TweenMax.to("#mask", 2, {
  x: 3,
  y: 3,
  rotation: 10,
  transformOrigin: "100% 75%",
  ease: Linear.easeNone,
  yoyo: true,
  yoyoEase: Linear.easeNone,
  repeat: -1
});

maskTl
  .to(
    stringDistort,
    3,
    { attr: { baseFrequency: "0.015 0.022" }, ease: Linear.easeNone },
    "distort"
  )
  .to(
    "#strings",
    1,
    { x: -1, y: 0.5, rotation: 0.5, ease: Linear.easeNone },
    "distort"
  )
  .to(
    "#strings",
    1,
    { x: -1.75, rotation: -0.25, ease: Linear.easeNone },
    "distort+=1"
  )
  .to(
    "#strings",
    1,
    { rotation: 0, x: -2, ease: Linear.easeNone },
    "distort+=2"
  );

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg