seop's study seop's study

설명 마치 마우스에서 페인트가 나오는 듯한 효과를 내었습니다. 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..

설명 글씨에 마우스를 올려놓으면 마치 글씨에 불빛이 들어오는 듯한 효과를 내었습니다. .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 #..

설명 특정 글씨에 마우스 오버를 하였을때 이미지가 보여집니다. 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..

설명 마우스의 위치값에 따라서 글씨가 움직입니다. 보여지는 글씨는 한줄이지만 실제로는 두줄씩 있는 상태에서 각도를 조절해준 뒤 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"..

이번에는 지금까지 했던 모든 슬라이드 이펙트를 넣어보았습니다. 거기에 추가로 자동플레이와 플레이버튼, 정지버튼을 추가하였습니다. 페이지가 로딩되면 슬라이드는 자동으로 재생되며 닷버튼 옆에 정지버튼이 있습니다. 정지버튼을 누르면 슬라이드는 멈추고 정지버튼은 플레이버튼으로 변경됩니다. 그리고 플레이 버튼을 누르면 다시 슬라이드는 오토플레이로 변경됩니다. //slider08 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"..

설명 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"); //..

설명 현재 스크롤값에 따라서 섹션을 이동할때 섹션에 박스가 지나간 뒤 이미지와 텍스트가 나타납니다. 현재 스크롤값을 구한 뒤 각 섹션별 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 ..

설명 현재 스크롤값에 따라서 섹션을 이동할때 각 섹션에 있는 텍스트에 애니메이션 효과가 나타납니다. 현재의 스크롤 값에 따라 각 섹션의 offsetTop값에 도달하면 각각의 글자마다 span태그를 이용해 쪼개준 뒤 한글자 한글자씩 애니메이션 효과를 나타납니다. //여러개 글씨 쪼개기 - 웹표준을 준수하기 위해 쪼개기전 글과 라벨로 묶어줌 document.querySelectorAll(".content__item__desc").forEach(desc => { let splitText = desc.innerText; let splitWrap = splitText.split('').join(""); splitWrap = "" + splitWrap + ""; desc.innerHTML = splitWrap; d..

설명 현재 스크롤값에 움직임에 따라서 섹션을 이동할때 섹션에 있는 텍스트와 그림이 같이 움직입니다. 먼저 현재의 스크롤 값을 구한 뒤 현재의 스크롤 값에 따라 각 섹션의 이미지와 텍스트에 부드럽게 움직이는 애니메이션을 넣어줍니다. 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..

설명 현재 스크롤값에 따라서 섹션을 이동하면 섹션이 보이지 않다가 하나씩 나타납니다. 먼저 각 섹션별 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(..