View
[4주차] 패스트캠퍼스 프론트엔드 8주 완성 with React : 예제를 만들면서 학습하기 2 - react강의
special 2022. 8. 30. 21:13순차적 애니메이션 동작하도록 만들기(GSAP)
elments.forEach((element, idx) => {
gsap.to(element, 1, {
delay: (idx + 1) * 0.7,
opacity: 1,
});
});idx는 0부터 시작하므로 +1 해주어 0.7, 1.4, 2.1, 2.7 .... 과 같은 delay(지연시간)을 두고 동작하게 된다.
요소가 최대한 줄어들어있을때 최대 크기를 가지도록 설정
부모요소가 flex이고, 대상요소가 width 값이 따로 없을 때에는 최대한 줄어들어 화면에 표시되지 않게 되는데, 이 경우 flex-grow 속성으로 최대한의 width를 차지하도록 설정할 수 있다. (flex-grow:1;)
flex내 높이는 최대한 늘어나려고 한다(align-items 기본값은 stretch)
수직 슬라이드 만들기 - Swiper 이용하기
참고링크 : https://swiperjs.com/
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<!--중략-->
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>new Swiper(선택자, 옵션); 형태로 작성
new Swiper(".element", {
direction: "vertical",
autoplay: true,
loop: true,
});new Swiper(".promotion .swiper-container", {
// direction: "horizontal", // 기본값이므로 생략 가능
slidesPerView: 3, // 슬라이드에 보여질 개수
spaceBetween: 10, // 슬라이드 간격(여백)
centeredSlides: true, // 첫 번째 슬라이드를 가운데에 표시
loop: true, // 반복
});autoplay 에서 속도 기본값은 3000(ms단위)이다. autoplay: true;로 작성했던 것을 객체 형태로 autoplay설정을 해 줄 수 있다.
autoplay: {
delay: 5000,
},pagination 처리하기
pagination: {
el: ".swiper-pagination", // 페이지 표시 요소
clickable: true, // 클릭으로 페이지 변경 가능한지
},navigation 생성하기
navigation: {
prevEl: ".swiper-prev",
nextEl: ".swiper-next",
},여러 요소에 같은 스타일 지정하기
.el1, .el2 {
width: 42px;
}2:1 사이즈의 엘리먼트 만들기
- 요소는 세로높이는 최대한 줄어드려고 한다.
- 부모요소의 가로너비 만큼을 전부 사용하겠다 👉 자식에서 width: 100%; 으로 지정
- height: 0;인 상태에서 padding-top: 50%;을 주게 되면
- 부모의 width크기의 50% 만큼을 padding-top에 준다.
- 부모 - 자식 요소 비율을 이용하여 유튜브 영상등을 삽입할 수 있다.
16:9 의 경우에는 padding-top: 56.25(100: 56.25 👉 16:9)
youtube 삽입하기
출처 https://developers.google.com/youtube/iframe_api_reference?hl=ko
<div id="player"></div>script 태그 이전에 firstScriptTag를 추가한다.
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);youtube iframe api를 이용하면 자바스크립트를 이용하여 제어할 수 있다
(플레이어를 삽입-소스코드복사-하는 것과 다르게 자동으로 재생되게 하거나, 반복재생되거나 하는 동작들을 JavaScript로 제어할 수 있다.)
function onYouTubeIframeAPIReady() { // api에서 이용하는 함수명이므로 변경해서는 안된다.
// <div id="player"></div>
new YT.Player("player", {
videoId: "ID", // 최초 재생할 youtube 의 영상 ID
playerVars: {
autoplay: true,
loop: true,
playlist: "ID", // 반복재생할 영상의 ID 목록
},
events: {
onReady(e) {
e.target.mute();
},
},
});
}위와 같은 형태로 작성해 볼 수 있다.
gsap 애니메이션의 ease 속성을 지정하기
https://greensock.com/docs/v2/Easing
ease 애니메이션 처리를 시각화하여 보여준다.
css 속성을 이용한 패럴렉스스크롤
background-image: url("이미지경로");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
마우스 hover시 요소 뒤집기 효과
CSS만으로 만들 수 있다.
.container {
/* 원근법이용, 3차원 효과 */
pespective: 300px;
}
.container .item {
width: 100px;
height: 100px;
/* 뒤 요소를 가리기 */
backface-visibility: hidden;
transition: 1s;
}
.container .item.front {
/* 요소를 겹치게 하는 용도 */
position: absolute;
/* 명시적으로 0도에서 시작함을 알려주기 */
transform: rotateY(0deg);
}
.container:hover .item.front {
transform: rotateY(180deg);
}
.container .item.back {
/* 요소를 180도 뒤집기 */
transform: rotateY(-180deg);
}
.container:hover .item.back {
/* 원래 각도로 돌리기 */
transform: rotateY(0deg);
}꼭 필요한 CSS 속성만 남겨놓은 코드이다.
코드를 보면 알 수 있다시피, transform으로 뒷면이 될 요소를 처음부터 180도 돌려놓은 후
backface-visibility를 통해 뒷면을 가려준다.
원하는 동작(여기서는 hover)이 일어날때에 앞면을 180도 회전시키고, 뒷면을 0도로 돌려준다.
transition과 perspective를 이용하여 자연스러운 애니메이션 효과를 추가한다.
scrollMagic 라이브러리 사용하기
https://cdnjs.com/libraries/ScrollMagic
const elements = document.querySelectorAll(".element");
elements.forEach((el) => {
// Scene특정한 요소를 감시하는 옵션
// addTo scrollMagic에서 필요한 컨트롤러에 추가
new ScrollMagic.Scene({
triggerElement: el, // 보여지는지 여부를 감시할 요소를 지정한다.
triggerHook: 0.8, // 0 ~ 1 사이의 어느 지점에서 트리거를 걸지 지정한다. 0은 뷰포트 최상단, 1은 뷰포트 최하단
})
.setClassToggle(el, "show") // 요소, 추가할 클래스명
.addTo(new ScrollMagic.Controller()); // 내부 컨트롤러에 할당해서 동작하도록
});html 특수 문자 - html entities
https://html.spec.whatwg.org/multipage/named-characters.html
img 요소가 width속성이 없이도 margin 값이 지정되는 경우는 display: block; css속성을 지정한 경우이다.
gsap & Scroll To
gsap.min 기본적인 애니메이션은 포함하고 있음, 일부기능은 분리시켜둠
ScrollToPlugin이용하여 Scroll To 기능을 이용할 수 있다.
ScrollTo를 이용하여 페이지 최상단으로 이동시키기
해당요소.addEventListener("click", () => {
gsap.to(window, 0.7, {
scrollTo: 0, // 스크롤(화면)의 위치를 0px 위치로 옮겨주겠다.
});
});해당요소를 클릭시 scrollTo를 이용하여 0.7초 동안 화면 최상단으로 이동한다.