seop's study seop's study

설명 마우스의 위치값에 따라서 글씨가 움직입니다. 보여지는 글씨는 한줄이지만 실제로는 두줄씩 있는 상태에서 각도를 조절해준 뒤 overflow: hidden으로 안보이게 처리해 주었습니다. function mousemove(e){ // 마우스 좌표값 가운데로 설정 let positionSlow = (e.pageX - (window.innerWidth/2)) * 0.1; let positionFast = (e.pageX - (window.innerWidth/2)) * 0.2; gsap.to(".spanSlow", {duration: 0.4, x: positionSlow}); gsap.to(".spanFast", {duration: 0.4, x: -positionFast}); gsap.to(".cursor"..

이번에는 지금까지 했던 모든 슬라이드 이펙트를 넣어보았습니다. 거기에 추가로 자동플레이와 플레이버튼, 정지버튼을 추가하였습니다. 페이지가 로딩되면 슬라이드는 자동으로 재생되며 닷버튼 옆에 정지버튼이 있습니다. 정지버튼을 누르면 슬라이드는 멈추고 정지버튼은 플레이버튼으로 변경됩니다. 그리고 플레이 버튼을 누르면 다시 슬라이드는 오토플레이로 변경됩니다. //slider08 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"..

설명 1번~5번 이미지 맨 앞과 맨 뒤에 이미지를 복사를 합니다. 5번 1번 2번 3번 4번 5번 1번 이미지 순으로 이미지가 생성됩니다. 그 후 맨뒤에 있는 1번이 나올 때 1번 이미지의 인덱스를 [0]으로 바꿔줍니다. 실제 맨 뒤 1번 이미지의 인덱스는 [5] 입니다. 맨 앞에 있는 5번의 이미지가 왔을 때에는 인덱스를 [4]로 바꿔줍니다. 실제 맨 앞 5번 이미지의 인덱스는 [-1]입니다. 그렇게 하면 마치 무한으로 이미지 슬라이드가 보여지는 효과를 낼 수 있습니다. //slider07 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //..

01. 이벤트 메서드 : addEventListener() 01. 이벤트 메서드 : addEventListener('click') : 클릭 했을 때 01. 이벤트 메서드 : addEventListener('scroll') : 스크롤 했을 때 01. 이벤트 메서드 : addEventListener('resize') : 브라우저 사이즈가 변경 됐을 때 01. 이벤트 메서드 : addEventListener('selectstart') : 텍스트 선택을 시작 했을 때 01. 이벤트 메서드 : addEventListener('visibilitychange') : 브라우저의 탭 상태가 변경 됐을 때 01. 이벤트 메서드 : addEventListener('DOMContentLoaded') : 로딩이 끝난 후 01...

01. 요소 메서드 : 선택자 : Document.querySelector() : 요소 선택자 02. 요소 메서드 : 선택자 : Document.querySelectorAll() : 모든 요소 선택자 03. 요소 메서드 : 선택자 : Document.getElementById() : 아이디 요소 선택자 04. 요소 메서드 : 선택자 : Document.getElementByClassName() : 클래스 요소 선택자 01. 요소 메서드 : 요소 : Document.createElement() : 요소 만들기 04. 요소 속성 : 선택자 : Element.firstElementChild : 첫 번째 자식 요소 선택자 04. 요소 속성 : 선택자 : Element.lastElementChild : 마지막 자..

01. 브라우저 객체 : window 객체 메서드 : window.alert() : 알림창 표시하기 02. 브라우저 객체 : window 객체 메서드 : window.confirm() : 확인창 표시하기 03. 브라우저 객체 : window 객체 메서드 : window.prompt() : 입력창 표시하기 04. 브라우저 객체 : window 객체 메서드 : window.open() : 새로운 창 열기 05. 브라우저 객체 : window 객체 메서드 : window.close() : 새로운 창 닫기 06. 브라우저 객체 : window 객체 메서드 : window.focus() : 페이지 포커스 설정 07. 브라우저 객체 : window 객체 메서드 : window.blur() : 페이지 포커스 벗어났을..

01. 수학 메서드 : Math.round() / Math.floor() / Math.ceil() / Math.trunc() 번호 기본값 속성 결괏값 { document.querySelector(".sample01_R1").innerHTML = Math.round(1.34); document.querySelector(".sample01_R2").innerHTML = Math.round(1.64); document.querySelector(".sample01_R3").innerHTML = Math.round(1.5); document.querySelector(".sample01_R4").innerHTML = Math.round(-1.34); document.querySelector(".sample01_R5..

01. 문자열 : 문자열 결합 / 템플릿 문자열 번호 기본값 속성 결괏값 { const str1 = "자바스크립트"; const str2 = "제이쿼리"; document.querySelector(".sample01_R1").innerHTML = str1 + str2; const num1 = 100; const num2 = 200; document.querySelector(".sample01_R2").innerHTML = num1 + num2; const txt1 = "모던"; const txt2 = "자바스크립트"; const txt3 = "핵심"; document.querySelector(".sample01_R3").innerHTML = "나는 "+ txt1 + " (modern)" + txt2 + ..

설명 현재 스크롤값에 따라서 섹션을 이동할때 섹션에 박스가 지나간 뒤 이미지와 텍스트가 나타납니다. 현재 스크롤값을 구한 뒤 각 섹션별 offsetTop값에 도달하면 css를 이용해 박스모션이 지나간 뒤 이미지와 텍스트가 나타납니다. 리빌 효과의 포인트는 박스의 출발지점 위치를 잡는것이 포인트 입니다. //만약에 .reveal 클래스가 있으면 글씨를 span으로 감싸주고 글씨를 다시 넣어줘야 함 let desc = document.querySelectorAll(".content__item__desc") desc.forEach(el => { let reveal = el.innerText; if(el.classList.contains("reveal") == true){ reveal = "" + reveal ..

설명 현재 스크롤값에 따라서 섹션을 이동할때 각 섹션에 있는 텍스트에 애니메이션 효과가 나타납니다. 현재의 스크롤 값에 따라 각 섹션의 offsetTop값에 도달하면 각각의 글자마다 span태그를 이용해 쪼개준 뒤 한글자 한글자씩 애니메이션 효과를 나타납니다. //여러개 글씨 쪼개기 - 웹표준을 준수하기 위해 쪼개기전 글과 라벨로 묶어줌 document.querySelectorAll(".content__item__desc").forEach(desc => { let splitText = desc.innerText; let splitWrap = splitText.split('').join(""); splitWrap = "" + splitWrap + ""; desc.innerHTML = splitWrap; d..