마우스 효과에 대해 공부를하고 직접 적용시켜 만들어보았습니다.
HTML
<body class="img02 bg01 Jamsil" >body 요소에는 img02, bg01, Jamsil이라는 클래스가 지정되어 있습니다.
<header id="header">
<h1>Javascript Mouse Effect01</h1>
<p>마우스 이펙트 - 마우스 따라다니기</p>
<ul>
<li class="active"><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="mouseEffect01.html">4</a></li>
<li><a href="mouseEffect01.html">5</a></li>
<li><a href="mouseEffect01.html">6</a></li>
</ul>
</header>헤더 요소에는 id가 header인 요소가 있고, 그 안에는 h1, p, ul, li 요소들이 있습니다.
h1 요소는 "Javascript Mouse Effect01"이라는 텍스트를 가지고 있습니다.
p 요소는 "마우스 이펙트 - 마우스 따라다니기"라는 텍스트를 가지고 있습니다.
ul 요소 안에는 여러 개의 li 요소들이 있습니다.
li 요소들은 각각 a 요소를 자식으로 갖고 있으며, href 속성 값이 다른 여러 개의 HTML 파일에 대한 링크를 가지고 있습니다.
<main id="main">
<div class="mouse_wrap">
<div class="mouse__cursor"></div>
<div class="mouse__text">
<p><span class="s1">Never regret yesterday.</span> <span class="s2">Life is in me today</span> <span class="s3">and tomorrow is making my own.</span></p>
<p><span class="s4">어제</span>를 <span class="s5">후회</span>하지 마라. <span class="s6">인생</span>은 오늘의 <span class="s7">내 안</span>에 있고 <span class="s8">내일은</span> <span class="s9">스스로 만드는것</span>이다.</p>
</div>
</div>
<div class="mouse__info">
<ul>
<li>clientX : <span class="clientX">0</span>px</li>
<li>clientY : <span class="clientY">0</span>px</li>
<li>offsetX : <span class="offsetX">0</span>px</li>
<li>offsetY : <span class="offsetY">0</span>px</li>
<li>pageX : <span class="pageX">0</span>px</li>
<li>pageY : <span class="CSS
mouse.css
더보기
body {
width: 100%;
height: 100vh;
background-position: center center;
background-size: cover;
overflow: hidden;
}
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;
z-index: -1;
}
body.bg01::after {
background-color: rgba(97, 86, 34, 0.692);
}
body.bg02::after {
background-color: rgba(34, 35, 97, 0.692);
}
body.bg03::after {
background-color: rgba(226, 121, 117, 0.692);
}
body.bg04::after {
background-color: rgba(41, 184, 129, 0.692);
}
body.bg05::after {
background-color: rgba(139, 41, 184, 0.692);
}
body.bg06::after {
background-color: rgba(184, 41, 125, 0.692);
}
body.bg07::after {
background-color: rgba(41, 155, 184, 0.692);
}
body.bg08::after {
background-color: rgba(41, 184, 41, 0.692);
}
body.bg09::after {
background-color: rgba(184, 170, 41, 0.692);
}
body.bg10::after {
background-color: rgba(184, 41, 41, 0.692);
}
.Jamsil{
font-family: "TheJamsil";
}
.cafe24{
font-family: "Cafe24ClassicType";
}
.BMJua{
font-family: "BMJua";
}
.PyeongChang{
font-family: "PyeongChang";
}
.MabinogiClassic{
font-family: "MabinogiClassic";
}
.BMDoHyeon{
font-family: "BMDoHyeon";
}
.JalpullineunOneul{
font-family: "JalpullineunOneul";
}
.JalpullineunHaru{
font-family: "JalpullineunHaru";
}
.BaskinRobbins{
font-family: "BaskinRobbins";
}
.ROKA{
font-family: "ROKA";
}reset.css
더보기
@import url('https://webfontworld.github.io/TheJamsil/TheJamsil.css');
@import url('https://webfontworld.github.io/Cafe24Classictype/Cafe24ClassicType.css');
@import url('https://webfontworld.github.io/BMJua/BMJua.css');
@import url('https://webfontworld.github.io/PyeongChang/PyeongChang.css');
@import url('https://webfontworld.github.io/NexonMabinogi/MabinogiClassic.css');
@import url('https://webfontworld.github.io/BMDoHyeon/BMDoHyeon.css');
@import url('https://webfontworld.github.io/Jalpullineun/JalpullineunOneul.css');
@import url('https://webfontworld.github.io/Jalpullineun/JalpullineunHaru.css');
@import url('https://webfontworld.github.io/baskinrobbins/BaskinRobbins.css');
@import url('https://webfontworld.github.io/armynuri/ROKA.css');
/* reset */
* {
margin: 0;
padding: 0;
color: #fff;
}
*,*::before, *::after {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000000;
}
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;
}
/* header */
#header {
padding: 20px;
position: absolute;
left: 0;
top: 0;
}
#header h1 {
margin-bottom: 10px;
}
#header a {
color: #fff;
}
#header p {
display: inline-block;
}
#header li {
display: inline-block;
}
#header li a {
width: 0px;
height: 0px;
border-bottom: 28px solid ;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
}
#header li.active a{
color: rgb(208, 221, 29);
}
/* footer */
#footer {
position: absolute;
right: 0;
bottom: 0;
padding: 20px;
}
#footer a{
color: #fff;
}<style>
.mouse__wrap {
cursor: none;
}
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid #fff;
background-color: rgba(255, 255, 255, 0.1);
box-shadow: -1px 1px 20px aquamarine;
user-select: none;
pointer-events: none;
transition:
background-color 0.3s,
border-color 0.3s,
transform 0.6s
;
}
.mouse__cursor.s1{
background-color: rgba(255, 165, 0, 0.4);
border-color: yellow;
}
.mouse__cursor.s2{
background-color: rgba(140, 0, 255, 0.4);
border-color: purple;
transform: scale(2) rotateY(720deg);
}
.mouse__cursor.s3{
background-color: rgba(0, 47, 255, 0.4);
border-color: rgb(0, 47, 255);
transform: scale(1.5) rotateX(545deg);
}
.mouse__cursor.s4{
background-color: rgba(255, 0, 149, 0.4);
border-color: rgb(255, 0, 140);
transform: scale(10);
border-radius: 0;
}
.mouse__cursor.s5{
background-color: rgba(255, 60, 0, 0.4);
border-color: rgb(255, 51, 0);
transform: scale(5) skew(140deg) rotate(200deg);
border-width: 0;
}
.mouse__cursor.s6{
background-color: rgba(50, 255, 118, 0.4);
border-color: rgb(0, 255, 34);
transform: scale(0.1);
}
.mouse__text {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.mouse__text p {
font-size: 2vw;
line-height: 1.5;
}
.mouse__text p:last-child {
font-size: 3vw;
}
.mouse__text p span {
color: yellow;
border-bottom: 1px dashed yellow;
}
.mouse__info {
position: absolute;
left: 0;
bottom: 0;
padding: 20px;
font-size: 16px;
line-height: 1.6;
}
</style>이 코드는 마우스 커서에 대한 스타일링을 포함하는 CSS 코드입니다.
마우스 커서는 .mouse__cursor 클래스로 지정되어 있으며, 이 클래스는 position, width, height, border-radius, border, background-color, box-shadow, user-select, pointer-events, transition과 같은 여러 속성으로 구성됩니다.
또한 마우스가 특정 요소 위에 위치할 때 나타나는 특정 상태를 나타내는 클래스도 있습니다. 예를 들어, .mouse__cursor.s1 클래스는 마우스가 특정 요소 위에 위치할 때 나타나는 상태를 나타냅니다.
이 코드에는 텍스트를 표시하는 요소도 있습니다. .mouse__text 클래스는 전체 화면을 채우는 요소이며, 텍스트 내용을 담고 있습니다.
마지막으로 .mouse__info 클래스는 페이지 하단에 위치하는 정보 영역을 나타내며, 글꼴 크기와 줄 간격을 조정합니다.
댓글