반응형
Vanilla Javascript Effect 무작정 따라하기 #2 스크롤에 따른 전환
Vanilla Javascript Effect 무작정 따라하기 #1 typing effect 2021.04.10 - [개인공부] - 2021년 4월 10일 to do list 2021년 4월 10일 to do list [JS/Node 기초] Checkpoint 복습 Sprint Review[JS/Node]를 통..
bedeveloper.tistory.com
코드스테이츠 코플릿 복습이 끝나고 시간이 조금 남아서 CSS와 javascript로 움직이는 뭔가를 하고 싶었고,
바다에 있는 거북이가 생각나서 마우스를 거북이 쪽으로 옮기면 거북이가 올라오는 effect를 만들어 보았다.
코드는 아래와 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="circle"></div>
<img class="turtle" src="./turtle.png" alt="#">
</div>
<script src="./app.js"></script>
</body>
</html>*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
z-index: 0;
background: url(./jeremy-bishop-G9i_plbfDgk-unsplash.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
perspective: 1200px;
}
.container{
width: 50vw;
height: 50vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
}
.circle{
position: absolute;
transform-style: preserve-3d;
width: 30vw;
height: 30vw;
border-radius: 50%;
background: linear-gradient(to bottom, #165b6d, #042e53);
z-index: 20;
box-shadow: 10px 20px 30px rgba(0, 0, 0, 0.5);
transition: all 1s ease-in;
}
img{
z-index: 100;
width: 30vw;
position: absolute;
transition: all 1s ease-in;
}const container = document.querySelector('.container');
const circle = document.querySelector('.circle');
const turtle = document.querySelector('.turtle');
container.addEventListener('mouseenter', function(e){
circle.style.transform = `translateZ(100px)`;
turtle.style.transform = `translateZ(300px) rotateZ(-20deg)`;
});
container.addEventListener('mouseleave', function(e){
circle.style.transform = `translateZ(0px)`;
turtle.style.transform = `translateZ(0px) rotateZ(0deg)`;
});대단한게 아닌 무언가를 조금씩 만들어 나가는 습관을 기르겠다.
이것이 뭉쳐서 나의 자산이 되리라.
반응형
'Vanilla Javascript Effect 구현' 카테고리의 다른 글
| Vanilla Javascript Effect 무작정 따라하기 #4.5 canvas에서 무작위 입자 생성 및 변화를 주는 원리 파악 (0) | 2021.05.07 |
|---|---|
| Vanilla Javascript Effect 무작정 따라하기 #4 canvas에서 text 쪼개기 (0) | 2021.05.06 |
| Vanilla Javascript Effect 무작정 따라하기 #2 스크롤에 따른 전환 (0) | 2021.04.17 |
| Vanilla Javascript Effect 무작정 따라하기 #1 typing effect (0) | 2021.04.11 |
