모바일 홈페이지는 이제 무조건 만들어야 하는 경우이기 때문에 왼쪽 위 혹은 아래쪽에 햄버거 메뉴는 무조건 들어간다.
그리고 정적으로 멈춰 있는 부분인 경우도 쓰지만 가끔씩 애니메이션 효과를 주고 싶을 경우가 있는데 해외 사이트를 잘 찾아보면 천재같은 누군가가 만들어놓은 멋진 효과들이 있다.
그중에서 찾은 결과다.
X로 변하는 부분 중간에 애니메이션이 들어간다.
html 코드다
<div>
<svg viewBox="0 0 800 600">
<path d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200" id="top"></path>
<path d="M300,320 L540,320" id="middle"></path>
<path d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190" id="bottom" transform="translate(480, 320) scale(1, -1) translate(-480, -318) "></path>
</svg>
</div>
css 코드다. 이부분은 실제 적용을 할 경우에 알맞게 변경을 하면 되겠지.
body,
html,
div {
background: #292a38;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-align: center;
}
svg {
width: 200px;
height: 150px;
cursor: pointer;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
path {
fill: none;
-webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
-moz-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
-o-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
-ms-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
stroke-width: 40px;
stroke-linecap: round;
stroke: #a06ba5;
stroke-dashoffset: 0px;
}
path#top,
path#bottom {
stroke-dasharray: 240px 950px;
}
path#middle {
stroke-dasharray: 240px 240px;
}
.cross path#top,
.cross path#bottom {
stroke-dashoffset: -650px;
stroke-dashoffset: -650px;
}
.cross path#middle {
stroke-dashoffset: -115px;
stroke-dasharray: 1px 220px;
}
마지막으로 자바스크립트다. jquey가 필요하다
(function() {
var i, resize;
i = setInterval(function() {
return $("div").toggleClass("cross");
}, 1500);
$("div").click(function() {
clearInterval(i);
return $("div").toggleClass("cross");
});
resize = function() {
return $("body").css({
"margin-top": ~~((window.innerHeight - 150) / 2) + "px"
});
};
$(window).resize(resize);
resize();
}).call(this);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUFBQSxNQUFBLENBQUEsRUFBQTs7RUFBQSxDQUFBLEdBQUksV0FBQSxDQUFZLFFBQUEsQ0FBQSxDQUFBO1dBQ2QsQ0FBQSxDQUFFLEtBQUYsQ0FBUSxDQUFDLFdBQVQsQ0FBcUIsT0FBckI7RUFEYyxDQUFaLEVBRUYsSUFGRTs7RUFJSixDQUFBLENBQUUsS0FBRixDQUFRLENBQUMsS0FBVCxDQUFlLFFBQUEsQ0FBQSxDQUFBO0lBQ2IsYUFBQSxDQUFjLENBQWQ7V0FDQSxDQUFBLENBQUUsS0FBRixDQUFRLENBQUMsV0FBVCxDQUFxQixPQUFyQjtFQUZhLENBQWY7O0VBSUEsTUFBQSxHQUFTLFFBQUEsQ0FBQSxDQUFBO1dBQ1AsQ0FBQSxDQUFFLE1BQUYsQ0FBUyxDQUFDLEdBQVYsQ0FDRTtNQUFBLFlBQUEsRUFBYyxDQUFDLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxXQUFQLEdBQXFCLEdBQXRCLENBQUEsR0FBNkIsQ0FBOUIsQ0FBRixHQUFxQztJQUFuRCxDQURGO0VBRE87O0VBSVQsQ0FBQSxDQUFFLE1BQUYsQ0FBUyxDQUFDLE1BQVYsQ0FBaUIsTUFBakI7O0VBQ0EsTUFBQSxDQUFBO0FBYkEiLCJzb3VyY2VzQ29udGVudCI6WyJpID0gc2V0SW50ZXJ2YWwgLT5cbiAgJChcImRpdlwiKS50b2dnbGVDbGFzcyBcImNyb3NzXCJcbiwgMTUwMFxuXG4kKFwiZGl2XCIpLmNsaWNrIC0+XG4gIGNsZWFySW50ZXJ2YWwgaVxuICAkKFwiZGl2XCIpLnRvZ2dsZUNsYXNzIFwiY3Jvc3NcIlxuXG5yZXNpemUgPSAtPlxuICAkKFwiYm9keVwiKS5jc3NcbiAgICBcIm1hcmdpbi10b3BcIjogfn4oKHdpbmRvdy5pbm5lckhlaWdodCAtIDE1MCkgLyAyKSArIFwicHhcIlxuICAgIFxuJCh3aW5kb3cpLnJlc2l6ZSByZXNpemVcbnJlc2l6ZSgpXG4iXX0=
//# sourceURL=coffeescript
https://codepen.io/Zaku/pen/vcaFr?editors=0010
위에 들어가보면 적용이 되어 있는 애니메이션과 소스를 볼 수 있다.
색깔이나 위치등은 알맞게 바꾸면 된다. 스크립트도 인터벌로 cross를 토글을 시키면서 동작을 하게 된다.