owltastic이라는 개인 홈페이지가 디자인이 마음에 들어 클론코딩 중이다.
주요 기능 중 하나인 마우스 호버시, 이미지를 위로 스크롤하는 애니메이션 효과에 대해 알게 되어 리뷰한다.
코드
에디터는 repl.it을 사용했다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>slide animation</title>
<style>
#main_wrapper {
background-color: teal;
height: 100vh;
display: flex;
align-items: center;
justify-content : center;
}
.box_wrapper {
width: 300px;
height: 300px;
padding : 24px 48px;
background-color: #fff;
overflow: hidden;
}
@keyframes scroll {
from {
transform: translateY(0%);
}
to {
transform: translateY(-100%);
}
}
.box_wrapper:hover .image_wrapper img {
animation: scroll 8s linear;
filter : none;
}
.image_wrapper {
width : 100%;
height : 100%;
}
.image_wrapper img {
width : 100%;
height : auto;
filter: grayscale(50);
}
</style>
</head>
<body>
<div id='main_wrapper'>
<div class='box_wrapper'>
<div class='image_wrapper'>
<img src="./image/coaches-high-res.webp"/>
</div>
</div>
</div>
<script src="script.js"></script>
<script src="https://replit.com/public/js/replit-badge-v2.js" theme="dark" position="bottom-right"></script>
</body>
</html>코드는 매우 심플하다.
중요한건 이미지를 담는 div 태그에 overflow : hidden효과를 주는 것과 keyframes를 통해 애니메이션을 만들고 적절한 곳에 배치하는 것이다.
+ img 태그의 height값을 auto로 해주자.
리뷰
예제 이미지엔 filter : greyscale값이 적용이 안 됐는데, 개인적으로 넣는 편이 더 이쁜 것 같다.
이미지를 아래로 스크롤 시키고 싶다면 animation의 transform: translateY(-100%) 값을 transform: translateY(100%)로 변경해 주면 된다.
깔끔한 디자인을 통해 내게 영감을 준
owltastic 페이지의 주인인 Meagan Fisher Couldwell 씨에게 감사인사를 전한다.
참고
A Twitter for My Sister
Non-techies find the @ and # symbols on Twitter don’t make much sense. So the company had to figure out a way to keep the site running for people who are more technologically adept and rely on these symbols but also work seamlessly for those who think th
archive.nytimes.com
'코딩 리뷰 > [HTML, CSS , JS]' 카테고리의 다른 글
| [HTML, CSS, JS] Animation 효과로 눈내리는 배경화면 만들기 (4) | 2023.05.19 |
|---|---|
| [HTML, CSS, JS] scrollIntoView와 scrollBy를 이용한 섹션 이동 (2) | 2023.05.18 |
| [HTML, CSS, JS] 요소를 마우스 커서에 따라다니게 하기 (0) | 2023.05.18 |
| [HTML, CSS, JS] 유튜브 클론코딩 리뷰 (0) | 2023.04.26 |
| [HTML, JS] 멀티 Select 공부 리뷰 (0) | 2023.04.14 |