gameEffect02
gameEffect 원본 소스 보기 메인 페이지 보기 JAVASCRIPT01 뮤직 플레이어를 만들어 보았습니다. allMusic 변수에 10곡의 노래 정보를 저장하고, 스크립트할 영역을 선택하여 변수로 선언합니다. const allMusic = [ { name: "1. Cattle", artist: "Telecasted", img: "music_view01", audio: "music_audio01", }, { name: "2. Fat Man", artist: "Yung Logos", img: "music_view02", audio: "music_audio02", }, { name: "3. Faultlines", artist: "Asher Fulero", img: "music_view03", audio:..
2022. 10. 19.
gameEffect01
gameEffect 원본 소스 보기 메인 페이지 보기 JAVASCRIPT01 배경의 아이콘들이 드래그가 가능하도록 draggable메서드를 사용하여 설정하고, 아이콘을 드래그할 때 마우스 커서가 변경되도록 jquery attr메서드로 커서 이미지를 불러옵니다. 우상단 헤더에 시간을 출력해주기 위해 now변수에 new연산자를 사용해 Date 생성자를 호출해 저장합니다. 그리고 nowTime 변수에 년, 월, 일, 시, 분, 초를 쿼리문을 사용해 저장후 seTimeout을 통해 1초 단위로 업데이트 시켜줍니다. am, pm표시와 각 숫자가 10의 자리 이하일 때, 앞에 0을 붙여 좀 더 자연스러운 디지털 시계처럼 만들어줍니다. 푸터에는 맥, 윈도우, 아이폰, 안드로이드 각 체제 사용여부, 화면크기를 출력해주..
2022. 10. 19.
parallax Effect05
parallaxEffect05 패럴랙스 이펙트05 - 이질감 효과입니다. 본문의 글과 이미지가 스크롤에 따라 움직여 이질감이 들도록 만들었습니다. HTML과 CSS는 크게 변경이 없으므로, 깃헙을 참고해주세요! 원본 소스 보기 원본 사이트 보기 JAVASCRIPT 스크롤 함수를 실행시키기 위해 현재 스크롤 위치값을 불러오고, 본문의 공통요소인 각 아이템 클래스에 반복문을 사용하여 offset1,2,3 변수를 선언합니다. 이때 offset1,2,3 변수는 각 아이템의 이미지, 글, 번호에 스크롤시 애니메이션 속도를 설정해줍니다. 스타일.트랜스폼으로 애니메이션 효과를 줄 수 있으나, 좀 더 부드러운 애니메이션 효과를 위해 gsap를 사용하여줍니다. (power4.out, expo.out = ease 애니메이..
2022. 9. 20.
