코린이 공부장

parallax효과 다음 프레임 처럼 스크롤을 내릴때마다 나타나는 효과를 만들어보겠습니다. 코드블럭 Javascript parallax Effect06 패럴랙스 이펙트: 텍스트 효과 1 2 3 4 5 6 7 01 section1 결과도 중요하지만, 과정을 더 즁요하게 생각한다. 02 section2 세상 모든 일은 여러분이 무엇을 생각하느냐에 따라 일어납니다. 03 section3 웃음은 두 사람간의 가장 가까운 거리다 04 section4 지속적인 긍정적 사고는 능력을 배가시킨다. 05 section5 정의는 외부에서 오는 것이 아니라 내적 평온으로부터 온다. 06 section6 아무것도 변하지 않을지라도 내가 변하면 모든 것이 변한다 07 section7 노력을 이기는 재능은 없고 노력을 외면하는 ..

Parallax효과 만들기 코드블럭 Javascript parallax Effect01 패럴랙스 이펙트: 사이드 메뉴 1 2 3 4 5 6 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 결과도 중요하지만, 과정을 더 즁요하게 생각한다. 02 section2 세상 모든 일은 여러분이 무엇을 생각하느냐에 따라 일어납니다. 03 section3 웃음은 두 사람간의 가장 가까운 거리다 04 section4 지속적인 긍정적 사고는 능력을 배가시킨다. 05 section5 정의는 외부에서 오는 것이 아니라 내적 평온으로부터 온다. 06 section6 아무것도 변하지 않을지라도 내가 변하면 모든 것이 변한다 07 section7 노력을 이기는 재능은 없고 노력을 외면하는 결과..

애니메이션 예제1 코드블럭 LeeEunJi's PORTFOLIO work about let's inrtroduce frontend developer's all works ofportfolio lee3ll.tistory.com 보충설명 ✨ 이 코드는 GreenSock Animation Platform (GSAP) 라이브러리를 웹페이지에 추가하는 코드입니다. GSAP은 HTML, CSS, SVG 및 JavaScript 기반 웹 애니메이션을 만들기 위해 사용되는 강력하고 유연한 JavaScript 애니메이션 라이브러리입니다. 외부 라이브러리인 GSAP을 가져와서 사용하기 위해, 라이브러리 파일이 위치한 경로를 지정하여 웹 페이지에 추가합니다. //글씨 분리하기 ✨ 문서 내의 모든 split 클래스를 가진 요소..

parallax 효과 만들기 메뉴 코드블럭 Javascript parallax Effect01 패럴랙스 이펙트: 메뉴 효과 1 2 3 4 5 6 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 결과도 중요하지만, 과정을 더 즁요하게 생각한다. 02 section2 세상 모든 일은 여러분이 무엇을 생각하느냐에 따라 일어납니다. 03 section3 웃음은 두 사람간의 가장 가까운 거리다 04 section4 지속적인 긍정적 사고는 능력을 배가시킨다. 05 section5 정의는 외부에서 오는 것이 아니라 내적 평온으로부터 온다. 06 section6 아무것도 변하지 않을지라도 내가 변하면 모든 것이 변한다 07 section7 노력을 이기는 재능은 없고 노력을 외면하는..

5초마다 바뀌는 명언예제에서 랜덤배경추가 코드블럭 보충설명 무작위로 선택된 자연 사진을 HTML 문서의 배경 이미지로 설정하고, 일정한 시간 간격으로 배경 이미지를 변경하는 기능을 구현하고 있습니다. BgImage 함수는 https://source.unsplash.com/random/?nature URL을 사용하여 무작위로 선택된 자연 사진을 가져온 뒤, 이를 backgroundImageUrl 변수에 저장합니다. new Date().getTime() 함수를 사용하여 *캐싱을 방지하기 위해 URL에 시간 정보를 추가합니다. document.body.style.backgroundImage 속성을 사용하여 HTML 문서의 배경 이미지를 backgroundImageUrl 변수의 값으로 설정합니다. BgImage..

로또 번호 랜덤뽑기 코드블럭 로또 번호뽑기 뽑기 보충설명 ✨HTML에서 button 요소와 result 요소를 querySelector 메소드로 가져와서 변수 button과 result에 할당합니다. lottoNumber 함수는 새로운 Set 객체를 생성하고, 1부터 45까지의 숫자 중 랜덤으로 6개를 선택해서 Set에 추가합니다. 이 때, 중복된 숫자가 나오지 않도록 Set 객체를 사용합니다. button 요소에 click 이벤트 리스너를 추가하고, 이벤트 발생 시 lottoNumber 함수를 호출합니다. 그리고 result 요소의 innerText를 ...randomLotto로 설정합니다. ...randomLotto는 Set 객체를 배열로 변환한 것으로, 쉼표로 구분된 6개의 로또 번호가 result..

명언 랜덤 슬라이드 코드블럭 보충설명 5초마다 JSON 파일에서 명언을 가져와서 화면에 출력해줍니다. wise 변수를 0으로 설정하여주고 dataQuestion 함수를 정의합니다. dataQuestion 함수 안에서는 0부터 29까지의 랜덤한 수를 wise 변수에 저장하고, fetch를 이용하여 json/dummy01.json 파일을 가져옵니다. 가져온 파일을 items 변수에 저장하고, items.quotes[wise]를 이용하여 wise 변수에 저장된 인덱스에 해당하는 명언을 추출합니다. 추출한 명언을 document.querySelector로 해당 클래스를 가진 요소에 출력합니다. dataQuestion() 함수를 실행하고 setInterval을 이용하여 5초(5000)마다 dataQuestion(..

Slider Effect만들기 이전버튼과 다음버튼을 이용하여 이미지를 바꿀수 있으며 썸네일을 눌렀을때 해당 이미지로 이동시켜주도록 만들어 보겠습니다. 코드블럭 Javascript Slider sliderEffect07 슬라이드 이펙트: 좌로 움직이기 1 2 3 4 5 6 7 prev next lee3ll@naver.com 보충설명 썸네일 이미지 클릭하는 for문 forEach로 바꾸기 thumnailNodes.forEach((e, i) => { e.addEventListener("click", () => { slider.thumnails.querySelector("img.active").classList.remove("active"); thumnailNodes[i].classList.add("active..

sliderEffect6만들기 이번에는 사진을 움직이는 버튼과 아래 이미지 갯수만큼 닷을 만들어 닷마다 이미지로 이동할 수 있도록 만들어 보겠습니다. 코드블럭 Javascript Slider Effect06 슬라이드 이펙트: 좌로 움직이기(연속적으로) 1 2 3 4 5 6 7 prev next 보충설명 ✨ init()는 일반적으로 초기화를 위한 함수입니다. 이 함수는 보통 애플리케이션의 시작 시점에서 실행되며, 필요한 초기 작업을 수행합니다. 아래는 init()함수가 할 수 있는 일입니다. -애플리케이션의 설정을 읽고 파싱하여 내부 변수에 저장합니다. -애플리케이션에서 사용할 전역 변수를 설정합니다. -애플리케이션에서 사용할 리소스를 불러오거나 초기화합니다. -애플리케이션에서 필요한 라이브러리를 불러옵니..

Slider Effect만들기 이번 슬라이드 이펙트에서는 4번효과와 같이 연속적으로 움직이지만 y축(세로)을 기준으로 움직이도록 만들어보겠습니다. 코드블럭 Javascript Slider Effect05 슬라이드 이펙트: 좌로 움직이기(연속적으로) 1 2 3 4 5 6 lee3ll@naver.com 보충설명 ✨ HTML 문서 내 ".slider__wrap" 클래스를 가진 요소를 선택하여 sliderWrap 변수에 할당하고, 이하 동일한 방식으로 필요한 요소들을 선택하여 변수에 할당합니다. currentIndex, sliderCount, sliderWidth, sliderHeight, sliderClone, sliderInterval 등의 변수를 초기화합니다. ✨ 두 번째 script 태그에서는 slide..