diff --git a/home.html b/home.html index b6668e7..4438453 100644 --- a/home.html +++ b/home.html @@ -14,7 +14,7 @@ height: 100vh; background: #333 url('https://cdr2.com/crblog/assets/img/sfnight2.jpg') no-repeat center center / cover; color: #ccc; - overflow:hidden; + overflow-y:scroll; background-position: right; } @@ -105,21 +105,43 @@ position: absolute; } .ghost { - position:fixed; + position:absolute; width:200px; height:300px; - left:0; - top:50%; - opacity: 0.5; + left:-600px; + bottom:1rem; + opacity: 1; + transform: scaleX(1); } .ghost.start { animation: - x 20s linear infinite alternate, - y 4s infinite cubic-bezier(.5,600,.5,-600); + x 30s linear 1s infinite forwards; } @keyframes x { - to { - left:calc(100% - 150px); + 0% { + left: -600px; + transform: scaleX(1); + bottom: 0rem; + } + 60% { + left: -600px; + transform: scaleX(1); + bottom: 0rem; + } + 80% { + left:calc(100% + 300px); + transform: scaleX(1); + bottom: 0rem; + } + 81% { + transform: scaleX(-1); + left: calc(100% + 300px); + bottom: 7rem; + } + 100% { + transform: scaleX(-1); + left:-600px; + bottom: 7rem; } } @keyframes y { @@ -127,7 +149,9 @@ top:49.9%; } } + section { + } @@ -137,13 +161,15 @@