section1
높은 목표를 세우고, 스스로 채찍질 한다.
section2
결과도 중요하지만, 과정을 더 중요하게 생각한다.
section3
매 순간에 최선을 다하고, 끊임없이 변화한다.
section4
모든 일에는 기본을 중요하게 생각한다.
section5
열정을 잃지 않고 실패에서 실패로 걸어가는 것이 성공이다.
section6
천 마디 말보단 하나의 행동이 더 값지다.
section7
조그만 성공에 만족하지 않으며, 방심을 경계한다.
section8
나는 내가 더 노력할수록 운이 더 좋아진다는 걸 발견했다.
section9
꿈이 있다면, 그 꿈을 잡고 절대 놓아주지마라.
소스 보기
Javascript
// 01. 텍스트 쪼개기
// let text = document.querySelector(".split");
// let splitText = text.innerText;
// let splitWrap = splitText.split("").join("");
// text.innerHTML = splitWrap = "" + splitWrap + "";
// 02. 모든 텍스트 분리하기
// document.querySelectorAll(".split").forEach(text => {
// let splitWrap = text.innerText.split("").join("");
// text.innerHTML = "" + splitWrap + "";
// text.setAttribute("aria-label", text.innerText);
// });
// 03. 모든 텍스트 분리하기 : 여백 표현하기
// document.querySelectorAll(".split").forEach(text => {
// let theText = text.innerText;
// let newText = "";
// for(let i=0; i< text.innerText.length; i++){
// newText += "< span aria-hidden='true'>";
// if(text.innerText[i] == " "){
// newText += " ";
// } else {
// newText += text.innerText[i];
// }
// newText += "< /span>";
// }
// text.innerHTML = newText;
// text.setAttribute("aria-label", theText);
// });
// gsap.utils.toArray(".split").forEach(text => {
// gsap.from(text.querySelectorAll("span"), {
// yPercent: 100,
// autoAlpha: 0,
// duration: 1,
// ease: "circ.out",
// stagger: {
// amount: 0.6,
// from: "random"
// },
// scrollTrigger: {
// trigger: text,
// start: "top bottom",
// end: "+400",
// markers: true
// }
// });
// });
// 04. split-type 사용하기
const target = gsap.utils.toArray(".split");
target.forEach(target => {
let splitClint = new SplitType(target, {type: "line, word, char"});
let lines = splitClint.lines;
let words = splitClint.words;
let chars = splitClint.chars;
gsap.from(chars, {
yPercent: 100,
opacity: 0,
duration: 1,
rotation: 30,
stagger: 0.031,
scrollTrigger: {
trigger: target,
start: "top bottom",
end: "+400",
markers: true
}
})
});