티스토리

seop's study
검색하기

블로그 홈

seop's study

seopstroy.tistory.com/m

seop8044 님의 블로그입니다.

구독자
9
방명록 방문하기

주요 글 목록

  • Mouse Effect 페인트 효과 설명 마치 마우스에서 페인트가 나오는 듯한 효과를 내었습니다. function OilPainting(){ var canvas; var context; var width; var height; var startPos = {x: window.innerWidth/2, y: window.innerHeight/2}; var prevPos = {x: window.innerWidth/2, y: 0}; var dist = {x: 0, y: 0}; var colour = '#'+Math.floor(Math.random()*16777215).toString(16); this.initialize = function(){ canvas = document.getElementById("canvas"); context = canv.. 공감수 0 댓글수 0 2022. 4. 15.
  • Mouse Effect 마우스 오버, 텍스트 효과 설명 글씨에 마우스를 올려놓으면 마치 글씨에 불빛이 들어오는 듯한 효과를 내었습니다. .area span { font-size: 6.5em; color: #fff; letter-spacing: -7px; font-weight: 700; text-transform: uppercase; text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff; } .area span:hover { animation: blur 0.5s ease-out infinite; } @keyframes blur { from { text-shadow:0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #.. 공감수 0 댓글수 0 2022. 4. 15.
  • Mouse Effect - 텍스트 효과2 설명 특정 글씨에 마우스 오버를 하였을때 이미지가 보여집니다. const mouseImg = document.querySelectorAll(".mouse__img"); mouseImg.forEach((item) => { const imageWrap = item.querySelector(".img"); const imageWrapBounds = imageWrap.getBoundingClientRect(); let itemBounds = item.getBoundingClientRect(); const onMouseEnter = () => { gsap.set(imageWrap, {xPercent: -50, yPercent: 50, rotation: -15, scale: 0.3, opacity: 0});; gs.. 공감수 0 댓글수 0 2022. 4. 14.
  • Mouse Effect - 텍스트 효과 설명 마우스의 위치값에 따라서 글씨가 움직입니다. 보여지는 글씨는 한줄이지만 실제로는 두줄씩 있는 상태에서 각도를 조절해준 뒤 overflow: hidden으로 안보이게 처리해 주었습니다. function mousemove(e){ // 마우스 좌표값 가운데로 설정 let positionSlow = (e.pageX - (window.innerWidth/2)) * 0.1; let positionFast = (e.pageX - (window.innerWidth/2)) * 0.2; gsap.to(".spanSlow", {duration: 0.4, x: positionSlow}); gsap.to(".spanFast", {duration: 0.4, x: -positionFast}); gsap.to(".cursor".. 공감수 0 댓글수 0 2022. 4. 14.
  • Slider Effect 무한, 버튼 추가, 닷 버튼 추가, 자동 플레이, 시작 버튼, 정지 버튼 이번에는 지금까지 했던 모든 슬라이드 이펙트를 넣어보았습니다. 거기에 추가로 자동플레이와 플레이버튼, 정지버튼을 추가하였습니다. 페이지가 로딩되면 슬라이드는 자동으로 재생되며 닷버튼 옆에 정지버튼이 있습니다. 정지버튼을 누르면 슬라이드는 멈추고 정지버튼은 플레이버튼으로 변경됩니다. 그리고 플레이 버튼을 누르면 다시 슬라이드는 오토플레이로 변경됩니다. //slider08 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner".. 공감수 0 댓글수 0 2022. 4. 14.
  • Slider Effect 무한, 버튼 추가, 닷 버튼 추가 설명 1번~5번 이미지 맨 앞과 맨 뒤에 이미지를 복사를 합니다. 5번 1번 2번 3번 4번 5번 1번 이미지 순으로 이미지가 생성됩니다. 그 후 맨뒤에 있는 1번이 나올 때 1번 이미지의 인덱스를 [0]으로 바꿔줍니다. 실제 맨 뒤 1번 이미지의 인덱스는 [5] 입니다. 맨 앞에 있는 5번의 이미지가 왔을 때에는 인덱스를 [4]로 바꿔줍니다. 실제 맨 앞 5번 이미지의 인덱스는 [-1]입니다. 그렇게 하면 마치 무한으로 이미지 슬라이드가 보여지는 효과를 낼 수 있습니다. //slider07 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //.. 공감수 0 댓글수 0 2022. 4. 14.
  • Parallax Effect - 리빌 효과 설명 현재 스크롤값에 따라서 섹션을 이동할때 섹션에 박스가 지나간 뒤 이미지와 텍스트가 나타납니다. 현재 스크롤값을 구한 뒤 각 섹션별 offsetTop값에 도달하면 css를 이용해 박스모션이 지나간 뒤 이미지와 텍스트가 나타납니다. 리빌 효과의 포인트는 박스의 출발지점 위치를 잡는것이 포인트 입니다. //만약에 .reveal 클래스가 있으면 글씨를 span으로 감싸주고 글씨를 다시 넣어줘야 함 let desc = document.querySelectorAll(".content__item__desc") desc.forEach(el => { let reveal = el.innerText; if(el.classList.contains("reveal") == true){ reveal = "" + reveal .. 공감수 0 댓글수 0 2022. 3. 11.
  • Parallax Effect - 텍스트 효과 설명 현재 스크롤값에 따라서 섹션을 이동할때 각 섹션에 있는 텍스트에 애니메이션 효과가 나타납니다. 현재의 스크롤 값에 따라 각 섹션의 offsetTop값에 도달하면 각각의 글자마다 span태그를 이용해 쪼개준 뒤 한글자 한글자씩 애니메이션 효과를 나타납니다. //여러개 글씨 쪼개기 - 웹표준을 준수하기 위해 쪼개기전 글과 라벨로 묶어줌 document.querySelectorAll(".content__item__desc").forEach(desc => { let splitText = desc.innerText; let splitWrap = splitText.split('').join(""); splitWrap = "" + splitWrap + ""; desc.innerHTML = splitWrap; d.. 공감수 0 댓글수 0 2022. 3. 11.
  • Parallax Effect - 이질감 효과 설명 현재 스크롤값에 움직임에 따라서 섹션을 이동할때 섹션에 있는 텍스트와 그림이 같이 움직입니다. 먼저 현재의 스크롤 값을 구한 뒤 현재의 스크롤 값에 따라 각 섹션의 이미지와 텍스트에 부드럽게 움직이는 애니메이션을 넣어줍니다. function scroll(){ let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY; document.querySelector(".scrollTop span").innerText = Math.round(scrollTop); document.querySelectorAll(".content__item").forEach(item => { let offset1 = (scro.. 공감수 0 댓글수 0 2022. 3. 11.
  • Parallax Effect - 나타나기 효과 설명 현재 스크롤값에 따라서 섹션을 이동하면 섹션이 보이지 않다가 하나씩 나타납니다. 먼저 각 섹션별 offsetTop값을 구하고 현재 스크롤값이 각 섹션별 offsetTop값보다 같거나 커질 경우 숨겨놓았던 섹션에 애니메이션을 추가해준 뒤 나타나게 보여집니다. function scroll(){ let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY; document.querySelector(".scrollTop span").innerText = Math.round(scrollTop); document.querySelectorAll(".content__item").forEach(el => { if(.. 공감수 0 댓글수 0 2022. 3. 11.
  • Parallax Effect - 숨김 메뉴 설명 현재 스크롤값과 이전 스크롤값에 따라서 스크롤을 내릴땐 메뉴바가 숨어있지만 스크롤을 올리면 메뉴바가 나타납니다. 현재 스크롤값과 이전 스크롤값을 setInterval()메서드를 이용해 실시간으로 값을 구해준 뒤 현재스크롤 값이 이전 스크롤값 보다 높으면 스크롤이 내려가고 있는 것 입니다. 이때는 메뉴바를 숨겨놓습니다. 그리고 현재 스크롤 값이 이전 스크롤값 보다 작을경우 스크롤이 올라가고 있는 것 입니다. 이때는 메뉴바가 나타납니다. window.addEventListener("scroll", () => { let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY; document.querySe.. 공감수 0 댓글수 0 2022. 3. 11.
  • Parallax Effect - 사이드 메뉴 이동 설명 현재 스크롤값에 따라서 섹션을 이동할때 사이드 메뉴에 섹션에 맞는 메뉴에 표시가 됩니다. 먼저 각 섹션별 offsetTop값을 구하고 현재 스크롤값이 각 섹션별 offsetTop값보다 같거나 커질 경우 사이드 메뉴에 표시가 됩니다. document.querySelectorAll("#parallax__dot a").forEach(el => { el.addEventListener("click", e => { e.preventDefault(); document.querySelector(el.getAttribute("href")).scrollIntoView({behavior: "smooth"}); }) }) window.addEventListener("scroll", () => { let scrollTop.. 공감수 0 댓글수 0 2022. 3. 11.
  • Parallax Effect - 메뉴 이동 설명 현재 스크롤값에 따라서 섹션을 이동할때 섹션에 맞는 메뉴에 표시가 됩니다. 먼저 각 섹션별 offsetTop값을 구하고 현재 스크롤값이 각 섹션별 offsetTop값보다 같거나 커질 경우 메뉴에 표시가 됩니다. document.querySelectorAll("#parallax__nav li a").forEach(li => { li.addEventListener("click", (e) => { e.preventDefault(); document.querySelector(li.getAttribute("href")).scrollIntoView({ behavior:"smooth" }) }) }) window.addEventListener("scroll", () => { let scrollTop = wind.. 공감수 0 댓글수 0 2022. 3. 11.
  • Mouse Effect - 이미지 효과2 설명 마치 이미지의 시선이 마우스 포인터를 향하게 3D효과를 내는 것 입니다. transform-style: preserve-3d를 이용해 효과를 만들어 보았습니다. transform-style: preserve-3d란? transform-style: preserve-3d속성 은 요소의 자식이 3D 공간에 배치되는지 또는 요소 평면에서 병합되는지 여부를 설정합니다. 평면화하면 요소의 자식은 3D 공간에서 자체적으로 존재하지 않습니다. 이 속성은 상속되지 않으므로 요소의 모든 비-리프 하위 항목에 대해 설정해야 합니다. const circle = document.querySelector(".cursor").getBoundingClientRect(); function mouseMove(e) { //마우스 좌.. 공감수 0 댓글수 0 2022. 3. 1.
  • Mouse Effect - 이미지 효과 설명 마우스 이펙트 이미지 효과는 마우스를 따라서 이미지가 움직이는 효과 입니다. 이 효과를 내기 위해서는 먼저 마우스의 좌표값을 중앙으로 초기화 시킨 후(x축:0, y축:0) 중앙을 기준으로 이미지가 움직이게 됩니다. 마우스 좌표값 초기화 방법 마우스 좌표값을 중앙으로 초기화 방법은 화면 전체 가로값 - (화면 전체 가로값/2) 를 하시면 됩니다. //실제 마우스 좌표 값 let mousePageX = e.pageX; let mousePageY = e.pageY; //마우스 좌표 값을 가운데로 초기화 후 좌표값 //전체 길이/2 - 마우스 x좌표값 == 0 let centerPageX = window.innerWidth/2 - mousePageX; let centerPageY = window.inner.. 공감수 0 댓글수 0 2022. 2. 24.
  • Mouse Effect - 조명 효과 설명 조명 효과의 원리는 쉽게 말해서 사실 CSS로 착시효과를 통해 눈속임을 하는 것 입니다. 배경에 그림을 넣고 그 위에 어두운 계열의 불투명한 판을 올려놓고 마우스 커서에게 배경 그림과 같은 그림을 넣어주면 마치 마우스를 조명이 비추는 듯한 느낌을 표현할 수 있습니다. 공감수 0 댓글수 0 2022. 2. 23.
  • Mouse Effect - 따라다니기2 설명 마우스 좌표값에 따라 동그라미원의 좌표값이 변경되면서 마우스를 따라다니게 됩니다. 추가적으로 특정한 언어(span태그로 감싼 단어)에 마우스가 오버 됐을 경우에는 마우스를 따라다니는 원이 변하도록 효과를 넣었습니다. 공감수 0 댓글수 0 2022. 2. 23.
  • Mouse Effect - 따라다니기 설명 마우스 좌표값에 따라 동그라미원의 좌표값이 변경되면서 마우스를 따라다니게 됩니다. //출력용 => 마우스좌표 window.addEventListener("mousemove", (event) => { document.querySelector(".clientX").innerText = event.clientX; document.querySelector(".clientY").innerText = event.clientY; document.querySelector(".offsetX").innerText = event.offsetX; document.querySelector(".offsetY").innerText = event.offsetY; document.querySelector(".pageX").inn.. 공감수 0 댓글수 0 2022. 2. 23.
  • Quiz Effect - 객관식 : 여러문제 정답 확인하기 설명 여러 문제를 각각 사용자가 입력한 값과 정답의 값을 비교해서 정답과 오답을 출력합니다. 이번에는 모든 문제를 javascript로 출력 하였습니다. 공감수 0 댓글수 0 2022. 2. 22.
  • Quiz Effect - 객관식 : 정답 확인하기 설명 사용자가 보기를 선택한 값과 정답의 값을 비교해서 정답과 오답을 출력합니다. const quizType = document.querySelector(".quiz__Type"); //문제 유형 const quizNumber = document.querySelector(".quiz__number"); //문제 번호 const quizAsk = document.querySelector(".quiz__ask"); //문제 질문 const quizConfirm = document.querySelector(".quiz__confirm"); //문제 정답 버튼 const quizResult = document.querySelector(".quiz__result"); //문제 설명 const quizView = .. 공감수 0 댓글수 0 2022. 2. 21.
  • Quiz Effect - 주관식 : 여러문제 정답 쓰고 확인하기 설명 여러 문제를 각각 사용자가 입력한 값과 정답의 값을 비교해서 정답과 오답을 출력합니다. const quizType = document.querySelectorAll(".quiz__Type"); //문제 유형 const quizNumber = document.querySelectorAll(".quiz__number"); //문제 번호 const quizAsk = document.querySelectorAll(".quiz__ask"); //문제 질문 const quizConfirm = document.querySelectorAll(".quiz__confirm"); //문제 정답 버튼 const quizResult = document.querySelectorAll(".quiz__result"); //문제.. 공감수 0 댓글수 0 2022. 2. 21.
  • Quiz Effect - 주관식 : 정답 쓰고 확인하기 설명 사용자가 입력한 값과 정답의 값을 비교해서 정답과 오답을 출력합니다. const quizType = document.querySelector(".quiz__Type") //퀴즈 종류 const quizNumber = document.querySelector(".quiz__number") //퀴즈 번호 const quizAsk = document.querySelector(".quiz__ask") //퀴즈 질문 const quizConfirm = document.querySelector(".quiz__confirm") //정답 확인 버튼 const quizResult = document.querySelector(".quiz__result") //정답 결과 const quizDog = document.q.. 공감수 0 댓글수 0 2022. 2. 21.
  • Quiz Effect - 주관식 : 정답 확인하기 설명 정답보기를 클릭하면 문제의 정답을 출력하면서 강아지가 웃습니다. const quizType = document.querySelector(".quiz__Type") //퀴즈 종류 const quizNumber = document.querySelector(".quiz__number") //퀴즈 번호 const quizAsk = document.querySelector(".quiz__ask") //퀴즈 질문 const quizConfirm = document.querySelector(".quiz__confirm") //정답 확인 버튼 const quizResult = document.querySelector(".quiz__result") //정답 결과 const quizDog = document.quer.. 공감수 0 댓글수 0 2022. 2. 21.
  • Slider Effect - 닷 버튼 추가 설명 화면 하단 부분에 닷 버튼을 추가합니다. 현재의 이미지 인덱스 값과 닷버튼의 인덱스 값을 같게 만들어 닷버튼을 누르면 해당 이미지로 이동합니다 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); //이미지 움직이는 영역 const slider = document.querySelectorAll(".slider"); //5개의 이미지 저장 const sliderBtn = document.querySelector(".. 공감수 0 댓글수 0 2022. 2. 18.
  • Slider Effect - 이전, 다음 버튼 추가 설명 이미지의 인덱스 값의 따라 '이전'버튼을 눌렀을 때 => 현재 인덱스 값의 - 1 씩 감소합니다. 이미지의 인덱스 값의 따라 '다음'버튼을 눌렀을 때 => 현재 인덱스 값의 + 1 씩 증가합니다. //slider05 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); //이미지 움직이는 영역 const slider = document.querySelectorAll(".slider"); //5개의 이미지 저장 c.. 공감수 0 댓글수 0 2022. 2. 17.
  • Slider Effect - 위로 움직이기(연속적) 설명 메커니즘은 좌로 움직이기(Slider Effect)와 같습니다. 1번 이미지 -> 2번 이미지 -> 3번 이미지 -> 4번 이미지 -> 5번 이미지 -> 1번 이미지가 출력됨과 동시에 2번~5번 이미지의 위치가 1번 이미지의 뒤로 옮겨집니다. 좌로 움직이기에서는 translate를 X축으로 줬던 반면, 위로 움직이기는 translate를 Y축으로 주고, 이미지의 총길이를 마찬가지로 X축인 width값이 아닌, Y축인 height값으로 설정해 줍니다. //slider04 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //이미지 보이는 영역.. 공감수 0 댓글수 0 2022. 2. 17.
  • Slider Effect - 연속적으로 움직이기 설명 1번 이미지 -> 2번 이미지 -> 3번 이미지 -> 4번 이미지 -> 5번 이미지 -> 1번 이미지가 출력됨과 동시에 2번~5번 이미지의 위치가 1번 이미지의 뒤로 옮겨집니다. 이번에는 setInterval()과 setTimeout()를 같이 사용해 보았습니다. setInterval()과 setTimeout()의 차이점 - setInterval : 실행중 다른 setInterval로 인해 함수가 호출되면 기존에 실행되던 함수는 종료됩니다. - setTimeout: 실행중 다른 setTimeout로 인해 함수가 호출되도 기존에 실행된 함수에 영향을 주지 않습니다. setTimeout() 이란? 설명 : 기존 동작이 한번 일어납니다. 사용 방법 var SETTIMEOUT_NAME = setTimeou.. 공감수 0 댓글수 0 2022. 2. 16.
  • Slider Effect - 좌로 움직이기 설명 1번 사진 -> 2번 사진 -> 3번 사진 -> 4번 사진 -> 5번 사진 -> 다시 1번 사진 반복이 됩니다. setInterval() 설명 : 기본 동작이 일정한 시간과 간격으로 반복적으로 일어납니다. 사용 방법 var SETINTERVAL_NAME = setInterval(FUNCTION, TIME); 실행중인 루프 종료 방법 clearInterval(SETINTERVAL_NAME); //slider02 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //이미지 보이는 영역 const sliderInner = document.quer.. 공감수 0 댓글수 0 2022. 2. 16.
  • Search Effect06 - sort( ), reverse( ) const cssProperty = [ {num: 1, name: "align-content", desc: "align-content 속성은 콘텐츠의 상하관계 정렬 상태를 정의합니다."}, {num: 2, name: "align-items", desc: "align-items 속성은 요소의 수직 방향 정렬 방식을 설정합니다."}, {num: 3, name: "align-self", desc: "align-self 속성은 콘텐츠의 정렬 상태를 정의합니다."}, {num: 4, name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."}, {num: 5, name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위.. 공감수 0 댓글수 0 2022. 2. 15.
  • Slider Effect - 페이드 효과 Slider Effect - setInterval()를 이용하여 이미지 슬라이드 만들기 setInterval()메서드란? 일정한 시간 간격으로 작업을 수행하기 위해서 사용합니다.clearInterval 함수를 사용하여 중지할 수 있습니다. 주의할 점은 일정한 시간 간격으로 실행되는 작업이 그 시간 간격보다 오래걸릴 경우 문제가 발생할 수 있습니다. Javascript //slider01 const sliderWrap = document.querySelector(".slider__wrap") const sliderImg = document.querySelector(".slider__img") const slider = document.querySelectorAll(".slider") let currentI.. 공감수 0 댓글수 0 2022. 2. 15.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.