Effect29 게임 이펙트 01 게임 이펙트 01 원본 페이지 보기 원본 소스 보기 script 코드 // 마우스 const cursor = document.querySelector(".cursor"); window.addEventListener("mousemove", (e) => { cursor.style.left = e.clientX + "px"; //단위 꼭 붙여주기 cursor.style.top = e.clientY + "px"; }); //시계 (두자리수로 나타나게 하기...) function printTime() { const clock = document.querySelector(".time"); const now = new Date(); // clock.innerText = now; let hr = now.getHours.. 2022. 10. 14. 슬라이드 이펙트 05 슬라이드 이펙트05 이미지 슬라이드 (버튼, 닷메뉴) 원본 소스 보기 원본 페이지 보기 HTML prev next CSS /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지 보이는 영역 */ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /* 이미지를 감싸고 있는 부모 : 움직이는 부분 */ display: flex; flex-wrap: wrap; width: 4800px; /*총 이미지 6개 */ .. 2022. 10. 14. 서치 이펙트 07 서치 이펙트 원본 페이지 보기 원본 소스 보기 script 코드 document.querySelector(".search__info span").innerHTML = cssProperty.length; const searchTime = document.querySelector(".time span"); const seaechList = document.querySelector(".search__list"); const searchAnswers = document.querySelector(".search__answers"); const seaechMissAnswers = document.querySelector(".search__missAnswers"); const searchStart = document.. 2022. 10. 14. 서치 이펙트 06 서치 이펙트 원본 페이지 보기 원본 소스 보기 script 코드 const cssList = document.querySelector(".search__list .line"); const cssProp = []; // 데이터 출력하기 const updateList = () => { let listCSS = ""; cssProperty.forEach((data, index) => { listCSS += `${data.num}. ${data.name} : ${data.desc}`; cssProp.push(`${data.num}. ${data.name} : ${data.desc}`); }); cssList.innerHTML = listCSS; } updateList(); // 반대로 정렬 function so.. 2022. 10. 14. 패럴렉스 이펙트 07 패럴랙스 이펙트 - 리빌 효과 원본 페이지 보기 원본 소스 보기 script 코드 function scroll() { let scrollTop = window.scrollY; const reveal = document.querySelectorAll(".reveal"); reveal.forEach(el => { let revealOffset = el.offsetTop + el.parentElement.offsetTop; let revealDelay = el.dataset.delay; // if (scrollTop > revealOffset - window.innerHeight) { // el.classList.add("show"); // } if (scrollTop >= revealOffset - wind.. 2022. 10. 10. 패럴렉스 이펙트 06 패럴랙스 이펙트 - 텍스트 효과 원본 페이지 보기 원본 소스 보기 script 코드 //글씨 쪼개기 // let text = document.querySelector("#section01 .content__item__desc"); // let splitText = text.innerText; // let splitWrap = splitText.split('').join('''); // text.innerHTML = splitWrap = "'" + splitWrap + "'"; // 글씨 쪼개기(다중이) document.querySelectorAll(".split").forEach(text => { let splitText = text.innerText; let splitWrap = splitText.sp.. 2022. 10. 7. 마우스 이펙트 05 마우스 이펙트 05 기울기 효과 / 글씨 반전효과 원본 소스 보기 원본 사이트 보기 script 코드 const mouseMove = (e) => { // 마우스 좌표값 let mousePageX = e.pageX; let mousePageY = e.pageY; // 마우스 좌표 기준점 가운데로 변경 let centerPageX = window.innerWidth / 2 - mousePageX; let centerPageY = window.innerHeight / 2 - mousePageY; // 최소값은 -100 최대값은 100설정 ** let maxPageX = Math.max(-200, Math.min(200, centerPageX)); let maxPageY = Math.max(-200, Math.. 2022. 9. 28. 마우스 이펙트 04 마우스 이펙트 04 - 이미지 효과 원본 소스 보기 원본 사이트 보기 script 코드 const cursor = document.querySelector(".mouse__cursor"); const cursorRect = cursor.getBoundingClientRect(); document.querySelector('.mouse__wrap figure').addEventListener("mousemove", (e) => { // 커서 gsap.to(cursor, { duration: .5, left: e.pageX - cursorRect.width / 2, top: e.pageY - cursorRect.height / 2, }); // 마우스좌표 값 let mousePageX = e.pageX; l.. 2022. 9. 22. 마우스 이펙트 03 마우스 이펙트 03 - 조명 효과 원본 소스 보기 원본 사이트 보기 script 코드 const cursor = document.querySelector('.mouse__cursor') // const circleW = cursor.offsetWidth //200 // const circleH = cursor.offsetHeight //200 // const circle2 = cursor.clientWidth //190 : 보더값 제외 const circle = cursor.getBoundingClientRect() console.log(circle) // const DOMRect = { // x: 0, // y: 0, // bottom: 200, // height: 200, // left: 0, // .. 2022. 9. 22. 퍼럴랙스 이펙트 05 패럴랙스 이펙트 05 - 이질감 효과 원본 페이지 보기 원본 소스 보기 script 코드 스크롤바 컴퓨터마다 안되는게 있을수 있으니 3개를 적어줍니다. let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop; function scroll(){ let scrollTop = window.pageXOffset || document.documentElement.scrollTop || window.screenY; document.querySelector("#parallax__info span").innerText = Math.ceil(scrollTop); document.querySelectorAll(".c.. 2022. 9. 20. 슬라이드 이펙트 04 슬라이드 이펙트04 이번 이미지는 자동 슬라이드가 아닌 버튼을 클릭하는 구조입니다. 원본 소스 보기 원본 페이지 보기 HTML prev next CSS /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지 보이는 영역 */ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /* 이미지를 감싸고 있는 부모 : 움직이는 부분 */ display: flex; flex-wrap: wrap; width: 4800p.. 2022. 9. 19. 마우스 이펙트 02 마우스 이펙트02 마우스의 위치값 표시 , 특정 글자에 갖대 대면 애니메이션 이 나온다. 원본 소스 보기 원본 페이지 보기 HTML <section id="mouseType"> <div class="mouse__cursor"></div> <div class="mouse__wrap"> <p>The <span class="style1">future</span> <span class="style2">depends</span> on What we do in the<span class="style3"> present.</span> </p> <p><span class="style4">미래</span>는 현재 .. 2022. 9. 19. 퍼럴랙스 이펙트 04 패럴랙스 04 원본 페이지 보기 원본 소스 보기 스크롤바 컴퓨터마다 안되는게 있을수 있으니 3개를 적어줍니다. let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop; script 코드 // 재귀함수 function scroll() { let scrollTop = window.pageXOffset || document.documentElement.scrollTop || window.screenY; document.querySelectorAll(".content__item").forEach(item => { if (scrollTop > item.offsetTop - window.innerHeight .. 2022. 9. 19. 퍼럴랙스 이펙트 03 패럴랙스 03 원본 페이지 보기 원본 소스 보기 스크롤바 컴퓨터마다 안되는게 있을수 있으니 3개를 적어줍니다. let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop; script 코드 // 0 보다 크면 메뉴바가 내려옴 if (scrollTop > 0) { document.querySelector("#parallax__nav").classList.add("show") } else { document.querySelector("#parallax__nav").classList.remove("show") } document.querySelector("#parallax__info span").innerT.. 2022. 9. 12. 퍼럴랙스 이펙트 02 패럴랙스 02 원본 페이지 보기 원본 소스 보기 스크롤바 컴퓨터마다 안되는게 있을수 있으니 3개를 적어줍니다. let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop; script코드 //preventDefault a링크를 차단시켜줌 document.querySelectorAll("#parallax__dot a").forEach(el => { el.addEventListener("click", e => { e.preventDefault(); document.querySelector(el.getAttribute("href")).scrollIntoView({ behavior: "smooth" }); }.. 2022. 9. 12. 퍼럴랙스 이펙트 01 패럴랙스 01 원본 페이지 보기 원본 소스 보기 Java 스크롤바 컴퓨터마다 안되는게 있을수 있으니 3개를 적어줍니다. let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop; 메뉴 이펙트 주기 // for문 for (let i = 1; i <= 9; i++) { if (scrollTop >= document.getElementById("section" +i).offsetTop) { document.querySelectorAll("#parallax__nav li").forEach(li => { li.classList.remove("active") }); document.querySelector(.. 2022. 9. 6. 마우스 이펙트 01 마우스 이펙트01 마우스의 위치값 표시 , 특정 글자에 갖대 대면 애니메이션? 이 나온다. 원본 소스 보기 원본 페이지 보기 HTML <section id="mouseType"> <div class="mouse__cursor"></div> <div class="mouse__wrap"> <p>The <span class="style1">future</span> <span class="style2">depends</span> on What we do in the<span class="style3"> present.</span> </p> <p><span class="style4">미래</span>는 현재.. 2022. 9. 5. 슬라이드 이펙트 03 슬라이드 이펙트03 원본 소스 보기 원본 페이지 보기 HTML <section id="sliderType01"> <div class="slider__wrap"> <div class="slider__img"> <div class="slider__inner"> <div class="slider"><img src="../assets/img3/effect_bg11-min.jpg" alt="이미지"></div> <div class="slider"><img src="../assets/img3/effect_bg12-min.jpg" alt="이미지"></div> <div class="slider"><img src="../assets/im.. 2022. 9. 1. 슬라이드 이펙트 02 슬라이드 이펙트02 5개의 이미지가 가로로 정렬되어 있다. 1 2 3 4 0 1 2 3 4 0 ... 반복 원본 소스 보기 원본 페이지 보기 HTML <main id="main"> <section id="sliderType01"> <div class="slider__wrap"> <div class="slider__img"> <div class="slider"><img src="../assets/img3/effect_bg11-min.jpg" alt="이미지"></div> <div class="slider"><img src="../assets/img3/effect_bg12-min.jpg" alt="이미지"></div> <div cla.. 2022. 8. 29. 슬라이드 이펙트01 슬라이드 이펙트01 트랜지션 효과 원본 소스 보기 원본 페이지 보기 HTML <main id="main"> <section id="sliderType01"> <div class="slider__wrap"> <div class="slider__img"> <div class="slider"><img src="../assets/img3/effect_bg11-min.jpg" alt="이미지"></div> <div class="slider"><img src="../assets/img3/effect_bg12-min.jpg" alt="이미지"></div> <div class="slider"><img src="../assets/img3/.. 2022. 8. 29. Quiz 06 quiz06 답을 누르면 설명과 함께 다음 문제 보기 박스? 가 나오는 구조이다. 누르면 다음 문제로 넘어간다. 마지막 문제에서는 총 갯수가 나온다. 선택자 // 선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 타입 const quizQuestion = document.querySelector(".quiz__question"); //문제번호, const quizSelects = document.querySelector(".quiz__selects"); //객관식 보기 const quizResult = document.querySelector(".quiz__answer .result") //해설 const quizConfirm = docu.. 2022. 8. 24. Quiz 05 quiz05 문제를 맞추면 갯수가 나오는 구조이다. const quizWrap = document.querySelector(".quiz__wrap"); let quizScore = ""; const updateQuiz = () => { const exam = []; quizInfo.forEach((question, number) => { exam.push(` <div class="quiz"> <pan class="quiz__type">${question.answerType}</span> <h2 class="quiz__question"> <span class="number">${question.ansWerNum}</span> <div class="ask">${question.ans.. 2022. 8. 24. search 03 search03 CSS 의 속성들이 있는 구조이다. 이번에는 검색창을 없애고 [a-z] 클릭?창을 만들었다. 클릭하면 설명창과 갯수가 나오는 구조이다. 원본 소스 보기 HTML <div class="ketword"> <div class="search__info"> <div class="ketword"> <span>a</span> <span>b</span> <span>c</span> <span>d</span> <span>e</span> <span>f</span> <span>g</span> <span>h</span> <span>i</span> <span>j</span> <span>k</span> <span>l</.. 2022. 8. 22. search 02 search02 CSS 의 속성들이 있는 구조이다. 검색하고 지우면 목록이 없어진다. 원본 소스 보기 HTML <div class="search__wrap"> <span>inclides()를 이용하여 CSS 속성 검색하기</span> <h1>CSS 태그 검색하기</h1> <div class="search__box"> <label for="search">검색하기</label> <input type="text" id="search" placeholder="CSS 속성 및 유형을 입력해 주세요."> </div> <div class="search__info"> <div class="type">플렉스, 애니메이션, 백그라운드, 기타 등등 유형 별로 검색해보세요.</d.. 2022. 8. 18. search 01 quiz01 html, css, javascript 의 속성들을 써서 누르면 각 속성들이 나오는 구조이다. 원본 소스 보기 HTML < main id="main"> <div class="search__wrap"> <span>indexOf()를 이용하여 CSS 속성 검색하기 <h1>HTML 태그 검색하기 <div class="search__box"> <label for="search">검색하기</label> <input type="text" id="search" placeholder="HTML 테그를 입력해 주세요."> </div> <div class="search__list"> <div class="html"> <ul> <li data-name="a"><.. 2022. 8. 16. quiz04 quiz04 문제의 답가 4개가 있는 객관식 구조이다. ●답가 4개 여서 quiz__answer 밑에 quiz__selects 추가한다. <div class="quiz__selects"></div> <div class="quiz__selects"> <label for="select1"> <input type="radio" id="select1" class="select" name="select" value="1"> <span class="choice"></span> </label> <label> <input type="radio" id="select2" class="select" name="select" value="2"> <span class="choice">&l.. 2022. 8. 8. quiz 03 quiz03 4문제가 있는 구조이다. 선택자 quiz 문제가 여러개면 querySelector뒤에 All을 붙여야한다. const quizType = document.querySelectorAll(".quiz__type"); //퀴즈종류 const quizNumber = document.querySelectorAll(".quiz__question .number"); //퀴즈번호 const quizAsk = document.querySelectorAll(".quiz__question .ask"); //퀴즈 질문 const quizConfirm = document.querySelectorAll(".quiz__answer .confirm"); //정답확인버튼 const quizResult = document... 2022. 8. 5. quiz 02 quiz 02 정답을 적어서 맞으면 "맞았습니다!" 정답이 틀리면 "틀렸습니다!" 선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈종류 const quizNum = document.querySelector(".quiz__question .number "); //퀴즈번호 const quizask = document.querySelector(".quiz__question .ask"); //퀴즈 질문 const quizconfirm = document.querySelector(".quiz__answer .confirm"); //정답확인버튼 const quizResult = document.querySelector(".quiz__answer .R.. 2022. 8. 4. quiz01 quiz01 정답 확인 버튼을 누르면 답이 나오는 구조이다. 선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈종류 const quizNum = document.querySelector(".quiz__question .number "); //퀴즈번호 const quizask = document.querySelector(".quiz__question .ask"); //퀴즈 질문 const quizconfirm = document.querySelector(".quiz__answer .confirm"); //정답확인버튼 const quizResult = document.querySelector(".quiz__answer .Result"); //정.. 2022. 8. 4. 이전 1 다음
