荷包蛋开关切换效果

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

const switchButton = document.querySelector('.switch');
const switchBackground = switchButton.querySelector('.switch__background');
const egg = switchButton.querySelector('.egg');
const eggMainGroup = egg.querySelector('.egg__mainGroup');
const eggWhite = egg.querySelector('.egg__white.-fried');
const eggWhiteMiddle = egg.querySelector('.egg__white.-middle');
const eggWhiteRaw = egg.querySelector('.egg__white.-raw');
const yolk = egg.querySelector('.egg__yolk');
const yolkShadows = Array.from(egg.querySelectorAll('.egg__yolkShadow'));

const EGG_RAW_PATH = eggWhiteRaw.getAttribute('d');
const EGG_MIDDLE_PATH = eggWhiteMiddle.getAttribute('d');
const EGG_FRIED_PATH = eggWhite.getAttribute('d');

const SWITCH_PADDING = Number(
  getComputedStyle(eggMainGroup).transform.split(',')[4]
);

const {
  switchBackgroundCoords,
  eggCoords,
  eggWhiteCoords,
  eggWhiteRawCoords,
  eggWhiteMiddleCoords,
  yolkCoords,
} = (() => {
  const elements = { switchBackground, egg, eggWhite, eggWhiteRaw, eggWhiteMiddle, yolk };
  return Object.keys(elements).reduce((previous, elementName) => {
    return { ...previous, [`${elementName}Coords`]: elements[elementName].getBoundingClientRect() };
  }, {});
})();

let isAnimating = false;

const toggleAnimationController = () => { isAnimating = !isAnimating; };

const toggleYolkShadows = isOff => {
  const toggleShadow = item => {
    new TweenLite(item, 0.1, {
      ...isOff ? { delay: 0.35 } : {},
      opacity: isOff ? 1 : 0,
    })
  }
  yolkShadows.forEach(toggleShadow);
};

const toggleSwitchMovement = isOff => {
  new TweenLite(switchButton, 0.4, {
      x: isOff ? '0%' : '3vw',
      ease: Power1.easeInOut
    });
};

const toggleSwitchBackground = isOff => {
  const x = isOff ? '0%' : eggCoords.width - switchBackgroundCoords.width;
  new TweenMax(switchBackground, 0.5, {
    x,
    ease: Back.easeOut.config(1.7),
    onComplete: toggleAnimationController,
  });
};

const toggle = () => {
  if (isAnimating) return;

toggleAnimationController();
  const isOff = switchButton.classList.contains('-off');
  switchButton.classList.toggle('-off');
  toggleSwitchBackground(isOff);
  toggleEggWhite(isOff);
  toggleYolk(isOff);
  toggleYolkShadows(isOff);
  toggleSwitchMovement(isOff);
};

switchButton.addEventListener('click', toggle);

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