자바스크립트 응용하기3 [자바스크립트 응용] 페럴렉스 효과01 / 스크롤변화에 따른 효과 적용하기 패럴랙스 효과 01 페럴랙스 효과에 대해서 알아보겠습니다. 패럴랙스 스크롤링은 사용자가 마우스를 스크롤할 때, 원거리에 있는 배경 이미지는 느리게 움직이게 하고, 근거리에 있는 사물 이미지는 빠르게 움직이도록 함으로써 입체감을 느낄 수 있게 만든 디자인 기법입니다. 그렇기때문에 자바스크립트의 스크롤 관련 메서드에 대해서 잘 알아야 사용할 수 있는 효과입니다. 요약하자면 스크롤변경에 따른 행동(?)을 조정하는 효과입니다. 원본 소스 보기 원본 사이트 ▶ 각 섹션의 offset값을 구해준뒤 만들어 놓은 offset__info에 넣어줍니다. '현재 스크롤값 >= 각 섹션의 offset값' 일때 메뉴바에 active클래스를 추가해서 현재메뉴가 표시되게 해주고, 나머지 메뉴바는 active를 제거하여 활성화된 액.. 2022. 9. 12. 퀴즈 만들기06 / 객관식 다중형(슬라이드) 퀴즈 만들기_객관식 유형(슬라이드) 이번시간에는 객관식 유형(다중형)을 만들어보겠습니다! 이번엔 60문항이나 만들어야 하는데 일일히 html태그로 입력하기는 번거로우므로 스크립트를 잘~ 이용해서 작업해보겠습니다. 원본 소스 보기 원본 사이트 HTML 소스 문제 안의 변하는 내용들은 가변하는 값이지만 기본틀은 변함없으므로 html에서 필요한 부분(기본틀에 해당하는 요소들)만 작성합니다. 무엇이 빠지는 건지는 주석처리로 해놨으니 주석표시를 보시면서 확인해 주세요! 정답🐾 오답 입니다! 다음 문제 ≫ JAVASCRIPT 소스 if(quizInfo.length -1 == quizCount){ quizConfirm.innerHTML = "총 " + quizInfo.length +"문제 중 " + answerCou.. 2022. 8. 24. 퀴즈 만들기05/ 객관식 다중형 퀴즈 만들기_객관식 유형(다중) 이번시간에는 객관식 유형(다중형)을 만들어보겠습니다! 이번엔 60문항이나 만들어야 하는데 일일히 html태그로 입력하기는 번거로우므로 스크립트를 잘~ 이용해서 작업해보겠습니다. 원본 소스 보기 원본 사이트 HTML 소스 js를 이용해서 quiz__wrap안에 기존의 소스들을 반복해서 넣어주기 위해 안의 내용들은 제거합니다. JAVASCRIPT 소스 exam.push(``) quizWrap.innerHTML = exam.join(''); const exam = []으로 배열형식으로 exam을 지정했습니다. push()메서드는 값을 배열로 넣어주는 메서드인데요. 배열로 값이 들어가는 특성때문에 ,(쉼표)로 각각 구분이 됩니다. 그래서 저희가 원하는 기존의 소스형식대로 들어갈 .. 2022. 8. 24. 이전 1 다음 반응형
