“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
자바스크립트 마우스 효과 (조명효과)
💜 이미지 유형
마우스 이펙트
조명효과를 배워봤는데요
한번 정리해보겠습니다!
<body class="img03 bg07 font09">
<header id="header">
<h1>Javascript Mouse Effect03</h1>
<p>마우스 이펙트 - 마우스 따라다니기<p>
<ul>
<li><a href="mouseEffect01.html">1</a></li>
<li><a href="mouseEffect02.html">2</a></li>
<li class="active"><a href="mouseEffect03.html">3</a></li>
<li><a href="mouseEffect04.html">4</a></li>
<li><a href="mouseEffect05.html">5</a></li>
<li><a href="mouseEffect06.html">6</a></li>
</ul>
</header>
<!-- header -->
<main id="main">
<div class="mouse__wrap">
<div class="mouse__cursor"></div>
<div class="mouse__text">
<p>Success is where preparation and opportunity meet.</p>
<p>성공은 잘 준비된 기회와 만난다.</p>
</div>
</div>
</main>
<!-- main -->
<footer id="footer">
<a href="mailto:hunmi961119@gmail.com">hunmi961119@gmail.com</a>
</footer>
<!-- footer -->
우선 body태그 안에 header, main, footer 영역을 지정해
글씨를 넣어줍니다.
폰트 CSS
@import url('https://webfontworld.github.io/TheJamsil/TheJamsil.css');
@import url('https://webfontworld.github.io/tmon/Tmon.css');
@import url('https://webfontworld.github.io/daegu/DalseoDarling.css');
@import url('https://webfontworld.github.io/suseong/SuseongDotum.css');
@import url('https://webfontworld.github.io/Healthset/HealthsetGothic.css');
@import url('https://webfontworld.github.io/kohi/KOHIBaeum.css');
@import url('https://webfontworld.github.io/jeju/JejuGothic.css');
@import url('https://webfontworld.github.io/tway/TwayAir.css');
@import url('https://webfontworld.github.io/tmoney/TmoneyRoundWind.css');
@import url('https://webfontworld.github.io/score/SCoreDream.css');
/* reset */
* {
margin: 0;
padding: 0;
color: #fff;
}
*, *::before, *::after {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #222;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
li, ul, ol {
list-style: none;
}
img {
vertical-align: top;
width: 100%;
}
em {
font-style: normal;
}
.font01 {
font-family: 'TheJamsil';
font-weight: 300;
}
.font02 {
font-family: 'Tmon';
font-weight: 300;
}
.font03 {
font-family: 'DalseoDarling';
font-weight: 300;
}
.font04 {
font-family: 'SuseongDotum';
font-weight: 300;
}
.font05 {
font-family: 'HealthsetGothic';
font-weight: 300;
}
.font06 {
font-family: 'KOHIBaeum';
font-weight: 300;
}
.font07 {
font-family: 'JejuGothic';
font-weight: 300;
}
.font08 {
font-family: 'TwayAir';
font-weight: 300;
}
.font09 {
font-family: 'TmoneyRoundWind';
font-weight: 300;
}
.font10 {
font-family: 'SCoreDream';
font-weight: 300;
}그 다음 reser.css파일은 따로 만들어 폰트작업을 해줍니다.
이미지 CSS
body {
width: 100%;
height: 100vh;
overflow: hidden;
background-position: center center;
background-size: cover;
/* background-color: #f1cfcf; */
}
body.img01 {
background-image: url(../img/mouseEffect01-min.jpg);
}
body.img02 {
background-image: url(../img/mouseEffect02-min.jpg);
}
body.img03 {
background-image: url(../img/mouseEffect03-min.jpg);
}
body.img04 {
background-image: url(../img/mouseEffect04-min.jpg);
}
body.img05 {
background-image: url(../img/mouseEffect05-min.jpg);
}
body.img06 {
background-image: url(../img/mouseEffect06-min.jpg);
}
body.img07 {
background-image: url(../img/mouseEffect07-min.jpg);
}
body.img08 {
background-image: url(../img/mouseEffect08-min.jpg);
}
body.img09 {
background-image: url(../img/mouseEffect09-min.jpg);
}
body.img10 {
background-image: url(../img/mouseEffect10-min.jpg);
}
body::after {
content: '';
position: absolute;
left:0; top:0;
width: 100%;
height: 100vh;
background-color: rgba(5, 66, 70, 0.87);
z-index: -1;
}
body.bg01::after {
background-color: rgba(34, 5, 70, 0.87);
}
body.bg02::after {
background-color: rgba(5, 70, 40, 0.87);
}
body.bg03::after {
background-color: rgba(53, 70, 5, 0.87);
}
body.bg04::after {
background-color: rgba(70, 23, 5, 0.87);
}
body.bg05::after {
background-color: rgba(15, 5, 70, 0.87);
}
body.bg06::after {
background-color: rgba(70, 5, 14, 0.87);
}
body.bg07::after {
background-color: rgba(1, 23, 24, 0.945);
}
body.bg08::after {
background-color: rgba(47, 70, 5, 0.87);
}
body.bg09::after {
background-color: rgba(70, 44, 5, 0.87);
}
body.bg10::after {
background-color: rgba(5, 66, 70, 0.87);
}
/* header */
#header {
padding: 20px;
position: absolute;
left: 0;
top: 0;
}
#header h1 {
margin-bottom: 10px;
}
#header a {
color: #fff;
}
#header p {
margin-bottom: 10px;
}
#header li {
display: inline-block;
}
#header li a {
border: 1px solid #fff;
width: 30px;
height: 30px;
display: inline-block;
color: #fff;
}
#header li.active a {
background-color: #fff;
color: #000;
}
/* footer */
#footer {
position: absolute;
right: 0;
bottom: 0;
padding: 20px;
}
#footer a {
color: #fff;
}
그 다음 이미지와 header, footer 에 대한 CSS를 작업해줍니다.
자바스크립트
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>작업해줄 gsap를 불러와주고
<script>
//선택자
const cursor = document.querySelector(".mouse__cursor");
다음 script 안에서 작업해줍니다.
우선 cursor선택자를 설정해줍니다.
// console.log(cursor.clientWidth); //190
// console.log(cursor.clientHeight); //190
// console.log(cursor.offsetWidth); //200
// console.log(cursor.offsetHeight); //200
console.log(cursor.getBoundingClientRect());clientWidth, clientHeight, offsetWidth, offsetHeight 를 사용해 크기 및 위치를 알 수 있는 요소의 속성값을 불러와줍니다.
const circle = cursor.getBoundingClientRect();
window.addEventListener("mousemove", e => {
gsap.to(cursor, {
duration: 0.5,
left: e.pageX -circle.width/2,
top: e.pageY -circle.height/2
});
});마우스 커서의 움직임에 다라 원하는 DOM 요소를 이동시키는 애니메이션을 만들어줍니다.
window 객체에 mousemove 이벤트 리스너가 등록되어 있습니다.
이는 마우스가 움직일 때마다 해당 이벤트가 발생하고, 콜백함수가 실행됩니다.
콜백 함수의 인자인 e 는 마우스 이벤트 객체입니다.
✨ gsap.to()
GSAP 라이브러리에서 제공하는 함수, 요소를 애니메이션화하는데에 사용.
이 함수는 이동시키려는 DOM 요소 cursor 와 애니메이션 옵션
duration, left, top 이 전달
<style>
#header {
z-index: 10;
}
.mouse__wrap {
cursor: none;
}
.mouse__text {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: hidden;
z-index: 10;
}
.mouse__text p{
font-size: 25px;
line-height: 1.5;
}
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
border-radius: 50%;
border: 5px solid #fff;
background-color: rgba(255,255,255,0.5);
background-image: url(img/mouseEffect03-min.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
</style>
</head>그 다음 head안에 style 태그로 css작업을 해줍니다.
mouse cursor에 마우스 디자인을 작업해줍니다.
background를 사용해
커서 디자인 안에 사진이 보이게 작업해줍니다.
cursor: none; 으로 마우스 커서가 안보이게 해주고,
cursor디자인 위로 글자가 오게하려면
z-index를 넣어 주면 됩니다.
마우스 효과 1번은 아래 링크에 들어가시면 보실 수 있습니다.
https://mi-1119.tistory.com/43
자바스크립트 마우스 이펙트(마우스 효과)
자바스크립트 마우스 이펙트(마우스 효과) 💜 이미지 유형 코드 보기 완성 화면 Success comes after repeated failures. 성공은 실패를 거듭한 후에 온다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0
mi-1119.tistory.com
반응형