티스토리 뷰
728x90
반응형
결과물
사용 에디터
Atom Editor
요구사항
1. 텍스트 애니메이션 만들기
2. 버튼 클릭 시 화면 전환하기
HTML
<body>
<div class="wrapper">
<h1>Welcome to Paya blog!</h1>
</div>
<div class="welcome-section content-hidden">
<div class="content-wrap">
<ul class="fly-in-text">
<li>I</li>
<li>N</li>
<li>T</li>
<li>R</li>
<li>O</li>
</ul>
<a href="#" class="enter-button">Enter</a>
</div>
</div>
</body>CSS
- 각 텍스트를 li에 넣어주기
- 애니메이션이 발생할 경우 지속될 시간을 transition으로 정하기
- 각 li의 위치를 transform: translate3d()로 지정해주기
* {
margin: 0;
padding: 0;
}
body{
font-weight: 700;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: lighter;
font-size: 40px;
}
.welcome-section {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000;
overflow: hidden;
}
.content-wrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.fly-in-text{
list-style: none;
}
.fly-in-text li {
display: inline-block;
margin-right: 20px;
font-size: 5em;
color: #fff;
opacity: 1;
transition: all 3s ease;
}
.fly-in-text li:nth-child(5){
margin-right: 0;
}
.enter-button {
display: block;
text-align: center;
font-size: 2em;
text-decoration: none;
color: #F5BB4E;
opacity: 1;
margin-top: 30px;
transition: all 1s ease 3s;
}
.content-hidden .fly-in-text li {opacity: 0;}
.content-hidden .fly-in-text li:nth-child(1) {transform: translate3d(-60px,0,0);}
.content-hidden .fly-in-text li:nth-child(2) {transform: translate3d(-30px,0,0);}
.content-hidden .fly-in-text li:nth-child(3) {transform: translate3d(0px,0,0);}
.content-hidden .fly-in-text li:nth-child(4) {transform: translate3d(30px,0,0);}
.content-hidden .fly-in-text li:nth-child(5) {transform: translate3d(60px,0,0);}
.content-hidden .enter-button {opacity: 0; transform: translate3d(0,-30px,0);}
SCRIPT
1. 텍스트 애니메이션 만들기
- 애니메이션을 원하는 텍스트를 li에 쪼개서 담기
- css에서 transform을 사용해 각자 위치를 지정해 놓고 opacity를 0으로 놓고 투명화시키기
- setTimeout을 이용해 시간이 지나면 css로 특정 위치를 지정해 놓았던 .content-hidden 클래스를 지워 텍스트의 투명도를 없애 눈에 시각화 시키며 원래 위치로 이동시키기
2. 버튼 클릭 시 화면 전환하기
- 버튼 클릭 시 content-wrap에 fadeOut()을 사용해 없애 원하는 화면으로 전환 시킨다.
<script type="text/javascript">
$(function(){
var welcomeSection = $('.welcome-section'),
enterButton = welcomeSection.find('.enter-button');
setTimeout(function(){
welcomeSection.removeClass('content-hidden');
},800);
enterButton.on('click',function(e){
e.preventDefault();
welcomeSection.fadeOut();
})
})
</script>배운점
ease
- 기본값으로, 전환 효과가 천천히 시작되고, 그 다음에는 빨라지고, 마지막에는 다시 느려진다
e.preventDaefault()
a 태그 사용 시 다른 브라우저로 이동하는 걸 멈추고 클릭 이벤트만 실행시키기
728x90
반응형
'Web' 카테고리의 다른 글
| [JavaScript] 검색 기능 만들기 (8) | 2019.08.04 |
|---|---|
| [JavaScript] 네비게이션 바 상단 고정시키기 (0) | 2019.08.04 |
| javaScript Uncaught SyntaxError: await is only valid in async function 에러 (0) | 2019.07.29 |
| html5 canvas에서 image를 불러올 때 TypeError (0) | 2019.07.29 |
| a태그나 button태그를 이용해서 페이지 이동하기. (0) | 2018.11.29 |
댓글
"이 블로그의 모든 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday