코딩공부

스크롤을 하면 가로로 넘어가는 효과입니다. HTML Javascript Parallax Effect09 패럴랙스 이펙트 : 가로 세로 효과 1 2 3 4 5 6 7 8 9 01 02 03 04-1 04-2 04-3 05 06 07 08 09 scrollTop : 0px CSS 중간에 가로로 넘어가는 영역에 색을 변경해주고 가로 영역을 제외하고 각각 z index 값을 주었습니다. z-index값을 넣지 않으면 가로 영역이 먼저 보여집니다. SCRIPT 외부 라이브러리인 GSAP(GreenSock Animation Platform)를 가져오기 위한 `` 태그를 사용하여 CDN 링크를 추가합니다. `section4` 변수를 사용하여 효과를 적용할 요소의 오프셋 탑(top) 위치를 가져옵니다. 이는 `id`가..

HTML JavaScript Parallax Effect05 페럴렉스 이펙트 : 이질감 효과 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 불가능은 자신이나 다른 사람의 머릿속에 존재하는 것일 뿐, 현실은 아니다. 02 section2 성공한 사람들은 실패한 것을 견뎌낸 것이 아니라 실패를 끝까지 포기하지 않은 것이다. 03 section3 자신의 꿈을 이루기 위해 끊임없이 노력하면 언젠가는 반드시 성공할 것이다. 04 section4 성공을 위해서는 대담하게 도전해야 합니다. 그리고 실패에 대해서는 당당하게 인정해야 합니다. 05 section5 가장 어두운 밤이 지나면 해는 떠오른다. 06 section6 성공의 비밀은 한 가지 비밀이 ..

HTML JavaScript Parallax Effect04 페럴렉스 이펙트 : 나타나기 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 불가능은 자신이나 다른 사람의 머릿속에 존재하는 것일 뿐, 현실은 아니다. 02 section2 성공한 사람들은 실패한 것을 견뎌낸 것이 아니라 실패를 끝까지 포기하지 않은 것이다. 03 section3 자신의 꿈을 이루기 위해 끊임없이 노력하면 언젠가는 반드시 성공할 것이다. 04 section4 성공을 위해서는 대담하게 도전해야 합니다. 그리고 실패에 대해서는 당당하게 인정해야 합니다. 05 section5 가장 어두운 밤이 지나면 해는 떠오른다. 06 section6 성공의 비밀은 한 가지 비밀이 아니..

오늘은 숨김메뉴와 탑 버튼을 나타내는 패럴럭스 이펙트를 하였습니다. 스크롤을 내리면 메뉴가 사라지고 올리면 메뉴가 나옵니다. 그리고 맨 밑으로 내리면 탑 버튼이 나옵니다. 추가된 css .parallax__nav { top: -100px; transition: all 0.6s; } .parallax__nav.show { top: 10px; } HTML JavaScript Parallax Effect03 페럴렉스 이펙트 : 숨김메뉴/ 탑 버튼 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 불가능은 자신이나 다른 사람의 머릿속에 존재하는 것일 뿐, 현실은 아니다. 02 section2 성공한 사람들은 실패한 것을 견뎌낸 것이 아니라 실패를 끝까..

이번엔 닷 메뉴로 이동할 수 있는 패럴럭스 이펙트 입니다. HTML JavaScript Parallax Effect02 페럴렉스 이펙트 : 사이드 메뉴 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 불가능은 자신이나 다른 사람의 머릿속에 존재하는 것일 뿐, 현실은 아니다. 02 section2 성공한 사람들은 실패한 것을 견뎌낸 것이 아니라 실패를 끝까지 포기하지 않은 것이다. 03 section3 자신의 꿈을 이루기 위해 끊임없이 노력하면 언젠가는 반드시 성공할 것이다. 04 section4 성공을 위해서는 대담하게 도전해야 합니다. 그리고 실패에 대해서는 당당하게 인정해야 합니다. 05 section5 가장 어두운 밤이 지나면 해는 떠오..

리스트 버튼을 클릭하면 뮤직 리스트가 나오고 노래를 선택하면 해당 곡이 나옵니다. 뮤직 리스트 / 리스트 닫기버튼 //뮤직 리스트 버튼 musicListBtn.addEventListener("click", () => { musicList.classList.add("show"); }); //뮤직 리스트 닫기 버튼 musicListClose.addEventListener("click", () => { musicList.classList.remove("show"); }); 뮤직 리스트 버튼을 클릭하면 addEventListener를 통해 show 클래스를 추가하여 화면에 나타나게 하고 닫기를 누르면 show 클래스를 삭제하여 뮤직 리스트가 화면에서 사라지게 합니다. 뮤직 리스트 구현/ 리스트 음악 시간 불러오..

음악 플레이 재생 버튼을 누르면 음악이 재생되고 한번 더 누르면 음악이 멈춥니다. 이전 버튼을 누르면 이전 곡이 재생되고 다음 버튼을 누르면 다음 곡이 재생됩니다. 그리고 듣고 싶은 부분을 바에서 클릭하면 해당 부분부터 음악이 재생됩니다. music.js const allMusic = [ { name : "1.음악제목", artist : "아티스트", img: "music_view01", audio : "music_audio01" }, { name : "2.음악제목", artist : "아티스트", img: "music_view02", audio : "music_audio02" }, { name : "3.음악제목", artist : "아티스트", img: "music_view03", audio : "mu..

HTML 👾CYBER GAME WORLD👾 2023년 4월 24일 09시 30분 29초 뮤직 듣기 뮤직 듣기 뮤직 듣기 뮤직 듣기 현재 윈도우를 사용하고 있으며, 화면 크기는 1920 X 760입니다. 각 요소들이 들어갈 영역을 만들고 들어갈 텍스트와 이미지를 넣어주었습니다. css reset.css @import url('https://webfontworld.github.io/uto123RF/Uto123RF.css'); /* reset */ * { margin: 0; padding: 0; color: #fff; font-family: "Uto123RF"; } *, *::before, *::after { box-sizing: border-box; } a { text-decoration: none; col..

오늘은 문자열객체에 대해 알아보겠습니다 string.prototype.at( ) "문자열".at(위치값) 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 요소를 반환합니다. 음의 정수는 문자열의 마지막부터 셉니다. 위치값에 위치 해있는 문자열이 없으면 'undefined'가 출력됩니다. { "javascript reference".at(0); // j "javascript reference".at(1); // a "javascript reference".at(2); // v "javascript reference".at(11); // r "javascript reference".at(20); // undefined "javascript reference".at(-1); // e "java..

오늘은 페럴랙스를 이용한 웹페이지를 만들어보았습니다. 스크롤 하시면 각 효과들이 나옵니다! html I solemnly swear that I'm up to no good Revelio! Mischief managed scrollTop값을 구할 영역을 만들어주고 값은 아래 스크립트를 통해 구했습니다. 그리고 section 2개를 만들어 각각의 이미지의 영역을 만들어 주었습니다. 그리고 각 스크롤 값이 변할때 마다 이미지들의 효과나 투명도, 크기를 설정해주었습니다. script https://cdnjs.com/libraries/skrollr에서 cnd링크를 가져온 후 안에 이벤트 리스너를 사용해 스크롤 할 때 scrollTop 값을 구하고 parseInt로 정수로 만들어 innerText로 화면에 나타내줍..