- 오늘 할 것은 패럴랙스 효과입니다. - 패럴랙스 효과란 페이지를 스크롤 했을 때 현재 보여지는 화면에 해당되는 좌표값을 가져온 다음 좌표값에 따라 이미지에 효과를 주는 방식입니다. - 그러려면 가장 중요한 것은 기준에 따른 좌표값을 가져오는 것인데 해당 블로그에서는 현재 Y좌표값과 각 사진의 Y좌표값을 구해보았습니다 - 스크립트를 보시죠 - window.addEventListener에 scroll를 주어 스크롤를 했을 때 함수가 실행되게 해주었습니다. 그리고 가장 먼저한 일은 좌표값을 저장한 것입니다. - 그리고 그걸 .scroll 에 있는 span 태그에 저장해 주었습니다. - document.querySelector(".info .offset1").innerText = document.getEle..

- 오늘 할 것은 4번에 했던 명언에 인터넷에서 가져온 사진을 배경으로 추가해주고 - 그 사진이 계속 바뀌는 것 입니다. - 저는 사진이 바뀌는 과정을 저번에 했던 슬라이드 형식을 가져왔습니다. - 꽤나 고심을 한 흔적이 보이시나요? 좀 힘들었습니다.(생색내기 장인) - 함께 코드를 보시죠 * { margin: 0; padding: 0; } .wrap { margin: 0 auto; justify-content: center; width: 1000px; height: 800px; position: relative; overflow: hidden; } .slider__inner { width: 1000px; height: 800px; } .slider__inner > div > img { width: 10..

- 자 오늘도 예제입니다!! - 오늘 예제는 다들 두근두근 하실 텐데요 - 바로 일확천금의 꿈인 로또 번호 자동생성기 입니다. 이번주는 이 번호로 한번... - 넓이가 좁을 때 번호박스의 위치가 좀 밀리긴 하는데 이정도면 준수하네요!! ㅋㅋㅋㅋ - 바로 스크립트를 보시죠 // 선택자 const lottonum = document.querySelectorAll(".number p"); const clickBtn = document.querySelector(".click"); // 필요한 변수 let numLength = lottonum.length let num = [] // 함수 clickBtn.addEventListener("click",function(){ while (num.length < numL..

- 자 오늘은 예제입니당 - 이번에도 모던 자바스크립트 책에 있는 예제를 가져왔는데요 - 이번엔 조금 변형을 해서 명언이 적힌 문구가 10초에 한번 씩 변하는 스크립트를 만들어 보았습니다. - 10초가 생각보다 긴 것 같습니다 ㅋㅋㅋ - 각설하고 사실 html과 css는 크게 볼게 없습니다. - 네모난 박스만 만들면 되기 때문이죠 - 보기만 하시죠 - html입니다. css와 javascript는 외부파일로 불러왔습니다. * { margin: 0; padding: 0; } .wrap { display: flex; justify-content: center; margin-top: 10%; } .ddd { margin: 0, auto; width: 1000px; border: 3px solid #000; t..

- 오늘도 슬라이드 이펙트입니다. - 해야될 것은 오늘은 dot 버튼 대신에 사진을 넣어두고 클릭했을 때 움직이는 것이죠 - 하지만 오늘은 좌표를 움직이는 방식이 아니라 active라는 클라스를 넣어주고 빼주어서 표현하는 방식입니다. // 이미지 저장한 변수 let images = [ "./img/sliderEffect06-min.jpg", "./img/sliderEffect07-min.jpg", "./img/sliderEffect08-min.jpg", "./img/sliderEffect09-min.jpg", "./img/sliderEffect10-min.jpg" ]; let currentIndex = 0; // 현재 보이는 이미지 function imageSlider(parent, images) { /..

- 이번에는 prev/next 버튼을 누르면 이전사진/다음사진으로 넘어가고 밑의 dot버튼을 누르면 해당 차례의 사진으로 넘어가는 스크립트입니다. - 이번에는 javascript으로 나타내 보았습니다. - 스크립트 코드를 같이 보시죠 선택자 - 선택자와 전역변수들을 하나로 모아놨습니다. // 선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); // 이미지가 보이는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); // 이미지가 움직이는 영역 const slider = ..