ss 'JAVASCRIPT Effect' 카테고리의 글 목록
본문 바로가기

JAVASCRIPT Effect33

SEARCH Effect 07 검색 효과07 이번에는 게임 검색하기 게임을 만들어 보았습니다. 게임 진행하는 동안 음악도 플레이 되며, 정답 갯수, 오답 등등을 확인할 수 있습니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 검색효과를 만들기 위한 자바스크립트 작성법입니다. 게임음악을 위한 함수, 정답 표시, 오답 표시 등을 위해 여러 함수들을 만들어 사용하였으니 아래의 코드와 설명을 참고해주세요~! const cssProperty = [ { num: 1, name: "accent-color", desc: " 요소의 강조 색상을 지정합니다. " }, { num: 2, name: "align-content", desc: " 콘텐츠 사이와 콘텐츠 주위 빈 공간을 플렉스 박스'의 교차축 또는 그리드의 블록 축을 따라 배치하는 방식을 결.. 2022. 10. 23.
SEARCH Effect 06 검색 효과06 자바스크립트를 이용하여 검색효과 만들 수 있습니다. sort()와 reverse()를 이용하여 반대로 정렬, 내림차순 · 오름차순 정렬, 알파벳순, 랜덤정렬을 하였습니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 검색효과를 만들기 위한 자바스크립트 작성법입니다. 여기서는 sort()와 reverse()메서드를 이용하여 출력하였습니다. sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열로 반환합니다. reverse() 메서드는 배열의 순서를 반전합니다. const cssProperty = [ { num: 1, name: "accent-color", desc: " 요소의 강조 색상을 지정합니다. " }, { num: 2, name: "align-content", desc.. 2022. 10. 23.
SLIDER Effect 07 슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴, 무한, 플레이 버튼, 정지 버튼, 자동 플레이) 이번에는 지금까지 했던 기능들에 자동플레이, 플레이 버튼, 정지 버튼이 추가되었습니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 방식 슬라이드 효과를 위한 자바스크립트 작성법입니다. 자동으로 슬라이드가 재생되며, 플레이버튼, 정지버튼을 통해 슬라이드를 정지 또는 재생시킬 수 있습니다. 또한, 이미지 위에 마우스를 올리면 슬라이드가 멈추고, 다시 마우스를 떼면 슬라이드가 재생됩니다. const sliderWrap = document.querySelector(".slider__wrap"); // 전체 이미지 슬라이드 const sliderImg = document.querySelector(".slider.. 2022. 10. 23.
SLIDER Effect 06 슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴, 무한) next 버튼을 눌렀을 때는 왼쪽 방향으로, prev 버튼을 눌렀을 때는 오른쪽 방향으로 슬라이드가 움직입니다. 마지막 슬라이더에서 next 버튼 눌렀을 때 앞으로 다시 스르륵 이동하는 것이 아니라 자연스럽게 옆으로 넘어가는 방식입니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 방식 슬라이드 효과를 위한 자바스크립트 작성법입니다. next 버튼을 눌렀을 때는 왼쪽 방향으로, prev 버튼을 눌렀을 때는 오른쪽 방향으로 슬라이드가 움직입니다. 마지막 슬라이드에서 자연스럽게 첫 번째 슬라이드로 넘어가기 위해 첫 번째 이미지를 마지막 사진 옆으로 복사하고, 첫 번째 사진에서 마지막 사진으로 다시 이동할 때, 마지막 이미지를 복사하여 첫번째 사진 .. 2022. 10. 23.
SLIDER Effect 05 슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴) next 버튼을 눌렀을 때는 왼쪽 방향으로, prev 버튼을 눌렀을 때는 오른쪽 방향으로 슬라이드가 움직입니다. 아래에 닷메뉴도 추가되었는데, 닷버튼을 하나씩 클릭하면 해당 슬라이드로 이동합니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 방식 슬라이드 효과를 위한 자바스크립트 작성법입니다. next 버튼을 눌렀을 때는 왼쪽 방향으로, prev 버튼을 눌렀을 때는 오른쪽 방향으로 슬라이드가 움직입니다. 자세한 설명은 아래를 참고해 주세요~! const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); .. 2022. 10. 23.
PARALLAX Effect 07 패럴랙스 효과07 자바스크립트를 이용하여 패럴랙스 효과를 만들 수 있습니다. 가려져 있던 그림과 글씨가 스크롤을 내리면서 점점 드러납니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 패럴랙스 효과를 만들기 위한 자바스크립트 작성법입니다. //reveal 클래스 자식에 글씨가 있다면, 가상으로 span태그 만들어 넣어주기 const revealText = document.querySelectorAll(".reveal"); revealText.forEach((el) => { let splitText = el.innerText; if (splitText) { el.innerHTML = '' + splitText + ''; } }) //자기 자신을 호출하는 재귀함수 사용 function scroll() { .. 2022. 10. 10.
PARALLAX Effect 06 패럴랙스 효과06 자바스크립트를 이용하여 패럴랙스 효과를 만들 수 있습니다. 글씨가 하나씩 쪼개져서 나타나는 효과를 만들었습니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 패럴랙스 효과를 만들기 위한 자바스크립트 작성법입니다. // 글씨 나누기 // let text = document.querySelector("#section1 .content__item__desc"); // let splitText = text.innerText; // let splitWrap = splitText.split('').join(''); // text.innerHTML = splitWrap = "" + splitWrap + ""; //글씨 쪼개기(다중이) // text.forEach((e, i) => { // let .. 2022. 9. 29.
Mouse Effect 06 마우스 효과06 자바스크립트를 이용하여 마우스 효과를 만들어 보겠습니다. 이번에는 텍스트 효과로, 마우스 방향에 따라 글씨가 좌, 우로 움직입니다. 또한, 텍스트에 마우스를 올렸을 때 커서가 확대되고 글씨가 반전되는 효과가 나타납니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 마우스 효과를 만들기 위한 자바스크립트 작성법입니다. const mouseMove = (e) => { let positionSlow = (e.pageX - (window.innerWidth / 2)) * 0.1; //가운데 정렬, * 0.1 은 이질감 효과 let positionFast = (e.pageX - (window.innerWidth / 2)) * 0.2; //속도조절 gsap.to(".spanSlow", { dura.. 2022. 9. 29.
SEARCH Effect 05 검색 효과05 자바스크립트를 이용하여 검색효과 만들 수 있습니다. filter()를 이용하여 속성의 중요도를 보여줍니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 검색효과를 만들기 위한 자바스크립트 작성법입니다. 여기서는 filter()메서드를 이용하여 출력하였습니다. filter() 메서드는 조건에 일치하는 배열 요소를 검색하여 배열로 반환합니다. const cssProperty = [ //배열 속의 객체 형태로 속성 정보 저장 { name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다." }, { name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다." }, { name: "a.. 2022. 9. 29.
SEARCH Effect 04 검색 효과04 자바스크립트를 이용하여 검색효과 만들 수 있습니다. find()를 이용하여 속성을 검색하면 설명 보여주고, 속성을 클릭하면 설명을 볼 수 있습니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 검색효과를 만들기 위한 자바스크립트 작성법입니다. 여기서는 find()메서드를 이용하여 출력하였습니다. find() 메서드는 조건에 일치하는 배열 요소를 검색하여 요소를 반환합니다. const cssProperty = [ //배열 속의 객체 형태로 속성 정보 저장 { name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다." }, { name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성.. 2022. 9. 28.
Mouse Effect 05 마우스 효과05 자바스크립트를 이용하여 마우스 효과를 만들어 보겠습니다. 이번 효과는 기울기와 글씨 반전 효과입니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 마우스 효과를 만들기 위한 자바스크립트 작성법입니다. 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, Mat.. 2022. 9. 28.
Mouse Effect 04 마우스 효과04 자바스크립트를 이용하여 마우스 효과를 만들어 보겠습니다. 이미지 안에서만 커서 모양이 바뀌고, 마우스를 움직일 때 마우스 방향에 따라 이미지가 움직입니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 마우스 효과를 만들기 위한 자바스크립트 작성법입니다. 이번에도 gsap를 이용하여 효과를 주었습니다. const cursor = document.querySelector(".mouse__cursor") const cursorRect = cursor.getBoundingClientRect(); //커서의 너비/높이값 구하기 document.querySelector(".mouse__wrap figure").addEventListener("mousemove", (e) => { //가운데 이미지 .. 2022. 9. 22.
Mouse Effect 03 마우스 효과03 자바스크립트를 이용하여 마우스 효과를 만들어 보겠습니다. 이미지에 마우스를 올렸을 때 조명을 비춘 것처럼 보이는 효과입니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 마우스 효과를 만들기 위한 자바스크립트 작성법입니다. gsap를 이용하여 효과를 주었습니다. const cursor = document.querySelector(".mouse__cursor"); // const circleW = cursor.offsetWidth; //200 -> 보더/패딩 포함한 가로값 // const circleH = cursor.offsetHeight; //200 -> 보더/패딩 포함한 세로값 // const circle2 = cursor.clientWidth; //190 -> 보더/마진 제외한 가.. 2022. 9. 22.
PARALLAX Effect 05 패럴랙스 효과05 자바스크립트를 이용하여 패럴랙스 효과를 만들 수 있습니다. 이번 패럴랙스는 이질감 효과를 내면서 나타나는 방법입니다. 아래 사이트에서 스크롤을 내려보시면 무슨 말인지 알 수 있습니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 패럴랙스 효과를 만들기 위한 자바스크립트 작성법입니다. function scroll() { let scrollTop = window.pageYOffset || document.documentElement.scrollTop; //세로스크롤값 구하기 document.querySelector("#parallax__info span").innerText = Math.ceil(scrollTop) //#parallax__info에 있는 span에 scrollTop값 입력.. 2022. 9. 20.
PARALLAX Effect 04 패럴랙스 효과04 자바스크립트를 이용하여 패럴랙스 효과를 만들 수 있습니다. 이번 패럴랙스는 스크롤을 내릴 때 영역들이 효과를 내면서 나타나는 방법입니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 패럴랙스 효과를 만들기 위한 자바스크립트 작성법입니다. 그동안은 window.addEventListener("scroll", scrollProgress);을 사용하였지만, 이번에는 자기 자신을 호출하는 재귀함수를 사용하였습니다. //재귀함수(자기 자신을 호출) function scroll() { let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.screenY; document.querySelectorAll(".. 2022. 9. 18.
SLIDER Effect 04 슬라이드 이펙트 - 이미지 슬라이드(버튼) next 버튼을 눌렀을 때는 왼쪽 방향으로, prev 버튼을 눌렀을 때는 오른쪽 방향으로 슬라이드가 움직입니다. 사이트의 우측 하단에 소스 보기를 누르면 html, css, javascript 소스를 모두 확인할 수 있습니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 방식 슬라이드 효과를 위한 자바스크립트 작성법입니다. next 버튼을 눌렀을 때는 왼쪽 방향으로, prev 버튼을 눌렀을 때는 오른쪽 방향으로 슬라이드가 움직입니다. prev버튼을 눌렀을 때 이미지1에서 이미지5로 넘어가기 위해 console.log(currentIndex)로 확인하고, 4, 3, 2, 1, 0을 반복하기 위해 currentIndex에 4를 더해줍니다. const sliderW.. 2022. 9. 18.
Mouse Effect 02 마우스 효과02 자바스크립트를 이용하여 마우스 효과를 만들어 보겠습니다. 동그라미 두 개가 마우스를 따라다닙니다. 메뉴에 갔을 때, 소스보기에 갔을 때 마우스효과가 다르게 나타납니다. 원본 소스 보기 자바스크립트 마우스 효과를 만들기 위한 자바스크립트 작성법입니다. const cursor = document.querySelector(".mouse__cursor"); const cursor2 = document.querySelector(".mouse__cursor2"); const span = document.querySelectorAll(".mouse__wrap span"); const menu = document.querySelectorAll("#header"); //메뉴 const sauce = do.. 2022. 9. 18.
PARALLAX Effect 03 패럴랙스 효과03 자바스크립트를 이용하여 패럴랙스 효과를 만들 수 있습니다. 이번 패럴랙스는 스크롤을 최하단으로 내렸을 때, top 버튼이 보이고, 클릭하면 화면이 최상단으로 올라갑니다. 스크롤을 내릴 때 네비게이션 메뉴가 사라지고, 스크롤을 올리면 다시 나타납니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 패럴랙스 효과를 만들기 위한 자바스크립트 작성법입니다. window.addEventListener("scroll", () => { let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop; //세로 스크롤 값 구하는 3가지 방법(브라우저마다 지원 여부 다름) if (scrollTop >= d.. 2022. 9. 13.
PARALLAX Effect 02 패럴랙스 효과02 자바스크립트를 이용하여 패럴랙스 효과를 만들 수 있습니다. 스크롤을 움직였을 때 해당 섹션에 맞는 사이드 메뉴에 변화가 생깁니다. 그리고, 사이드 메뉴의 닷을 클릭했을 때 해당 섹션으로 부드럽게 이동합니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 패럴랙스 효과를 만들기 위한 자바스크립트 작성법입니다. document.querySelectorAll("#parallax__dot a").forEach(el => { el.addEventListener("click", e => { //요소를 클릭했을 때 e.preventDefault(); //해당 이벤트에 대한 기본동작 실행하지 않도록 document.querySelector(el.getAttribute("href")).scrollInt.. 2022. 9. 13.
Mouse Effect 01 마우스 효과01 자바스크립트를 이용하여 마우스 효과를 만들어 보겠습니다. 원본 소스 보기 자바스크립트 마우스 효과를 만들기 위한 자바스크립트 작성법입니다. window.addEventListener("mousemove", (event) => { //event : mouse 움직이는 값 document.querySelector(".clientX").innerText = event.clientX; document.querySelector(".clientY").innerText = event.clientY; document.querySelector(".offsetX").innerText = event.offsetX; document.querySelector(".offsetY").innerText = event.. 2022. 9. 6.
PARALLAX Effect 01 패럴랙스 효과01 자바스크립트를 이용하여 패럴랙스 효과를 만들 수 있습니다. 패럴랙스는 시차라는 뜻으로 천문학에서 사용하는 용어입니다. 즉 멀리 있는 물체는 천천히 움직이고, 가까이 있는 물체는 빨리 움직이는 현상을 의미합니다. 이 현상을 이용하면 입체감, 실체감을 높여서 보다 인상적인 디자인을 할 수 있습니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 패럴랙스 효과를 만들기 위한 자바스크립트 작성법입니다. const scroll = document.querySelector("#parallax__info .scroll span") window.addEventListener("scroll", () => { //스크롤 했을 때 let scrollTop = window.pageYOffset || wind.. 2022. 9. 6.
SLIDER Effect 03 슬라이드 이펙트 - 좌로 움직이기(연속적으로) 다섯 장의 이미지를 3초에 한 장씩 넘어가는 효과를 만들어 보았습니다. 이미지가 오른쪽에서 왼쪽으로 움직이는 것처럼 넘어가는 방식입니다. 사이트의 우측 하단에 소스 보기를 누르면 html, css, javascript 소스를 모두 확인할 수 있습니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 방식 슬라이드 효과를 위한 자바스크립트 작성법입니다. 슬라이드 효과를 위해 setTimeout 함수를 사용합니다. setTimeout 메서드는 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정합니다. const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document... 2022. 9. 2.
SLIDER Effect 02 슬라이드 이펙트 - 좌로 움직이기 다섯 장의 이미지를 3초에 한 장씩 넘어가는 효과를 만들어 보았습니다. 이미지가 오른쪽에서 왼쪽으로 움직이는 것처럼 넘어가는 방식입니다. 사이트의 우측 하단에 소스 보기를 누르면 html, css, javascript 소스를 모두 확인할 수 있습니다. 이번 슬라이드 이펙트는 javascript, GSAP, jQuery방식을 모두 소개하겠습니다. 원본 소스 보기 원본 사이트 보기 01. 자바스크립트 방식 슬라이드 효과를 위한 자바스크립트 작성법입니다. 슬라이드 효과를 위해 setInterval 함수를 사용합니다. const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.que.. 2022. 8. 29.
SLIDER Effect 01 슬라이드 이펙트 - 트랜지션 효과 다섯 장의 이미지를 3초에 한 장씩 넘어가는 효과를 만들어 보았습니다. 마지막 다섯 번째 이미지가 되었을 때 멈추는 것이 아니라 첫 번째 이미지로 넘어갑니다. 사이트의 우측 하단에 소스 보기를 누르면 html, css, javascript 소스를 모두 확인할 수 있습니다. 여기서는 javascript에 대해 자세히 알아보겠습니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 슬라이드 효과를 위한 자바스크립트 작성법입니다. 슬라이드 효과를 위해 setInterval 함수를 사용합니다. setInterval은 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용합니다. 첫 번째 이미지를 안보이게 하고 두 번째 이미지를 보이게 하기 위해 opacity 속성을 사용합니다... 2022. 8. 29.
QUIZ Effect 06 퀴즈 효과06 웹디자인기능사 필기 기출문제를 이용한 객관식(여러 문제) 슬라이드 형식입니다. 한 문제씩 출력되며, 정답확인하기 버튼을 누르면 정답과 해설을 확인하고, 다음 문제로 넘어갈 수 있습니다. 원본 소스 보기 원본 사이트 보기 01. 문제 정보 문제 정보를 배열속의 객체로 저장하였고, 보기는 객체가 아닌 배열에 저장하였습니다. 코드 보기 const quizInfo = [ { answerType: "웹디자인기능사 2010년 04회", answerNum: "1", answerAsk: "색의 수축, 팽창의 효과에 가장 큰 영향을 주는 요소는?", answerChoice: [ "색약", "명도", "잔상", "중량" ], answerResult: "명도", answerEx: "색의 수축, 팽창의 효과에 .. 2022. 8. 24.
SEARCH Effect 03 검색 효과03 자바스크립트를 이용하여 검색효과 만들 수 있습니다. 사용자가 입력한 키워드를 정확하게 찾을 수 있습니다. charAt()메서드를 이용하여 CSS 속성 검색하기를 만들어 보았습니다. 이번에는 알파벳을 클릭했을 때 알파벳에 해당하는 요소들만 검색되게 하는 기능을 추가하였습니다. 원본 소스 보기 자바스크립트 검색효과를 만들기 위한 자바스크립트 작성법입니다. 여기서는 charAt()메서드를 이용하여 출력하였습니다. charAt() 메서드는 지정한 인덱스의 문자를 추출하여 문자열을 반환합니다. 따라서, charAt() 메서드의 특성을 사용하여 자바스크립트를 작성하였습니다. //선택자 const searchKeyword = document.querySelectorAll(".search__info .k.. 2022. 8. 22.
QUIZ Effect 05 퀴즈 효과05 웹디자인기능사 필기 기출문제를 이용한 객관식(여러 문제) 유형입니다. 정답 확인하기를 누르면 몇 개 맞았는지, 합격인지 불합격인지 확인할 수 있습니다. 원본 소스 보기 원본 사이트 보기 01. 문제 정보 이번에는 문제수가 많기 때문에 문제 정보를 배열 속의 객체로 저장하였습니다. 코드 보기 //문제 정보 const quizInfo = [ { answerType: "웹디자인기능사 2010년 04회", answerNum: "1", answerAsk: "색의 수축, 팽창의 효과에 가장 큰 영향을 주는 요소는?", answerChoice: { 1: "색약", 2: "명도", 3: "잔상", 4: "중량" }, answerResult: "2", answerEx: "색의 수축, 팽창의 효과에 가장 큰.. 2022. 8. 18.
SEARCH Effect 02 검색 효과02 자바스크립트를 이용하여 검색효과 만들 수 있습니다. 사용자가 입력한 키워드를 정확하게 찾을 수 있습니다. includes()메서드를 이용하여 CSS 속성 검색하기를 만들어 보았습니다. 원본 소스 보기 자바스크립트 검색효과를 만들기 위한 자바스크립트 작성법입니다. 여기서는 includes()메서드를 이용하여 출력하였습니다. includes() 메서드는 문자열이 특정 요소를 포함하고 있는지 판별하여 불린(true, false)으로 반환합니다. 따라서, includes() 메서드의 특성을 사용하여 자바스크립트를 작성하였습니다. //선택자 const searchBox = document.querySelector(".search__box input"); //input 박스, 검색 영역 const s.. 2022. 8. 17.
SEARCH Effect 01 검색 효과01 자바스크립트를 이용하여 검색효과 만들 수 있습니다. 사용자가 입력한 키워드를 정확하게 찾을 수 있습니다. 원본 소스 보기 자바스크립트 검색효과를 만들기 위한 자바스크립트 작성법입니다. indexOf()메서드를 이용하여 출력하였습니다. indexOf()는 문자열에서 특정 문자의 위치를 찾아 숫자를 반환하는 메서드입니다. 따라서 indexOf()값이 0(false)이 출력되는 값만 hide를 지워주어 내가 원하는 키워드를 출력할 수 있습니다. //선택자 const searchBox = document.querySelector(".search__box input"); //input 박스, 검색 영역 const searchList = document.querySelectorAll(".search_.. 2022. 8. 16.
QUIZ Effect 04 퀴즈 효과04 웹디자인기능사 필기 기출문제를 이용한 객관식(한 문제) 유형입니다. 객관식 보기와 해설도 함께 볼 수 있습니다. 원본 소스 보기 자바스크립트 퀴즈를 만들기 위한 자바스크립트 작성법입니다. 자세한 설명은 아래에 있습니다. //01. 선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__question .ask"); //퀴즈 질문 const quizConfirm = document.querySelector(.. 2022. 8. 8.
728x90
HTML

HTML

자세히보기
CSS

CSS

자세히보기
JAVASCRIPT

JAVASCRIPT

자세히보기
광고 준비중입니다.

티스토리툴바