JavaScript14 EFFECT | GAME | 뮤직 플레이어 코딩하기 gameEffect | 👾뚠뚠 뮤직 플레이어 만들기👾 1. 사이트 구조 살펴보기 HTML 살펴보기 *** Music Player +++ A Year Ago NETFFEX 0:00 4:00 뮤직 리스트 CSS 살펴보기 3. script 살펴보기 🎧 선택자 만들기 🎧 음악 재생하기 🎧 버튼을 클릭했을 때 🎧 오디오가 끝났을 경우 🎧 진행바 설정하기 🎧 뮤직 리스트 설정하기 🎧 볼륨 조절 추가하기 원본 소스 보기 실제 사이트 보기 2022. 10. 17. EFFECT | SEARCH | sort( ), reverse( )를 이용하여 정렬하기 searchEffect | sort(), reverse()를 이용하여 정렬하기 오늘의 목표 💡 여러 정렬 구현하기(오름차순, 내림차순, 알파벳순, ...) 💡 랜덤 정렬하기 💡 카테고리별 정렬하기 1. 사이트 구조 살펴보기 HTML 살펴보기 속성 목록은 자바스크립트로 표현해주기 위해 비워두었습니다. sort(), reverse()를 이용하여 정렬하기 CSS 속성 정렬하기 반대로 정렬하기 오름차순 정렬하기 내림차순 정렬하기 알파벳순(a~z) 알파벳순(z~a) 랜덤 정렬하기 카테고리별 정렬하기 animation background border column flex font grid inset line list margin mask max min offset outline overflow overscroll .. 2022. 10. 17. EFFECT | SEARCH | filter()를 이용하여 속성의 중요도 보여주기 searchEffect | filter()를 이용하여 속성의 중요도 보여주기 오늘의 목표 💡 스크립트를 통해 속성 리스트를 나타내기 💡 중요도에 따라 리스트 나타내기 오늘의 미션 👉🏻 난이도 1개 이상, 2개 이상,... 버튼 구현하기 1. 사이트 구조 살펴보기 HTML 살펴보기 속성 목록은 자바스크립트로 표현해주기 위해 비워두었습니다. filter()를 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 ☆☆☆☆☆ ★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★ 1개 이상 2개 이상 3개 이상 4개 이상 CSS 속성 갯수 : 2. script 살펴보기 📌 속성 리스트 만들고 출력하기 속성 리스트는 cssProperty 내 배열 속 객체로 만들어주었고 map을 활용하여 출력해주었습니다. 📌 난이도.. 2022. 10. 17. EFFECT | SLIDER | 버튼과 닷버튼 형식의 이미지 슬라이드 sliderEffect | 버튼과 닷버튼 형식의 이미지 슬라이드 오늘의 목표 ❔problem 첫번째 이미지에서 이전 버튼을 누르면 마지막 사진으로 넘어가야 하며, 마지막 이미지에서 다음 버튼을 누르면 첫번째 사진으로 넘어가야 합니다. ❗️solve if문을 활용하는 방법과 if문 없이 해결하는 방법이 있으며, 오늘 보여드릴 방법은 if문 없이 해결하는 방법입니다. 1. 사이트 구조 살펴보기 HTML 살펴보기 화면 아래 닷버튼이 추가되었습니다. prev next CSS 살펴보기 닷버튼 디자인이 추가되었습니다. 2. script 살펴보기 이미지가 움직이는 영역 | 매개변수 num을 활용하여 이미지의 가로값만큼 x축으로 이동할 수 있도록 설정해줍니다. ⇢ next 버튼 설정 | currentIndex 값에 1.. 2022. 10. 17. EFFECT | PARALLAX | 리빌 효과 parallaxEffect | 리빌(Reveal) 효과 오늘의 목표 👉🏻 스크롤을 내렸을때 이미지와 글씨에 리빌 효과 주기 1. 사이트 구조 살펴보기 HTML 살펴보기 01 section1 우선 무엇이 되고자 하는가를 자신에게 말하라 그리고 해야 할일을 하라. 02 section2 이미 끝나버린 일을 후회하기 보다는 하고 싶었던 일들을 하지 못한 것을 후회하라. 03 section3 문제는 목적지에 얼마나 빨리 가느냐가 아니라 그 목적지가 어디냐는 것이다. 04 section4 도저히 손댈 수가 없는 곤란에 부딪혔다면 과감하게 그 속으로 뛰어들라. 05 section5 당신이 할수 있다고 믿든 할수 없다고 믿든 믿는 대로 될것이다. 06 section6 마음만을 가지고 있어서는 안된다. 반드시 실천하여야.. 2022. 10. 17. SEARCH | 검색 유형04 searchEffect | find()를 이용하여 속성 설명 나타내기 오늘의 목표 💡 스크립트를 통해 속성 리스트를 나타내기 💡 데이터를 입력하고 리스트와 비교하여 설명 출력하기 오늘의 미션 👉🏻 속성 버튼을 클릭했을 때도 설명 출력되도록 만들기 1. 사이트 구조 살펴보기 HTML 살펴보기 속성 목록은 자바스크립트로 표현해주기 위해 비워두었습니다. find()를 이용하여 속성을 검색하면 설명 보여주기 CSS 속성 검색하기 검색하기 속성을 검색하시면 설명이 표시됩니다. !!! CSS 속성 갯수 : 2. script 살펴보기 📌 속성 리스트 만들고 출력하기 속성 리스트는 cssProperty 내 배열 속 객체로 만들어주었고 map을 활용하여 출력해주었습니다. 📌 속성을 검색했을때 설명 출력하기 addEven.. 2022. 9. 29. EFFECT | MOUSE | 이미지 기울기 / 글자 반전 효과 주기 mouseEffect | 기울기 효과 / 글씨 반전 효과 오늘의 목표 👉🏻 마우스 커서 움직임에 따라 이미지가 기울어지는 효과주기 👉🏻 마우스 커서와 글/이미지가 만나는 부분은 반전효과 설정하기 1. 사이트 구조 살펴보기 CSS 살펴보기 요소에 적용할 변화의 종류를 미리 브라우저에게 알려주는 역할을 함으로써, 실제 요소가 변하기 전에 미리 브라우저를 그에 맞게 최적화시키는 속성입니다. 📌 will-change 요소에 적용할 변화의 종류를 미리 브라우저에게 알려주는 역할을 함으로써, 실제 요소가 변하기 전에 미리 브라우저를 그에 맞게 최적화시키는 속성입니다. - will-change 적용시 원래보다 더 오랜 시간 최적화를 유지해야하기 때문에 스크립트를 통해 변화 전후에 활성/비활성을 설정해주는 것이 좋습니.. 2022. 9. 28. EFFECT | MOUSE | 배경 조명 효과주기 mouseEffect | 배경 조명 효과 오늘의 목표 👉🏻 마우스 커서 움직임에 따라 배경 사진에 조명을 비추는 느낌으로 효과주기 1. 사이트 구조 살펴보기 CSS 살펴보기 span으로 감싼 글자는 키워드로 색깔을 다르게 주었습니다. cursor 디자인도 따로 조명을 비추는 듯한 느낌으로 디자인 했습니다. HTML 살펴보기 영화 '니모를 찾아서'에 나오는 명언을 넣어주었습니다. The best moment suddenly comes. 최고의 순간은 갑자기 찾아오는 거야. 2. script 살펴보기 📌 cursor에 움직임에 따라 배경이 컬러로 보일 수 있는 이유 cursor 자체에 background-image를 넣고 위치와 크기를 맞춰준 다음 fix시켜 마우스의 움직임에 따라 보일 수 있도록 설정해주었.. 2022. 9. 22. EFFECT | MOUSE | 마우스 따라다니기 mouseEffect | 마우스 따라다니기 오늘의 목표 👉🏻 마우스 커서 대신 css로 디자인한 모양이 마우스를 따라다니도록 설정하기 👉🏻 강조하고 싶은 글자에 커서를 가져갔을 떄 다양한 효과주기 1. 사이트 구조 살펴보기 CSS 살펴보기 HTML 살펴보기 You can't be more than others if you do like others 남과 같이 해서는 남 이상이 될 수 없다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px 2. script 살펴보기 원본 소스 보기 실제 사이트 보기 2022. 9. 19. SITE | 모든 유형을 합쳐서 SITE를 완성해보자 :9 사이트 제작부터 반응형 적용까지 해보자:9 지금까지 배운 헤더, 배너, 슬라이드, ... 등의 타입들을 조합하여 반응형 사이트를 만들어봅시다. ✔︎ 결과 확인하기 전체 소스 보기 실제 사이트 보기 #header 💡 햄버거 메뉴를 사용해주었습니다. 화면 크기 1300px부터는 헤더 메뉴를 보이지 않게 처리하고 햄버거 메뉴로 대신하게 만들었습니다. * 햄버거 메뉴 : 주로 앱 상단 모퉁이에 위치하며, 메뉴를 토글하거나 네비게이션 바의 역할을 합니다. ⚠ 햄버거 메뉴를 열었을 때 스크롤이 생기는 현상을 막아주었습니다. script로 햄버거 메뉴를 클릭했을 때, body에 class="fixed"를 추가시켜 해결해주었습니다. ⚠ 햄버거 메뉴를 열어놓은 상태에서 화면크기를 최대로 키웠다가 다시 줄였을 때 메뉴가 .. 2022. 9. 15. EFFECT | PARALLAX | 사이드 메뉴 적용하기 Parallax Scroll 효과 오늘의 목표 👉🏻 사이드 메뉴 설정하기 👉🏻 사이드 메뉴를 클릭했을 때 해당 section으로 이동하도록 설정하기 👉🏻 사이드 메뉴가 스크롤에 따라 반응하도록 설정하기 1. 사이트 구성 살펴보기 CSS 살펴보기 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 문제는 목적지에 얼마나 빨리 가느내가 아니라 그 목적지가 .. 2022. 9. 14. EFFECT | Parallax Scroll 효과 적용하기 Parallax Scroll 효과 패럴랙스 스크롤링은 사용자가 마우스를 스크롤할 때, 원거리에 있는 배경 이미지는 느리게 움직이게 하고, 근거리에 있는 사물 이미지는 빠르게 움직이도록 함으로써 입체감을 느낄 수 있게 만든 디자인 기법입니다. 오늘은 이미지가 아닌 메뉴바에 적용시켜 보는 방법을 배워보도록 할게요 ! 설명은 차근차근 더 추가하도록 하겠습니다 !🤯 그림으로 먼저 확인해봅시다 ! 👾 Parallax Scroll 효과 👾 1section1, 2, 3 ,... 의 위치값과 스크롤의 위치값을 비교하기 위해 forEach로 .content__item의 element 값과 index 값을 가지고 옵니다. 2if문을 사용해 scrollTop 값이 element.offsetTop 값보다 크면 메뉴바에 있는 .. 2022. 9. 6. SLIDER | 이미지 슬라이더 | 좌로 넘기기(연속) SLIDER 효과_좌로 움직이는 이미지(연속)를 만들어보자 ! 저번 시간에 해봤던 '이미지가 좌로 움직이는' 효과를 이번엔 '연속'으로 나오도록 만들어 봅시다. 원본 페이지 내에서도 소스보기를 통해 코드를 바로 확인해보실 수 있습니다^0^ 원본 소스 보기 script를 살펴봅시다 ! 이미지 좌로 움직이기(연속) | 여러 이미지를 감싸는 slider__wrap을 일정 시간 간격마다 좌로 이동해서 이미지가 움직이는 것처럼 보이게 해줍니다. 여기에 더해 첫번째 위치한 사진을 뒤에 한번 더 나오도록 해주고 리셋시켜 처음부터 다시 반복해서 나오도록 설정해줍니다. slider__wrap 좌로 이동 ☛ 첫번째 사진 마지막 사진 뒤로 복사 ☛ 마지막 사진 위치했을 때, 초기화 설정 첫번째 사진을 복사하는 이유; 복사하.. 2022. 9. 4. JAVASCRIPT | GSAP 🤔 GSAP, 그게 뭔데? GSAP_The GreenSock Animation Platform; CSS나 jQuery등을 사용해 애니메이션 효과를 구현하는데 있어 번거로움과 복잡함을 GSAP를 통해 훨씬 간편하게 설정이 가능합니다. 세세한 부분까지 설정이 가능하며 라이브러리 참고가 가능하여 여러 웹사이트에서 사용하고 있습니다. 🤓 GSAP, 사용해볼까? 위의 사진처럼 공식 사이트에서 설치하거나 CDN을 통해 사용할 수 있습니다. 📄 SLIDER 효과_좌로 움직이는 이미지를 통해 확인해보자 ! 2022. 8. 29. 이전 1 다음
