본문 바로가기

728x90

Javascript/Effect21

슬라이더 이펙트 06 ⭐️ slider Effect 슬라이더 효과 06 ⭐️ 01. HTML 이미지1 이미지2 이미지3 이미지4 이미지5 prev next 02. CSS /* slider */ * { margin: 0; padding: 0; box-sizing: border-box; } .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보여지는 영역 */ position: relative; width: 800px; height: 500px; overflow: hidden; } .slider__inner { /* 이미지를 감싸고 있는 부모 : 움직.. 2022. 10. 21.

검색 효과 07. 검색 기능을 활용한 게임 만들기 ⭐️ search Effect 검색 효과 07 : 검색 규칙을 활용한 게임 만들기 ⭐️ 01. HTML BGM: The ventures - hawaii five-0 CSS 속성 검색 이벤트 CSS 속성명 암기 게임 CSS 속성 이름을 입력하면 점수가 올라갑니다. START 버튼을 누르면 게임 시작입니다. 화이팅😃 2:00 검색하기 START 전체 속성 갯수 : 0 맞춘 갯수 : 0 The End RESTART 02. CSS @import url('https://webfontworld.github.io/vitro/VitroPride.css'); @import url('https://webfontworld.github.io/vitro/VitroCore.css'); @import ur.. 2022. 10. 21.

Game Effect 게임 효과 01 : jquery 이미지 드래그 / JS 날짜와 시간 & 운영체제와 화면크기 정보 구현 ⭐️ Game Effect 게임 효과 01 : jquery 이미지 드래그 / JS 날짜와 시간 & 운영체제와 화면크기 정보 구현 ⭐️ 01. jquery 를 사용하여 이미지 드래그 효과 구현하기 🧊 jquery 사이트에서 드래그 효과의 주소를 가져와 script 에 넣어줍니다. 🧊 마우스 커서 모양을 따로 설정해주었다면, 이미지를 드래그할 때도 모양이 유지되도록 script 에 함수를 추가해줍니다. [1] 드래그 효과 - jquery 주소 넣기 [2] 마우스 커서 모양 유지를 위한 함수 추가하기 $( ".삽입한 이미지 클래스명" ).draggable({ drag: function(){ $(".마우스 커서 클래스명").style }, }); $( ".icon" ).draggable({ drag: funct.. 2022. 10. 20.

마우스 이펙트 01 : transform & transition 효과 ⭐️ 마우스 이펙트 01 : transform & transition 효과 ⭐️ 01. 마우스 효과 만들어보기 : 목표 🧊 정해진 글자 위에서 마우스 커서의 형태가 변형되는 효과를 나타내봅니다. 🧊 커서 모양 변형 효과의 속도를 조절해 봅니다. [1] 커서 모양 div 만들고 문장 작성하기 (html) section 태그를 만들고, css 와 script 의 경로 설정을 위해 id 및 class로 이름을 정합니다. 문장에서 정해진 글자 위에 커서를 올렸을 때, 커서의 형태가 변형되도록 하기 위해 span 태그로 글자를 감싸줍니다. span 태그의 css와 script 의 경로 설정을 위해 class = style($num) 로 이름을 지어줍니다. ___ 참고하기 ___ `1 a href 에 class =.. 2022. 9. 23.

Parallax Scrolling 패럴랙스 스크롤링 05 : 부드러운 이동 & 요소의 이질감 효과 & 하단 top 버튼 숨김 ⭐️ Parallax Scrolling 패럴랙스 스크롤링 05 : 부드러운 이동 & 요소의 이질감 효과 & 하단 top 버튼 숨김 ⭐️ 01. Parallax Scrolling 패럴랙스(Parallax)란 '시차'를 뜻하는 단어로, 멀리 있는 물체는 천천히 움직이고 가까이 있는 물체는 빠르게 움직이는 현상을 의미합니다. 패럴랙스 스크롤링 (Parallax Scrolling) 기술은 배경 또는 오브젝트의 레이어화, 스크롤과 애니메이션의 속도 조절을 통해 깊이에 대한 착시를 보여주는 기술 입니다. 이 기술은 한 페이지로 구성할 수 있으며, 시각적인 몰입감을 주고 효과적인 스토리텔링을 가능하게 하는 장점이 있습니다. 다만 내용이 너무 길 경우에는 사용자가 지루함이나 불편함을 느낄 수 있고, 화면 구성이 복잡해.. 2022. 9. 23.

Parallax Scrolling 패럴랙스 스크롤링 04 : 상단 숨김 메뉴 active & 하단 top 숨김 버튼 & 부드러운 이동 & 요소 개별적으로 나타내기 ⭐️ Parallax Scrolling 패럴랙스 스크롤링 04 : 상단 숨김 메뉴 active & 하단 top 숨김 버튼 & 부드러운 이동 & 요소 개별적으로 나타내기 ⭐️ 01. Parallax Scrolling 패럴랙스(Parallax)란 '시차'를 뜻하는 단어로, 멀리 있는 물체는 천천히 움직이고 가까이 있는 물체는 빠르게 움직이는 현상을 의미합니다. 패럴랙스 스크롤링 (Parallax Scrolling) 기술은 배경 또는 오브젝트의 레이어화, 스크롤과 애니메이션의 속도 조절을 통해 깊이에 대한 착시를 보여주는 기술 입니다. 이 기술은 한 페이지로 구성할 수 있으며, 시각적인 몰입감을 주고 효과적인 스토리텔링을 가능하게 하는 장점이 있습니다. 다만 내용이 너무 길 경우에는 사용자가 지루함이나 불편함.. 2022. 9. 23.

Parallax Scrolling 패럴랙스 스크롤링 03 : 상단 숨김 메뉴 active & 하단 top 숨김 버튼 & 부드러운 이동 ⭐️ Parallax Scrolling 패럴랙스 스크롤링 03 : 상단 숨김 메뉴 active & 하단 top 숨김 버튼 & 부드러운 이동 ⭐️ 01. Parallax Scrolling 패럴랙스(Parallax)란 '시차'를 뜻하는 단어로, 멀리 있는 물체는 천천히 움직이고 가까이 있는 물체는 빠르게 움직이는 현상을 의미합니다. 패럴랙스 스크롤링 (Parallax Scrolling) 기술은 배경 또는 오브젝트의 레이어화, 스크롤과 애니메이션의 속도 조절을 통해 깊이에 대한 착시를 보여주는 기술 입니다. 이 기술은 한 페이지로 구성할 수 있으며, 시각적인 몰입감을 주고 효과적인 스토리텔링을 가능하게 하는 장점이 있습니다. 다만 내용이 너무 길 경우에는 사용자가 지루함이나 불편함을 느낄 수 있고, 화면 구성.. 2022. 9. 14.

Parallax Scrolling 패럴랙스 스크롤링 02 : 사이드 dot 메뉴 active & 부드럽게 이동되는 효과 ⭐️ Parallax Scrolling 패럴랙스 스크롤링 02 : 사이드 dot 메뉴 active & 부드럽게 이동되는 효과 ⭐️ 01. Parallax Scrolling 패럴랙스(Parallax)란 '시차'를 뜻하는 단어로, 멀리 있는 물체는 천천히 움직이고 가까이 있는 물체는 빠르게 움직이는 현상을 의미합니다. 패럴랙스 스크롤링 (Parallax Scrolling) 기술은 배경 또는 오브젝트의 레이어화, 스크롤과 애니메이션의 속도 조절을 통해 깊이에 대한 착시를 보여주는 기술 입니다. 이 기술은 한 페이지로 구성할 수 있으며, 시각적인 몰입감을 주고 효과적인 스토리텔링을 가능하게 하는 장점이 있습니다. 다만 내용이 너무 길 경우에는 사용자가 지루함이나 불편함을 느낄 수 있고, 화면 구성이 복잡해지며 .. 2022. 9. 14.

Parallax Scrolling 패럴랙스 스크롤링 01 : 상단 메뉴 active & 부드럽게 이동되는 효과 ⭐️ Parallax Scrolling 패럴랙스 스크롤링 01 : 상단 메뉴 active & 부드럽게 이동되는 효과 ⭐️ 01. Parallax Scrolling 패럴랙스(Parallax)란 '시차'를 뜻하는 단어로, 멀리 있는 물체는 천천히 움직이고 가까이 있는 물체는 빠르게 움직이는 현상을 의미합니다. 패럴랙스 스크롤링 (Parallax Scrolling) 기술은 배경 또는 오브젝트의 레이어화, 스크롤과 애니메이션의 속도 조절을 통해 깊이에 대한 착시를 보여주는 기술 입니다. 이 기술은 한 페이지로 구성할 수 있으며, 시각적인 몰입감을 주고 효과적인 스토리텔링을 가능하게 하는 장점이 있습니다. 다만 내용이 너무 길 경우에는 사용자가 지루함이나 불편함을 느낄 수 있고, 화면 구성이 복잡해지며 많은 리소.. 2022. 9. 14.

슬라이드 이펙트 (3) ⭐️ 슬라이드 이펙트 03 ⭐️ 01. 에 작성하기 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = document.querySelector(".slider__inner"); // 움직이는 영역 const slider = document.querySelectorAll(".slider"); // 이미지들 let currentIndex = 0; // 현재 보이는 이미지 let sliderCount = slider.length; // 이미지 갯수 let sliderWidth .. 2022. 9. 2.

슬라이드 이펙트 (2) ⭐️ 슬라이드 이펙트 02 ⭐️ 01. 에 작성하기 const sliderImg = document.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = document.querySelector(".slider__inner"); // 움직이는 영역 const slider = document.querySelectorAll(".slider"); // 이미지 let currentIndex = 0; // 현재 보이는 이미지 let sliderCount = slider.length; // 이미지 갯수 sliderInner.style.transition = "all 0.6s" // 부드럽게 넘어가도록 애니메이션 주기 // sliderInn.. 2022. 8. 29.

슬라이드 이펙트 (1) ⭐️ 슬라이드 이펙트 01 ⭐️ 01. 에 작성하기 // 가운데 이미지 슬라이드 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); // sliderWrap 안에서 찾으라고 document 대신에 sliderWrap 을 적어줌 const slider = sliderWrap.querySelectorAll(".slider"); let currentIndex = 0; // 현재 보이는 이미지 let sliderCount = slider.length; // 이미지 갯수 setInterval(() => { // console.log(.. 2022. 8. 29.

퀴즈 만들기 (6) 객관식 슬라이드 유형 ⭐️ 객관식 다수 문항 (정답 갯수 / 합격 여부 확인) ⭐️ 01. 만드는 순서 1) 출력할 내용이 들어있는 요소 선택하기 2) 질문과 정답 내용, 필요한 값 입력하기 3) 질문 내용 출력하기 4) 정답 내용 숨겨놓기 5) 정답 확인 및 결과값 설정하기 6) 정답 버튼의 동작 설정하기 02. 에 작성하기 // 문제 정보 const quizInfo = [ { answerType: "웹 디자인 기능사 (2014년 01회)", answerNum: "1", answerAsk: "다음의 디자인 원리 중 리듬에 해당되지 않는 것은?", answerChoice: [ "점이", "강조", "균일", "점증", ], answerResult: "균일", answerEx: "균일 // '리듬(율동)'은.. 2022. 8. 25.

search Effect (3) ⭐️ 키워드 만들기 ⭐️ 01. 에 작성하기 // 선택자 const searchKeyword = document.querySelectorAll(".search__info .keyword span"); // 알파벳 키워드 const searchList = document.querySelectorAll(".search__list ul li") // 목록 리스트 const searchInfo = document.querySelector(".search__info .num") // 전체 갯수 const searchInfo2 = document.querySelector(".search__info .num2"); // 찾은 갯수 // 찾은 갯수 설정하기 searchInfo.textContent .. 2022. 8. 23.

search Effect (2) ⭐️ 검색창 만들기 ⭐️ 01. 에 작성하기 //선택자 const searchBox = document.querySelector(".search__box input"); // input 박스 , 검색 영역 const searchList = document.querySelectorAll(".search__list ul li") // 목록 리스트 //속성 갯수 설정하기 for(i=1; i { el.classList.add("show") }); // searchBox.addEventListener("keyup", () => { const searchWord = searchBox.value; // 사용자가 입력한 키워드 searchList.forEach(el => { const cssName.. 2022. 8. 18.

search Effect (1) ⭐️ 검색창 만들기 ⭐️ 01. 에 작성하기 //선택자 const searchBox = document.querySelector(".search__box input"); // input 박스 , 검색 영역 const searchList = document.querySelectorAll(".search__list ul li") // 목록 리스트 const searchInfo = document.querySelector(".search__info .num") // 전체 갯수 // 전체 갯수 구하기 searchInfo.textContent = searchList.length; // 검색 영역 searchBox.addEventListener("keyup", () => { const searc.. 2022. 8. 18.

퀴즈 만들기 (5) 객관식 다수 문항 ⭐️ 객관식 다수 문항 (정답 오답 확인) ⭐️ 01. 만드는 순서 1) 출력할 내용이 들어있는 요소 선택하기 2) 질문과 정답 내용, 필요한 값 입력하기 3) 질문 내용 출력하기 4) 정답 내용 숨겨놓기 5) 정답 확인 및 결과값 설정하기 6) 정답 버튼의 동작 설정하기 02. 에 작성하기 // 문제 정보 const quizInfo = [ { answerType: "웹 디자인 기능사 (2014년 01회)", answerNum: "1", answerAsk: "다음의 디자인 원리 중 리듬에 해당되지 않는 것은?", answerChoice: { 1: "점이", 2: "강조", 3: "균일", 4: "점증", }, answerResult: "3", answerEx: "3번 // '리듬(율동.. 2022. 8. 16.

퀴즈 만들기 (4) 객관식 단일 문항 ⭐️ 객관식 단일 문항 (정답 오답 확인) ⭐️ 01. 만드는 순서 1) 출력할 내용이 들어있는 요소 선택하기 2) 질문과 정답 내용, 필요한 값 입력하기 3) 질문 내용 출력하기 4) 정답 내용 숨겨놓기 5) 정답 확인 및 결과값 설정하기 6) 정답 버튼의 동작 설정하기 02. 에 작성하기 // 01. 출력할 내용이 들어있는 요소 선택하기 (여러개의 출력값이 나오는 부분에만 끝에 All을 붙여줌.) const quizType = document.querySelector(".quiz__type"); // 퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); // 퀴즈 번호 const quizAsk = d.. 2022. 8. 9.

퀴즈 만들기 (3) 주관식 다수 문항 ⭐️ Javascript ☛ Quiz Effect ⭐️ 자바스크립트를 활용하여 퀴즈를 만들어보자. 퀴즈의 구성 퀴즈를 만들기 위해 필요한 정보로는 퀴즈 종류, 퀴즈 번호, 질문 내용, 정답 결과와 확인 버튼 등이 있습니다. 에 이름을 지정하고, 원하는 곳에 정보의 값을 출력합니다. [3] 주관식 유형 ☛ 다수의 퀴즈 (정답 오답 확인하기) 여러 개의 질문 내용과 답변 입력창 및 답이 있으며, 클릭하면 정답 확인 및 강아지의 표정이 변화하는 퀴즈 문항을 만들어봅니다. // 01. 선택자 : 요소를 선택하는 방법 (출력값이 여러 개이므로 querySelector 끝에 'All'을 붙여줌.) const quizType = document.querySelectorAll(".quiz__type"); // 퀴즈 종.. 2022. 8. 5.

퀴즈 만들기 (2) 주관식 단일 문항 ⭐️ Javascript ☛ Quiz Effect ⭐️ 자바스크립트를 활용하여 퀴즈를 만들어보자. 퀴즈의 구성 퀴즈를 만들기 위해 필요한 정보로는 퀴즈 종류, 퀴즈 번호, 질문 내용, 정답 결과와 확인 버튼 등이 있습니다. 에 이름을 지정하고, 원하는 곳에 정보의 값을 출력합니다. [2] 주관식 유형 ☛ 단일 퀴즈 (정답 오답 확인하기) 하나의 질문 내용과 답변 입력창 및 답이 있으며, 클릭하면 정답 확인 및 강아지의 표정이 변화하는 퀴즈 문항을 만들어봅니다. // 01. 선택자 : 퀴즈 내용의 종류를 지정합니다. const quizType = document.querySelector(".quiz__type"); // 퀴즈 종류 const quizNumer = document.querySelector(".. 2022. 8. 4.

이전 1 2 다음

728x90

티스토리툴바