코딩공부중인블로그

가로 효과 전체 소스 1. const parallaxCont = document.querySelector(".parallaxs__wrap");: parallaxs__wrap 클래스를 가진 요소를 선택하여 parallaxCont 변수에 할당합니다. 이 요소는 패럴랙스 효과를 적용할 부분을 감싸는 컨테이너입니다. 2. let scrollTop = window.pageYOffset;: scrollTop 변수에 현재 스크롤의 수직 위치를 저장합니다. 3. let parallaxWidth = parallaxCont.offsetWidth;: parallaxCont 요소의 너비를 저장하는 parallaxWidth 변수를 생성합니다. 4. document.body.style.height = parallaxWidth +..

리빌효과 전체소스 HTML / CSS Javascript Parallax Effect07 패럴렉스 이펙트 : 리빌 효과 1 2 3 4 5 6 7 01 section1 삶은 탐구하는 모험이다. 02 section2 오늘 당신이 할 수 있는 최선의 일을 하라. 03 section3 비난은 쓸모없는 짓이다. 04 section4 우리의 삶은 우리가 생각하는 것처럼 빠르지 않고, 우리가 생각하는 것보다 짧다. 05 section5 머리로 생각하는 것보다는 마음으로 생각하고 행동하라. 06 section6 인생은 문제다. 그것을 해결해 나가는 과정에서 삶이 만들어진다. 07 section7 성공은 단순히 실패를 거듭하고 계속하는 것이다. 08 section8 기회는 항상 어려운 일 모습으로 찾아온다. 09 sec..

컴퍼넌트 - 리액트 컴포넌트(React component)는 리액트(React) 라이브러리에서 사용되는 재사용 가능한 UI 요소입니다. 리액트는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리로, 컴포넌트 기반 개발을 지원합니다. - 리액트 컴포넌트는 UI를 구성하는 독립적인 모듈로, 각각의 컴포넌트는 자체적으로 상태(state)와 속성(props)을 가지며, 화면에 렌더링되는 UI 조각입니다. 컴포넌트는 재사용 가능하고, 계층 구조로 구성될 수 있어 복잡한 UI를 구성하는 데 유용합니다. ex 1) import React from "react"; import ReactDOM from "react-dom/client"; function Hello(){ return Hello, world ..

설치 방법 Node.js 설치 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org -우선 Node.js 설치한 후 코드 에디터 선택: React 코드를 작성할 수 있는 코드 에디터를 선택하고 설치합니다.(Visual Studio Code 등) - 새로운 React 프로젝트 생성을 위해 터미널 또는 명령 프롬프트를 열고 원하는 프로젝트 디렉토리로 이동후 아래 명령어로 새로운 React 프로젝트를 생성합니다. npx create-react-app 프로젝트 이름 이 명령은 Create React App을 사용하여 새로운 프로젝트를 생성합니다. 프로젝트 이름에 ..

HTML JS const allMusic = [ { name : "1. 저리가라", artist : "parrick parrick", img: "music_view01", audio: "music_audio01" },{ name : "2. 저리가라", artist : "parrick parrick", img: "music_view02", audio: "music_audio02" },{ name : "3. 저리가라", artist : "parrick parrick", img: "music_view03", audio: "music_audio03" } ]; - 음악에 정보를 allMusic에 배열안 객체로 저장합니다. //선택자 const musicWrap = document.querySelector(".mu..

전체 소스 보기 우선 jquery와 gsap의 라이브 러리를 가져와 줍니다. HTML WEBS GAME WORLD 빨강 음악 듣기 파랑 음악 듣기 초록 음악 듣기 노랑 음악 듣기 현재 맥을 사용하고 있으며, 화면 크기는 1920 X 760 입니다. 마우스 변경하기 window.onload = function(){ window.addEventListener("mousemove", e => { gsap.to(".cursor", { duration: 0, left: e.pageX -5, top: e.pageY -10 }); }); } gsap를 사용하면서 addEventListener로인해 마우스가 움직일때 .cursor가 마우스를 대신하게 됩니다. 시간 구현 //현재 시간 const printTime = (..

at() 사용법:"문자열".at(위치값) 배열과 문자열에서 사용가능 하지만 주로 배열에서 사용 합니다. 배열(Array) 객체의 메서드 중 하나로, 특정 인덱스(index)에 해당하는 요소(element)를 반환합니다. 배열의 인덱스가 유효하지 않을 경우 undefined를 반환하며, 배열의 범위를 초과하는 인덱스를 사용하려고 하면 RangeError를 발생시킵니다. { "javascript refercence".at(0); //"j" "javascript refercence".at(1); //"a" "javascript refercence".at(10); //" " "javascript refercence".at(-1); //"e" "javascript refercence".at(-12); //"t" ..

※패럴랙스 이펙트 전체 소스 hello World Javascript Fighting! - 스크롤에 반응 하여 css 데이터가 변하는 소스를 가져와서 적용해주도록 합니다. - 그후 스크롤이 값을 봐가며 자기가 어느곳에 어떻게 변화를 주고 싶은지 적어 줍니다. - 적을 때는 변하지 않는 요소는 style에 적어도 상관이 없습니다. javascript - 스크롤을 하였을때 스크롤의 Y의 값을 가져오도록 하였고 그것을 .scrollTop 에 넣어 주었습니다.

※패럴렉스 이펙트 메뉴 효과 전체소스 보러가기 css 보러가기 HTML 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 삶은 탐구하는 모험이다. 02 section2 오늘 당신이 할 수 있는 최선의 일을 하라. 03 section3 비난은 쓸모없는 짓이다. 04 section4 우리의 삶은 우리가 생각하는 것처럼 빠르지 않고, 우리가 생각하는 것보다 짧다. 05 section5 머리로 생각하는 것보다는 마음으로 생각하고 행동하라. 06 section6 인생은 문제다. 그것을 해결해 나가는 과정에서 삶이 만들어진다. 07 section7 성공은 단순히 실패를 거듭하고 계속하는 것이다. 08 section8 기회는 항상 어려운 일 모습으로 찾아온다. 09 section9..

10초마다 json에 담긴 명언 하나를 랜덤으로 가져오기 문제풀이 보러가기 ※10초마다 명언가져오기 + 배경화면 바꾸기 전체소스 명언 모음집 명언 - 10초 마다 명언을 json파일에서 가져오는 것에서 추가로 배경화면도 바뀌게 해주었습니다. const bgimg = () => { fetch(`https://source.unsplash.com/random/?wallpapers`) .then((imgs) => { let imgurl = imgs.url console.log(imgurl) document.body.style.backgroundImage = 'url('+imgurl+')' }); } 함수를 하나 더 만들어서 랜덤으로 이미지가 나오는 사이트를 가져와 필요한 정보를 가져온후 변수로 저장해줍니다. 그..