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"..

설명 마치 이미지의 시선이 마우스 포인터를 향하게 3D효과를 내는 것 입니다. transform-style: preserve-3d를 이용해 효과를 만들어 보았습니다. transform-style: preserve-3d란? transform-style: preserve-3d속성 은 요소의 자식이 3D 공간에 배치되는지 또는 요소 평면에서 병합되는지 여부를 설정합니다. 평면화하면 요소의 자식은 3D 공간에서 자체적으로 존재하지 않습니다. 이 속성은 상속되지 않으므로 요소의 모든 비-리프 하위 항목에 대해 설정해야 합니다. const circle = document.querySelector(".cursor").getBoundingClientRect(); function mouseMove(e) { //마우스 좌..

설명 마우스 이펙트 이미지 효과는 마우스를 따라서 이미지가 움직이는 효과 입니다. 이 효과를 내기 위해서는 먼저 마우스의 좌표값을 중앙으로 초기화 시킨 후(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..

설명 조명 효과의 원리는 쉽게 말해서 사실 CSS로 착시효과를 통해 눈속임을 하는 것 입니다. 배경에 그림을 넣고 그 위에 어두운 계열의 불투명한 판을 올려놓고 마우스 커서에게 배경 그림과 같은 그림을 넣어주면 마치 마우스를 조명이 비추는 듯한 느낌을 표현할 수 있습니다.

설명 마우스 좌표값에 따라 동그라미원의 좌표값이 변경되면서 마우스를 따라다니게 됩니다. 추가적으로 특정한 언어(span태그로 감싼 단어)에 마우스가 오버 됐을 경우에는 마우스를 따라다니는 원이 변하도록 효과를 넣었습니다.

설명 마우스 좌표값에 따라 동그라미원의 좌표값이 변경되면서 마우스를 따라다니게 됩니다. //출력용 => 마우스좌표 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..