사이트명: 대학내일
작업 기간: 10일 소요
#gsap #scss #jquery
유형: 클론 코딩, 반응형 PC
특징: Gsap과 Scss를 활용한 반응형 웹사이트
url:
https://oneuya.github.io/univ/
‼️작업 목표
- 반응형 웹사이트 만들기!
📍POINT
- 자연스럽게 변경되는 메인 이미지 (GSAP)
- 스크롤 속도 조절하기
- CSS를 활용한 무한 롤링 이미지
1. 자연스럽게 변경되는 메인 이미지 (GSAP)
✍️ GSAP을 이용하여 로고 텍스트 > 동영상 으로 전환되는 메인을 제작하였습니다.
- 로고 텍스트 위로 동영상이 나와야 함.
- 동영상이 나오고 일정량 스크롤 된 후, 텍스트는 불투명도가 조절되며 위로 사라져야 함.
📍 로고 텍스트 영역
동영상 오브젝트가 메인 로고 텍스트 위로 나와야 하기 때문에
header 영역에 로고 텍스트를 sticky 영역으로 묶어 작성했다.
스크롤을 하며 동영상이 나오는 동안, 로고 텍스트가 뒤에 고정되어야 하기 때문에
header 영역 높이를 240vh로 길게 설정하였다.
스크롤을 슝~ 내려도 화면이 변경되지 않는 것처럼 보이게끔!
<div class="sticky-area">
<h1 class="blind">대학내일
</h1>
<div class="top-logo">
<p>세대와 시대를 잘 읽는<br>
마케팅 전문가 그룹</p>
</div>
<div class="main-logo"><img src="./assets/img/main-logo.png" alt="">
</div>
<div class="main-desc">We've got an <span>answer</span>
</div>
</div>.header{
position: relative;
height: 240vh;}📍 동영상 영역
동영상 영역을 main 영역의 첫 번째로 두고,
position: absolute; 를 사용하여 header 영역 위로 올렸다.
높이는 header보다 조금 더 길게 250vh로 설정했다.
왜냐하면, 스크롤 시 로고 텍스트보다 동영상이 좀 더 오래 나올 수 있도록 하기 위함이었다.
<section class="sc-intro">
<div class="sticky-area">
<div class="intro-area">
<div class="intro-overlay">
<div class="intro-box">
<div class="img-box">
<video autoplay muted loop>
<source src="./assets/img/main-video1.mp4">
</video>
</div>
</div>
<div class="text-box">
<h2>세대와 시대를 잘 읽는<br>
마케팅 전문가 그룹</h2>
<img src="./assets/img/logo.png" alt="">
</div>
</div>
</div>
</div>
</section>.sc-intro{
position: absolute;
width: 100%;
top: 0;
display: block;
pointer-events: none;
height: 250vh;
.sticky-area{
position: sticky;
top: 5px;
right: 0;
padding: 70px;
height: auto;
will-change: transform;
.intro-area{
position: relative;
overflow: hidden;
border-radius: 270px 270px 0 270px;
height: 85vh;
width: 100%;
.intro-overlay{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: rgba(24, 24, 24, 0.47);
.intro-box{
top: 0;
width: 100%;
height: 100%;
.img-box{
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
video{
object-fit: cover;
}
}
}
}
}
.text-box{
position: absolute;
text-align: center;
color: #fff;
font-size: 65px;
font-weight: 700;
display: flex;
flex-direction: column;
align-items: center;
h2{
line-height: 100px;
margin-bottom: 30px;
}
}
}
}동영상은 오른쪽 하단에서 나올 수 있도록
transformOrigin: 'right bottom'을 사용하여 위치를 지정했다.
동영상은 GSAP의 timeline을 사용해 진행속도를 조절하고
동영상 뒤로 텍스트가 사라질 수 있도록, sticky를 사용하여 고정되어 있지만
.from('.sc-intro .text-box',2,{opacity:0, y:50})
작성해 위로 올라가며 자연스럽게 사라질 수 있도록 했다.
let main = gsap.timeline();
main.from('.main-logo',{opacity:0,y:150},0.5)
.from('.main-desc',{opacity:0, y:50})
.addLabel('main')
.from('.sticky-area .top-logo',{opacity:0},'main')
.from('.fix-area',{opacity:0},'main')
let intro = gsap.timeline({
scrollTrigger: {
trigger: '.header',
scrub:1,
start: '0% 0%',
end: '80% 100%',
delay:5
},
});
intro.from('.sc-intro .sticky-area',10,{ scaleY:0, scaleX:0, transformOrigin: 'right bottom', delay:2})
.to('.header .sticky-area',6,{opacity:0})
.from('.sc-intro .text-box',2,{opacity:0, y:50})
2. 스크롤 속도 조절하기
참고 🔗 http://ataredo.com/morphology/lucidscroll/
Demo🔗https://codepen.io/Shikkediel/pen/GJRbOV
여러 방법을 시도했으나 요것이 제일 다루기 쉬웠다.
스피드와 화면 사이즈 단위까지 설정이 가능한데 참고 페이지에 커스텀에 관련된 설명까지 친절…!
// 구글 : 제이쿼리 마우스휠 부드럽게
$(function() {
$(this).impulse();
$('body').impulse({effect: 'easeOutSine', fluid: false});
});
3. CSS를 활용한 무한 롤링 이미지
✍️ CSS만을 사용하여 무한 롤링하는 이미지를 제작했다.
제이쿼리와 CSS를 각각 사용해 다양한 방향으로 시도해 보며 시행착오를 겪었지만
최종적으로 아래와 같은 결과에 도달했습니다!
width or height 넣는게 중요하다 없으면 중간에 뚝뚝 끊긴다.
이것 때문에 엄청 헤맴...
혹시 그래도 안 된다면 width or height 값을 크게 주기!
ex) 키프레임은 시작점과 끝점을 동일한 수치로 만들어 주는게 중요!
<div class="rolling-area>
<ul class="rolling-list">
<li class="rolling-item">
<img src="" alt="">
</li>
<li class="rolling-item">
<img src="" alt="">
</li>
<li class="rolling-item">
<img src="" alt="">
</li>
<li class="rolling-item">
<img src="" alt="">
</li>
<li class="rolling-item">
<img src="" alt="">
</li>
</ul>
<ul class="rolling-list">
<li class="rolling-item">
<img src="" alt="">
</li>
<li class="rolling-item">
<img src="" alt="">
</li>
<li class="rolling-item">
<img src="" alt="">
</li>
<li class="rolling-item">
<img src="" alt="">
</li>
<li class="rolling-item">
<img src="" alt="">
</li>
</ul>
</div>
//ul를 클론으로 복사해 주어야 함!//.rolling-area{height: auto;}
.rolling-list{height: auto; animation: rolling 50s linear infinite;}
.rolling-item{}
@keyframes rolling {
0% {
transform: translateY(-50%);
}
100% {
transform: translateY(50%);
}
}
