scss - animation(1)

조지자 애니메이션!

scss에서 애니메이션은 다르게 쓰는 줄 알고 찾아봤는데 저렇게 커스터마이징이 가능하다. 하지만 난 기본 애니메이션도 아직은 서툴기에 기본에 확실할 것이다!

Nav 튀어나오기

키프레임 + 애니메이션으로 간단하게 효과를 줄 수 있다.

li에 애니메이션 주기

요렇게 li안에 animation을 정의하고

요렇게 해주면 된다잉

default로 scale(0)을 주고 fill-mode는 잘 모르겠다..

포켓볼

Parallax Scrolling

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow: hidden;
    height: 100%;
}

body {
    perspective: 1px;
    transform-style: preserve-3d;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    header {
        min-height: 100vh;
        background: 50% 50% /cover;
        padding: 30vw 0 5vw;
        position: relative;
        transform-style: inherit;
        width: 100vw;
        h1 {
            margin-top: -100px;
            z-index: 1;
        }
        &:before {
            background: 50% 50% /cover;
        }
        &::before {
            bottom: 0;
            content: "";
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            display: block;
            background-image: url(./image.jpg);
            background-size: cover;
            transform-origin: center center 0;
            transform: translateZ(-1px) scale(2);
            z-index: -1;
            min-height: 100vh;
        }
        * {
            font-weight: normal;
            letter-spacing: 0.2em;
            text-align: center;
            margin: 0;
            padding: 1em 0;
        }
    }
}

Parallax Scrolling

출처 : https://www.youtube.com/watch?v=6CQ7DYni7Bg
https://www.youtube.com/watch?v=TUD9999TbS0&t=1109s