100S00

GGGGAME효과 + 미션 1,2,3,4 HTML 코드 HB GAME WORLD 뮤직 듣기1 뮤직 듣기2 뮤직 듣기3 뮤직 듣기4 스크립트 코드 jquery와 gsap를 둘 다 사용하기 위해 라이브러를 둘 다 가져왔습니다. $(".icon1").draggable({ containment: ".icon__box", scroll: false, start: function () { $(".cursor img").attr("src", "assets/img/game_mouse01.png") } 라이브러를 가져와 가능한 효과이다. $(선택자).draggble 에 containment icon__box,scroll: false, 이 경우, 드래그 가능한 요소는 클래스가 "icon__box"인 요소 내에서만 이동할 수..

헤더 부분을 사이드로 뺀 시안입니다. 헤더 부분은 아래 이미지의 사이트 디자인을 참조하였습니다. 메인 상단페이지는 페이지의 메인인 향수 시각화 영상을 짧게 풀스크린으로 넣으려합니다. 그 다음 텍스트 페이지는 풀스크린 이미지를 백그라운드에 넣고 센터에 텍스르를 넣어 작업할 예정입니다. 세번째 슬라이드 영역은 총 6개의 이미지 슬라이드로 구성되어 있으며 슬라이드 박스와 텍스트 박스를 비정형으로 배치하고 z축에 차이를 주어 표현하려합니다. 슬라이드 영역은 아래 사이트 슬라이드 영역과 수업시간 슬라이드 썸네일 페이지를 참조 하였습니다.

오늘은 스크롤 애니메이션을 공부해보았습니다. WEB Hello Fighting "실패는 재도전의 시작이다." - 헨리 포드 "가장 어려운 일이 가장 중요한 일이다." - 알버트 아인슈타인" - 헨리 포드 가봅시다. 노가다.. 스크립트로 스크롤 값을 제일 먼저 가져와 .scrollTop 위치에 출력 시켜줍니다. 그 후 스크롤 애니메이션을 가능하게 해줄 라이브러리를 가져와줍니다.

패럴럭스 효과 HTML코드 Javasrcipt parallax Effect01 패럴럭스 이펙트 : 메뉴효과 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 가장 어두운 밤이 지나면 해는 떠오른다 07 Section7 먼저 자신을 비판하라, 그러면 남들이 당신을 칭찬할 것이다. 08 Section8 성공의 열쇠는 자신감과 열정이다. 09 Section9 도전이 없다..

명언에 배경까지 바꿔주기 코드 let quonte = document.querySelector(".wise__quote"); let author = document.querySelector(".wise__author"); let wiseAll = []; let item = []; const getRandomBackground = () => { const randomIndex = Math.floor(Math.random() * 10); return `url('https://source.unsplash.com/random/?${randomIndex}')`; } const dataQuestion = () => { fetch("../json/dummy01.json") .then(res => res.json())..

랜덤 번호 뽑기 document.querySelector(".lotto__start__btn").addEventListener("click",()=>{ createNum(); document.querySelector(".lootto__num").innerHTML = `${randomTot.join(', ')}`; randomTot=[]; }); let randomTot = []; function createNum(){ let randomNum = Math.floor(Math.random() * 45) ; for(let i =0; i

슬라이드 07 이번 슬라이드 유형은 썸네일 이미지와 썸네일 이미지를 누르면 이미지까지 바뀌는 효과를 내주려 합니다. html 코드 Javasrcipt slider Effect07 슬라이드 이펙트 : 썸네일 슬라이드 1 2 3 4 5 6 7 prev next esansi@naver.com 이번엔 이미지를 변수의 배열로 넣어 작업하였습니다. let images = [ "./img/slider06-min.jpg", "./img/slider04-min.jpg", "./img/slider09-min.jpg", "./img/slider07-min.jpg", "./img/slider04-min.jpg", ]; 그리고 선택자 또한 다른 방법으로 사용했다. function imageSlider(parent, images..

슬라이드 유형 06 이번 유형은 버튼을 클릭하여 다음 슬라이드로 넘기는 작업을 해보았습니다. 추가적으로 지금 슬라이드가 어디있는지 동그란 이미지로 보여주는 효과도 넣어 주는 작업까지 해보았습니다. prev next html 코드 main 섹션 안에 slider__btn 을 만들어줍니다. 이 버튼은 이미지 양 끝 좌우에 다음 이미지 이전 이미지로 넘어가게 하는 버튼입니다. a태그를 사용하여 class이름을 각각 prev ,next로 지어줍니다. 그리고 이번에 dot버튼을 만들어줍니다. slider__dot 은 같은 코드를 반복 해서 써주기 때문에 스크립트 코드로 넣어주려한다. css코드 /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; disp..

슬라이드 05 이번 유형은 슬라이드가 위로 올라가는 유형이다. 4번과 비슷한 구조이지만 sliderInner가 x축과 y축으로 움직인다는 차이가 있다. .slider__inner { /*전체 이미지를 감싸고 있는 부모 : 움직이는 영역*/ display: flex; flex-wrap: wrap; width: 800px; height: 2700px; } .slider { /*개별적인 이미지*/ position: relative; width: 800px; height: 450px; } slider__inner 부분에 height 값을 이미지의 갯수 * 450 으로 설정해야합니다. 하나의 이미지가 복사 되어 총 이미지는 6개이므로 6 * 450 = 2700을 설정해주었습니다. script let current..

슬라이드04 슬라이드 4번 유형은 5번 이미지에 왔을때 그 뒤에 1번이 나오도록 1번을 복사 해서 연속적이게 보여주게 할 것 입니다. 변수인 let sliderClone = sliderInner.firstElementChild.cloneNode(true);를 만들어줍니다. 이 변수는 sliderInner의 첫번째 자식 요소를 그 요소를 유지한 상태로 하나 더 생성해줍니다. 그 후 appendChild를 사용하여 sliderInner 뒤에 복사한 요소를 위치 시켜 줍니다. sliderInner.appendChild(sliderClone); 그렇게 되면 이미지는 1번 2번 3번 4번 5번 1번 으로 나오게 됩니다. let sliderClone = sliderInner.firstElementChild.clon..