# 28.텍스트효과

ui,

# 목차

1. 스모크글자
2. gsap 회전하는 글자

# 1. 스모크글자

html

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div>
			<p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio eius doloribus, ab obcaecati facere omnis reiciendis dolore quod quidem aperiam repellat tempora vitae at excepturi sunt doloremque et quonesciunt!</p>
		</div>
	</body>
</html>

reset
@import url(https://qwerewqwerew.github.io/source/style/reset.css);

* {
	font-family: 'Pretendard', sans-serif;
}
div {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background-color: skyblue;
	overflow: hidden;
}
div .text {
	position: relative;
	color: #fff;
	margin: 40px;
	max-width: 800px;
	user-select: none;
	line-height: 3.5em;
	font-size: 3.5em;
}
div .text span {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}
div .text span.active {
	animation: smoke 2s linear forwards;
	transform-origin: bottom;
}
@keyframes smoke {
	0% {
		opacity: 1;
		filter: blur(0);
		transform: translateX(0) translateY(0) rotate(0deg) scale(1);
	}
	50% {
		opacity: 1;
		pointer-events: none;
	}
	100% {
		opacity: 0;
		filter: blur(20px);
		transform: translateX(300px) scale(4);
	}
}

const text = document.querySelector('.text').innerText;
let textsplit = [...text];
const sp = '<span>';
const an = '</span>';
let textArr = textsplit
	.map(function (char) {
		return sp + char + an;
	})
	.join('');
console.log(textArr);
document.querySelector('.text').innerHTML = textArr;
const letters = document.querySelectorAll('.text span');
for (let i = 0; i < letters.length; i++) {
	letters[i].addEventListener('mouseover', function () {
		this.classList.add('active');
	});
}

`join('') `함수는 배열의 모든 요소를 문자열로 결합.
` join('')`의 인자로 빈 문자열 ''을 할당하면, 배열의 모든 요소 사이에 아무 문자도 추가하지 않고 그대로 연결하여 하나의 문자열을 만든다.
`,`를 제거하는 역할을 함

# 2. gsap 회전하는 글자

실행화면

구조작성

<main class="cont">
	<section class="item sec1">
		<div class="desc txt1">Lorem ipsum dolor sit, amet</div>
	</section>
</main>

gsap 추가

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>

@import url(https://qwerewqwerew.github.io/source/style/reset.css);
@import url(https://qwerewqwerew.github.io/source/style/reset.css);
.item {
	width: 100%;
	height: 100vh;
	position: relative;
}

.desc {
	display: flex;
	font-size: 5vw;
	font-weight: 900;
	margin-top: 50%;
	z-index: 100;
	position: relative;
	-webkit-text-fill-color: #0000802d;
	-webkit-text-stroke: 1px #000080;
	text-stroke: 1px 000080;
	flex-direction: row;
}
span {
	display: block;
}

let text = document.querySelector('.txt1').innerText;
let textsplit = [...text];

const sp = '<span>';
const an = '</span>';
let textArr = textsplit.map((char) => sp + char + an).join('');

document.querySelector('.txt1').innerHTML = textArr;
let tl = gsap.timeline({
	repeat: -1, // 무한 반복
	repeatDelay: 1, // 반복 딜레이
	yoyo: true,
	scrollTrigger: {
		trigger: 'section.sec1',
		markers: true,
		start: 'top 50%',
		end: '+=500',
	},
});

tl.to('.txt1 span', {
	opacity: 0,
	y: 50,
	rotateY: 180,
	duration: 0.5,
	stagger: 0.1,
});
//stagger: 요소의 간격 (각 '.txt1 span' 요소가 애니메이션을 시작할 때 사이의 0.1초)

es6 javascript library animation