티스토리 뷰
자바스크립트를 이용하여 마우스가 움직일때마다 텍스트 효과가 생기는 사이트입니다.
화면에서 마우스를 움직이면 텍스트가 움직이는 효과를 만들었습니다.
한 문장당 오렌지색 두개 흰색 두개를 만든후 overflow: hidden 을 사용하여 반을 가린후
마우스가 움직일때마다 보여지도록 만들었습니다.
이 예제는 스크립트보다 CSS요소가 많이 들어가 소스코드를 통째로업로드 시켜드리겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>마우스 이펙트</title>
</head>
<link rel="stylesheet" href="css/NexonLv1Gothic.css">
<link rel="stylesheet" href="css/dracula.min.css">
<link rel="stylesheet" href="css/custom.css">
<style>
body::before {
background: rgba(40, 41, 43, 0.3)
}
.mouse__wrap {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
width: 100%;
height: 100vh;
overflow: hidden;
cursor: none;
}
.mouse__img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: -1;
width: 50%;
}
.mouse__text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -20%);
color: #fff;
font-size: 3vw;
line-height: 1.5;
}
.mouse__text .line {
width: 100%;
display: flex;
}
.mouse__text .line .left {
width: 50vw;
color: sandybrown;
transform: skew(0deg, -15deg);
overflow: hidden;
}
.mouse__text .line .left .spanWrap {
width: 100vw;
text-align: center;
}
.mouse__text .line .right {
width: 50vw;
transform: skew(0deg, 15deg);
overflow: hidden;
}
.mouse__text .line .right .spanWrap {
width: 100vw;
text-align: center;
transform: translateX(-50vw);
}
.cursor {
position: absolute;
left: 0; top: 0;
width: 20px;
height: 20px;
z-index: 99999;
border-radius: 50%;
background: rgba(255, 255, 255, 0.8);
user-select: none;
pointer-events: none;
}
</style>
<body class="img11">
<!-- main -->
<main>
<section id="mouseType01">
<div class="cursor"></div>
<div class="mouse__wrap">
<div class="mouse__img">
<figure>
<img src="img/mouseimg03.jpg" alt="이미지">
</figure>
</div>
<div class="mouse__text">
<div class="line">
<div class="left">
<div class="spanWrap">
<div class="spanSlow">Believe you can and</div>
</div>
</div>
<div class="right">
<div class="spanWrap">
<div class="spanSlow">Believe you can and</div>
</div>
</div>
</div>
<div class="line">
<div class="left">
<div class="spanWrap">
<div class="spanFast">You`re halfway there.</div>
</div>
</div>
<div class="right">
<div class="spanWrap">
<div class="spanFast">You`re halfway there.</div>
</div>
</div>
</div>
<div class="line">
<div class="left">
<div class="spanWrap">
<div class="spanSlow">할 수 있다고 믿으면</div>
</div>
</div>
<div class="right">
<div class="spanWrap">
<div class="spanSlow">할 수 있다고 믿으면</div>
</div>
</div>
</div>
<div class="line">
<div class="left">
<div class="spanWrap">
<div class="spanFast">반은 온 것이다.</div>
</div>
</div>
<div class="right">
<div class="spanWrap">
<div class="spanFast">반은 온 것이다.</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- //main -->
<!-- info -->
<div class="info">
<div class="title">
<h1><a href="mouseEffect.html">JavaScript Mouse Effect06</a></h1>
<p>마우스 이펙트 - 텍스트 효과</p>
</div>
<div class="number">
<ul>
<li><a href="mouseEffect01.html">1</a></li>
<li><a href="mouseEffect02.html">2</a></li>
<li><a href="mouseEffect03.html">3</a></li>
<li><a href="mouseEffect04.html">4</a></li>
<li><a href="mouseEffect05.html">5</a></li>
<li class="active"><a href="mouseEffect06.html">6</a></li>
<li><a href="mouseEffect07.html">7</a></li>
<li><a href="mouseEffect08.html">8</a></li>
<!-- <li><a href="mouseEffect09.html">9</a></li> -->
</ul>
</div>
<!-- script -->
<script src="js/highlight.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/gsap.min.js"></script>
<script>
highlight();
modal();
tapMenu();
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", {duration: 0.3, left: e.pageX, top: e.pageY});
}
document.addEventListener("mousemove", mousemove);
</script>
</body>
</html>
반응형
'Script Sample > Mouse Effect' 카테고리의 다른 글
| Mouse Effect - 이미지 오버 효과 (0) | 2022.04.13 |
|---|---|
| MouseEffect - 마우스효과2 (0) | 2022.02.24 |
| MouseEffect - 마우스효과 (0) | 2022.02.24 |
| MouseEffect - getBoundingClientRect (0) | 2022.02.24 |
| MouesEffect - gsap 사용 (0) | 2022.02.24 |
UP NEXT : Script Sample/Mouse Effect
댓글
© 2022 babydevelop