본문 바로가기

이펙트24

마우스 이펙트 5 Javascript Mouse Effect Mouse 이펙트 중 마우스 커서를 움직이면 중앙의 사진이 움직이는 효과입니다. 원본 사이트 보기 원본 소스 보기 핵심 포인트(진행중) 1. 진행중 HTML html 소스입니다. The way to get started is to quit talking and begin doing. 무언가를 시작하려면 말은 멈추고 행동해야 한다. mousePageX : 0px mousePageY : 0px centerPageX : 0px centerPageY : 0px CSS css 소스입니다. /* MouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-.. 2022. 9. 29.

서치 이펙트 4 서치 이펙트 만들기2 javascript를 이용하여 서치 이펙트를 만들었습니다. 열심히 공부하세요! 서치 이펙트2 원본 소스 보기 자바스크립트 추후 추가 예정 //선택자 const searchBox = document.querySelector(".search__box input"); //검색 영역 const searchList = document.querySelectorAll(".search__list ul li"); //목록 리스트 const searchInfo = document.querySelector(".search__info .num") //전체 갯수 //속성 갯수 설정하기 // for(let i=1; i { const searchWord = searchBox.value; //사용자가 입력한 키.. 2022. 9. 29.

마우스 이펙트 4. 움직이는 그림 Javascript Mouse Effect Mouse 이펙트 중 마우스 커서를 움직이면 중앙의 사진이 움직이는 효과입니다. 원본 사이트 보기 원본 소스 보기 핵심 포인트(진행중) 1. 진행중 HTML html 소스입니다. The way to get started is to quit talking and begin doing. 무언가를 시작하려면 말은 멈추고 행동해야 한다. mousePageX : 0px mousePageY : 0px centerPageX : 0px centerPageY : 0px CSS css 소스입니다. /* MouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-.. 2022. 9. 23.

마우스 이펙트 3. 조명 효과(진행중) Javascript Mouse Effect Mouse 이펙트 중 마우스 커서를 움직이면 원 안에 숨겨진 사진이 보이는 효과입니다. 원본 사이트 보기 원본 소스 보기 핵심 포인트(진행중) 1. 진행중 HTML html 소스입니다. Seize the day! 오늘을 즐기세요! CSS css 소스입니다. /* MouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; overflow: hidden; /* cursor: none; */ } .mouse__wrap p { font-size: 2vw; .. 2022. 9. 22.

패럴랙스 이펙트 5. 이질감 효과 (진행중) Javascript Parallax Effect parallax 이펙트 중 스크롤을 내리면 이미지와 텍스트가 움직여 이질적인 효과를 줍니다. 원본 사이트 보기 원본 소스 보기 핵심 포인트(진행중) HTML과 CSS코드에는 큰 차이가 없습니다. js코드를 중심으로 해설하겠습니다. 1. 진행중 HTML html 소스입니다. 01 section1 글에 위인의 초상화가 있고 위인의 이름이 쓰여있다고 해서, 인터넷에서 본 말을 아무거나 믿지 말라. 02 section02 비록 내일 지구의 종말이 온다 하더라도 나는 오늘 한 그루의 사과나무를 심겠다. 03 section03 그들이 죽음을 두려워하는 것이 이상합니다. 삶이 죽음보다 훨씬 더 아프다. 04 section04 모든 것이 변한다는 것을 깨달으면 붙잡으려 .. 2022. 9. 20.

슬라이드 이펙트 4. 버튼 눌러 넘기기 Javascript Slider Effect Slider 이펙트 중 버튼을 눌러 이미지를 옆으로 넘기는 효과입니다. 원본 사이트 보기 원본 소스 보기 HTML html 소스입니다. prev next CSS 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::before { position: absolute; left: 5px; to.. 2022. 9. 19.

마우스 이펙트 2. 마우스 따라다니기 (GSAP) Javascript Mouse Effect Mouse 이펙트 중 GSAP을 이용한 마우스 따라다니기 효과입니다. 원본 사이트 보기 원본 소스 보기 HTML html 소스입니다. 멋있는 명언hoc quoque transibit멋있는 명언 멋있는 명언이 또한 지나가리라.멋있는 명언 CSS css 소스입니다. /* MouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; overflow: hidden; cursor: none; } .mouse__wrap p { font-size: 2vw; lin.. 2022. 9. 19.

패럴랙스 이펙트 4. 내용 나타나기 Javascript parallax Effect parallax 이펙트 중 내용 나타내기 유형입니다. 원본 사이트 보기 원본 소스 보기 HTML html 소스입니다. 01 section1 글에 위인의 초상화가 있고 위인의 이름이 쓰여있다고 해서, 인터넷에서 본 말을 아무거나 믿지 말라. 02 section02 비록 내일 지구의 종말이 온다 하더라도 나는 오늘 한 그루의 사과나무를 심겠다. 03 section03 그들이 죽음을 두려워하는 것이 이상합니다. 삶이 죽음보다 훨씬 더 아프다. 04 section04 모든 것이 변한다는 것을 깨달으면 붙잡으려 할 것이 없다. 05 section05 어떤 생각을 받아들이지 않고 즐겁게 할 수 있는 것은 교양 있는 정신의 표징이다. 06 section06 철학은 언제.. 2022. 9. 19.

패럴랙스 이펙트 3. 메뉴 나타나기 / 탑버튼 Javascript parallax Effect parallax 이펙트 중 숨김 메뉴/탑버튼 유형입니다. 원본 사이트 보기 원본 소스 보기 HTML html 소스입니다. 01 section1 글에 위인의 초상화가 있고 위인의 이름이 쓰여있다고 해서, 인터넷에서 본 말을 아무거나 믿지 말라. 02 section02 비록 내일 지구의 종말이 온다 하더라도 나는 오늘 한 그루의 사과나무를 심겠다. 03 section03 그들이 죽음을 두려워하는 것이 이상합니다. 삶이 죽음보다 훨씬 더 아프다. 04 section04 모든 것이 변한다는 것을 깨달으면 붙잡으려 할 것이 없다. 05 section05 어떤 생각을 받아들이지 않고 즐겁게 할 수 있는 것은 교양 있는 정신의 표징이다. 06 section06 철학은 .. 2022. 9. 19.

패럴럭스 이펙트 - 02. 사이드 메뉴 패럴랙스 이펙트 2 - 사이드 메뉴> 원본 사이트 보기 원본 소스 보기 패럴렉스 이펙트 사이드 메뉴 스크롤을 움직였을 때 사이드에 있는 점 모양의 메뉴에 변화가 생깁니다. 스크롤의 위치가 해당 섹션에 위치/사이드 메뉴의 점을 클릭하면 해당 섹션에 대응하는 사이드 메뉴의 점이 활성화됩니다. html 소스입니다 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 글에 위인의 초상화가 있고 위인의 이름이 쓰여있다고 해서, 인터넷에서 본 말을 아무거나 믿지 말라. 02 section02 비록 내일 지구의 종말이 온다 하더라도 나는 오늘 한 그루의 사과나무를 심겠다. 03 section03 그들이 죽음을 두려워하는 것이 이상합니다. 삶이 죽음보다 훨씬 더 아프다. 04 secti.. 2022. 9. 13.

패럴렉스 이펙트 - 1. 메뉴 이동 Javascript parallax Effect parallax 이펙트 입니다. 원본 사이트 보기 원본 소스 보기 HTML html 소스입니다. Javascript parallaxEffect01 패럴렉스 이펙트- 메뉴 이동 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 글에 위인의 초상화가 있고 위인의 이름이 쓰여있다고 해서, 인터넷에서 본 말을 아무거나 믿지 말라. 02 section02 비록 내일 지구의 종말이 온다 하더라도 나는 오늘 한 그루의 사과나무를 심겠다. 03 section03 그들이 죽음을 두려워하는 것이 이상합니다. 삶이 죽음보다 훨씬 더 아프다. 04 section04 모든 것이 변한다는 것을 깨달으면 붙잡으려 할 것이 .. 2022. 9. 6.

마우스 이펙트 - 마우스 따라다니기 Javascript mouse Effect MouseEffect중 마우스 따라다니기 입니다. 원본 사이트 보기 원본 소스 보기 HTML html 소스입니다. 멋있는 명언hoc quoque transibit멋있는 명언 멋있는 명언이 또한 지나가리라.멋있는 명언 clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px CSS css 소스입니다. /* MouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direc.. 2022. 9. 6.

03. 슬라이드 이펙트 - 좌로 움직이기 연속 슬라이드 이펙트 03 슬라이드 이펙트 세 번째, 좌로 움직이기(연속적으로) 입니다. 원본 사이트 보기 원본 소스 보기 HTML html 소스입니다. CSS 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::before { position: absolute; left: 5px; top: 5px; background-color: rg.. 2022. 9. 2.

03. 슬라이드 이펙트 - 좌로 움직이기 슬라이드 이펙트 02. 좌로 움직이기 javascript를 이용하여 슬라이드 이펙트를 만들었습니다. 열심히 공부하세요! 슬라이드 이펙트 02 원본 소스 보기 자바스크립트 const sliderInner = document.querySelector(".slider__inner"); //움직이는 영역 const slider = document.querySelectorAll(".slider"); //이미지 let currentIndex = 0; sliderInner.style.transition = "all 0.6s"; setInterval(() => { currentIndex = (currentIndex + 1) % slider.length; sliderInner.style.transform = "trans.. 2022. 8. 29.

03. 슬라이드 이펙트 - 트랜지션 효과 슬라이드 이펙트 01. 트랜지션 효과 javascript를 이용하여 슬라이드 이펙트를 만들었습니다. 열심히 공부하세요! 슬라이드 이펙트 01 원본 소스 보기 자바스크립트 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); const slider = sliderWrap.querySelectorAll(".slider"); let currentIndex = 0; //현재 보이는 이미지 변수 let sliderCount = slider.length; //이미지 갯수 setInterval(() => { let nextIndex = (currentInde.. 2022. 8. 29.

퀴즈 이펙트 객관식 여러 문제 2 객관식 여러문제 원본 소스 보기 자바스크립트 //문제정보 const quizInfo = [ { answerType : "웹디자인기능사 2011년 04회", answerNum : "1", answerAsk : "디자인의 합목적성에 대한 설명으로 옳은 것은?", answerChoice : [ "정해진 바탕으로 최상의 디자인을 창출하는 것을 말한다.", "디자인을 할 때 목적에 맞는 수단을 사용하였는지를 말한다.", "보다 실용적이고 심미적으로 개선, 발전시키는 것을 말한다.", "개성적인 미의식을 창출해내는 것을 말한다." ], answerResult : "디자인을 할 때 목적에 맞는 수단을 사용하였는지를 말한다.", answerEx : "디자인을 할 때 목적에 맞는 수단을 사용하였는지를 말한다." }, {.. 2022. 8. 24.

서치 이펙트 3 서치 이펙트 만들기3 javascript를 이용하여 서치 이펙트를 만들었습니다. 열심히 공부하세요! 서치 이펙트3 원본 소스 보기 자바스크립트 추후 추가 예정 // 선택자 const searchKeyword = document.querySelectorAll(".search__info .keyword span"); // 알파벳 const searchList = document.querySelectorAll(".search__list ul li"); // 목록 리스트 const searchInfo = document.querySelector(".search__info .num"); // 전체 개수 // 전체 개수 구하기 searchInfo.textContent = searchList.length; // CS.. 2022. 8. 23.

2. 서치 이펙트 - 2 서치 이펙트 만들기2 javascript를 이용하여 서치 이펙트를 만들었습니다. 열심히 공부하세요! 서치 이펙트2 원본 소스 보기 자바스크립트 추후 추가 예정 //선택자 const searchBox = document.querySelector(".search__box input"); //검색 영역 const searchList = document.querySelectorAll(".search__list ul li"); //목록 리스트 const searchInfo = document.querySelector(".search__info .num") //전체 갯수 //속성 갯수 설정하기 // for(let i=1; i { const searchWord = searchBox.value; //사용자가 입력한 키.. 2022. 8. 17.

2. 서치 이펙트 -1 서치 이펙트 만들기1 indexOf()를 이용하여 서치 이펙트를 만들었습니다. 열심히 공부하세요! 서치 이펙트1 원본 소스 보기 자바스크립트 //선택자 const searchBox = document.querySelector(".search__box input"); //검색 영역 const searchList = document.querySelectorAll(".search__list ul li"); //목록 리스트 const searchInfo = document.querySelector(".search__info .num") //전체 갯수 구하기 searchInfo.textContent = searchList.length; //검색 영역 searchBox.addEventListener("keyup",.. 2022. 8. 17.

객관식 유형 여러문제 객관식 여러문제 원본 소스 보기 자바스크립트 const quizWrap = document.querySelector(".quiz__wrap"); const quizScore = 0; const quizConfirm = document.querySelector(".quiz__confirm .check") //문제 출력 const updateQuiz = () => { const exam = []; quizInfo.forEach((question, number) => { exam.push(` ${question.answerType} ${question.answerNum}. ${question.answerAsk} 정답입니다! 틀렸습니다! ${question.answerChoice[1]} ${question.an.. 2022. 8. 16.

퀴즈 이펙트 - 객관식 유형 객관식 유형 원본 소스 보기 자바스크립트 1. 선택자를 설정합니다. 2. 문제 정보 데이터를 저장합니다. 2-1. 문제 출력 함수를 설정합니다. 2-1-1. 선택지를 출력합니다. 2-1-2. 문제의 해설을 숨깁니다. 3. 정답을 확인합니다. 3-1. 사용자가 쓴 정답과 문제의 정답이 맞는지 확인해야합니다. 3-2. 사용자가 고른 input 박스를 가져와야 합니다. (※innerText는 문자만을 인식하고 innerHTML은 태그까지 인식합니다.) 4. 정답을 클릭합니다. //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .nu.. 2022. 8. 8.

퀴즈 이펙트 - 주관식 여러 유형 객관식 유형(여러문제) 원본 소스 보기 자바스크립트 1. 선택자를 설정합니다. 2. 문제 정보 데이터를 저장합니다. 2-1. 문제 출력 함수를 설정합니다. 2-1-1. 선택지를 출력합니다. 2-1-2. 문제의 해설을 숨깁니다. 3. 정답을 확인합니다. 3-1. 사용자가 쓴 정답과 문제의 정답이 맞는지 확인해야합니다. 3-2. 사용자가 고른 input 박스를 가져와야 합니다. (※innerText는 문자만을 인식하고 innerHTML은 태그까지 인식합니다.) 4. 정답을 클릭합니다. // const num = [100, 200, 300, 400, 500]; // num.forEach(function(el){ // console.log(el) // document.querySelector(".quiz__wr.. 2022. 8. 6.

퀴즈 이펙트 - 주관식 QUIZ 이펙트 만들기 퀴즈 이펙트로 웹디자인기능사 시험 문제 퀴즈를 만들어보았습니다. 열심히 공부하세요! 주관식 유형(여러문제) 원본 소스 보기 자바스크립트 1. 선택자를 설정합니다. 2. 문제 정보 데이터를 저장합니다. 3. 문제 데이터를 출력합니다. (※innerText는 문자만을 인식하고 innerHTML은 태그까지 인식합니다.) 4. 답을 입력할 때 소문자와 대문자가 상관이 없게 소문자 치환을 해주고 여백도 없애줍니다. ->toLowerCase().trim() 5. 사용자가 정답을 입력하면 정답을 입력하는 칸을 없애고 정답을 보여줍니다. 6. 클래스 like를 추가하여 정답을 확인하면 강아지가 웃는 모습이 보이게 합니다. -> quizDog.classList.add("like"); 7. 정답/오.. 2022. 8. 4.

퀴즈 이펙트 - 정답 확인하기 QUIZ 이펙트 만들기 퀴즈 이펙트로 웹디자인기능사 시험 문제 퀴즈를 만들어보았습니다. 열심히 공부하세요! 정답 확인하기 유형 원본 소스 보기 자바스크립트 1. 선택자를 설정합니다. 2. 문제 정보 데이터를 저장합니다. 3. 문제 데이터를 출력합니다. (※innerText는 문자만을 인식하고 innerHTML은 태그까지 인식합니다.) 4. 정답 버튼을 클릭하기 전까진 답을 확인할 수 없도록 정답을 숨깁니다. -> quizResult.style.display = "none"; 5. 버튼을 클릭하면 숨겨진 정답이 보이게 합니다. ->addEventListener()메서드를 사용하여 버튼을 클릭했을 때 함수를 실행하게 합니다. (※addEventListener()는 특정 이벤트가 발생되었을 때, 특정 함수를 .. 2022. 8. 4.

이전 1 다음

728x90

HTML

자세히보기

CSS

자세히보기

JAVASCRIPT

자세히보기

티스토리툴바