как сделать такое меню при открытии?

103

18 марта 2022, 18:20

как сделать такое меню при открытии ?
https://ecomilk.ru/magazine/healthy-food/chto-takoe-otbornoe-moloko/

Answer 1

Воспользуемся anime.js

И так же нарисуем заранее в inkscape два path

1) Начальное состояние - в html

2) Конечное состояние - в js

Находим на cdnjs.com нашу библиотеку: https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js

После того как нарисовали пути (path) делаем как в документации ..найти не сложно ссылку давать не буду

Смотрим результат

document.getElementById("evt").onclick = function() { 
  let timeline = anime.timeline(); 
 
  timeline 
    .add({ 
      targets: "#p1", 
      d: { 
        value: [ 
          "M 0,116.41121 H 498.39795 V 297 C 439.30599,258.75657 324.49032,308.69573 266.18937,262.80259 183.05485,197.36103 110.05747,259.17925 66.909094,297 H 0 Z" 
        ], 
        duration: 1200, 
        delay: 0, 
        easing: "easeOutQuad" 
      } 
    }); 
};

html, 
body { 
  margin: 0; 
  padding: 0; 
} 
 
#evt { 
  width: 50px; 
  height: 50px; 
  cursor: pointer; 
  position: fixed; 
  top: 10px; 
  left: 10px; 
} 
 
#evt span { 
  display: block; 
  width: 40px; 
  height: 10px; 
  background: #000; 
  margin: 4px auto; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script> 
 
  <div id="evt"> 
    <span></span> 
    <span></span> 
    <span></span> 
    </div> 
 
    <svg viewBox = "0 120 500 280" > 
    <path d = "m 0,116.41121 h 498.39795 v 0 c -78.74672,0.31014 -154.93393,-1.18124 -216.33358,-2.53124 -102.63168,-2.25656 -67.68547,3.18023 -147.11956,2.44741 L 47.625,117.83929 Z" 
  fill = "lightblue" 
  id="p1" /> 
    </svg>