마우스 이펙트 01

- Frederick Philips Brooks
Mythical Man-Month 저자

728x90

마우스 이펙트 01번 입니다.

완성된 예제 입니다.

HTML 코드입니다.

<body class="img01 bg01 font10">
    <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="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><span class="s1">Love</span> looks not with the <span class="s2">eyes</span>, but with the <span class="s3">mind</span>.</p>
                <p><span class="s4">사랑</span>은 <span class="s5">눈</span>으로 보지 않고 <span class="s6">마음</span>으로 보는 거지. </p>
            </div>
        </div>
        <div class="mouse_info">
            <ul>
                <li>clientX : <span class="clientX">0</span></li>
                <li>clientY : <span class="clientY">0</span></li>
                <li>offsetX : <span class="offsetX">0</span></li>
                <li>offsetY : <span class="offsetY">0</span></li>
                <li>pageX : <span class="pageX">0</span></li>
                <li>pageY : <span class="pageY">0</span></li>
                <li>screenX : <span class="screenX">0</span></li>
                <li>screenY : <span class="screenY">0</span></li>
            </ul>
        </div>
    </main>
    <!-- main -->
    
    <footer id="footer">
        <a href="mailto:ture403@gmail.com">ture403@gmail.com</a>
    </footer>
</body>

reset.css코드입니다.

@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
@import url('https://webfontworld.github.io/hallym/Hallym.css');
@import url('https://webfontworld.github.io/TheJamsil/TheJamsil.css');
@import url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo.css');
@import url('https://webfontworld.github.io/NanumSquare/NanumSquare.css');
@import url('https://webfontworld.github.io/PyeongChang/PyeongChang.css');
@import url('https://webfontworld.github.io/woori/Wooridaum.css');
@import url('https://webfontworld.github.io/gimpo/GimpoGothic.css');
@import url('https://webfontworld.github.io/BMJua/BMJua.css');
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

/* 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;
}
ul,ol,li {
    list-style: none;
}
img {
    vertical-align: top;
    width: 100%;
}
em {
    font-style: normal;
}
.font01 {
    font-family: 'NexonLv1Gothic';
    font-weight: 300;
}
.font02 {
    font-family: 'Hallym';
}
.font03 {
    font-family: 'TheJamsil';
}
.font04 {
    font-family: 'NanumSquareNeo';
}
.font05 {
    font-family: 'NanumSquare';
}
.font06 {
    font-family: 'PyeongChang';
}
.font07 {
    font-family: 'Wooridaum';
}
.font08 {
    font-family: 'GimpoGothic';
}
.font09 {
    font-family: 'BMJua';
}
.font10 {
    font-family: 'Orbitron';
    font-weight: 400;
}

main.css 입니다.

body {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
}
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: rgba(5,36,70,0.87);
    z-index: -1;
}
body.img01::after{
    background: rgba(5,36,70,0.87);
}
body.img02::after{
    background: rgba(34,36,70,0.87);
}
body.img03::after{
    background: rgba(88,36,70,0.87);
}
body.img03::after{
    background: rgba(88,20,81,0.87);
}
body.img04::after{
    background: rgba(88,20,20,0.87);
}
body.img05::after{
    background: rgba(83, 14, 14, 0.87);
}
body.img05::after{
    background: rgba(88, 65, 20, 0.87);
}
body.img06::after{
    background: rgba(90, 64, 12, 0.87);
}
body.img07::after{
    background: rgba(87, 69, 34, 0.87);
}
body.img08::after{
    background: rgba(133, 106, 54, 0.87);
}
body.img09::after{
    background: rgba(173, 138, 72, 0.87);
}
body.img10::after{
    background: rgba(194, 162, 102, 0.87);
}

/* header */
#header {
    padding: 20px;
    position: absolute;
    left: 0;
    top: 0;
}
#header h1 {
    margin-bottom: 10px;
}
#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;
    text-align: center;
    line-height: 30px;
}
#header li.active a {
    background-color: #fff;
    color: #000;
}
/* footer */
#footer {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 20px;
}
#footer a {
    color: #fff;
}

html 안에 있는 css입니다.

.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);
    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: orange;
}
.mouse_cursor.s2 {
    background-color: rgba(53, 209, 39, 0.4);
    border-color: rgb(53, 209, 39);
    transform: scale(2) rotateY(720deg);
}
.mouse_cursor.s3 {
    background-color: rgba(220, 233, 35, 0.4);
    border-color: rgb(220, 233, 35);
    transform: scale(1.5) rotateX(540deg);
}
.mouse_cursor.s4 {
    background-color: rgba(11, 158, 243, 0.4);
    border-color: rgb(11, 158, 243);
    transform: scale(10);
    border-radius: 10px;
}
.mouse_cursor.s5 {
    background-color: rgba(11, 158, 243, 0.4);
    border-color: rgb(11, 158, 243);
    transform: scale(10) skew(90deg);
}
.mouse_cursor.s6 {
    background-color: rgba(243, 11, 224, 0.4);
    border-color: rgb(243, 11, 224);
    transform: scale(0.5);
}
.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.8;
}
.mouse_text p:last-child {
    font-size: 3vw;
}
.mouse_text p span {
    color: orange;
    border-bottom: 1px dashed rgba(235, 169, 47, 0.7);
}
.mouse_info {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 20px;
    font-size: 16px;
    line-height: 1.6;
}

자바스크립트 코드 입니다.

window.addEventListener("mousemove", function(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").innerText = event.pageX;
    document.querySelector(".pageY").innerText = event.pageY;
    document.querySelector(".screenX").innerText = event.screenX;
    document.querySelector(".screenY").innerText = event.screenY;
});

//선택자
const cursor = document.querySelector(".mouse_cursor");

window.addEventListener("mousemove", function(e){
    cursor.style.left = e.clientX -25 + "px";
    cursor.style.top = e.clientY -25 + "px";
});
// 하나씩 출력
// document.querySelector(".s1").addEventListener("mouseover",function(){
//     cursor.classList.add("s1");
// });

// document.querySelector(".s1").addEventListener("mouseout",function(){
//     cursor.classList.remove("s1");
// });

// document.querySelector(".s2").addEventListener("mouseover",function(){
//     cursor.classList.add("s2");
// });

// document.querySelector(".s2").addEventListener("mouseout",function(){
//     cursor.classList.remove("s2");
// });

// document.querySelector(".s3").addEventListener("mouseover",function(){
//     cursor.classList.add("s3");
// });

// document.querySelector(".s3").addEventListener("mouseout",function(){
//     cursor.classList.remove("s3");
// });

// document.querySelector(".s4").addEventListener("mouseover",function(){
//     cursor.classList.add("s4");
// });

// document.querySelector(".s4").addEventListener("mouseout",function(){
//     cursor.classList.remove("s4");
// });

// document.querySelector(".s5").addEventListener("mouseover",function(){
//     cursor.classList.add("s5");
// });

// document.querySelector(".s5").addEventListener("mouseout",function(){
//     cursor.classList.remove("s5");
// });

// document.querySelector(".s6").addEventListener("mouseover",function(){
//     cursor.classList.add("s6");
// });

// document.querySelector(".s6").addEventListener("mouseout",function(){
//     cursor.classList.remove("s6");
// });

//for문
// for(let i=1; i<=6; i++){
//     document.querySelector(".s"+i).addEventListener("mouseover",function(){
//         cursor.classList.add("s"+i);
//     });

//     document.querySelector(".s"+i).addEventListener("mouseout",function(){
//         cursor.classList.remove("s"+i);
//     });
// }

//forEach문
// document.querySelectorAll(".mouse_text span").forEach(function(el,index){
//     el.addEventListener("mouseover",function(){
//         cursor.classList.add("s"+(index+1));
//     });
//     el.addEventListener("mouseout",function(){
//         cursor.classList.remove("s"+(index+1));
//     });
// });

// getAttribute();
document.querySelectorAll(".mouse_text span").forEach(function(span){
    let attr = span.getAttribute("class");
    // attr = s1 s2 s3 s4 s5 s6
    span.addEventListener("mouseover",function(){
        cursor.classList.add(attr);
    });
    span.addEventListener("mouseout",function(){
        cursor.classList.remove(attr);
    });
})
// setAttribute();

첨에 있는 코드는 mousemove 했을때 각 X,Y값을 넣어 주었습니다.
2번쨰 코드는 mousemove 했을때 curor에 값을 넣어주었습니다.
그밑에 주석 s1-s6까지 일일이 넣어서 적용한 코드 입니다.
//for문 밑에 있는 코드는 for문을 이용해서 i값을 넣어서 코드를 적용한 것입니다.
//forEach문 밑에 있는 코드는 forEach를 이용해서 쓴 코드 입니다. 매개변수 (el,index)를 넣어서 값을 불러왔습니다.
그안에 이제 el은 mouse_info li span을 불러와서 index값을 추가 해 주었습니다.
// getAttribute(); 밑에 있는건 클래스를 불러와서 적용하는 코드 입니다.
mouse_text span 안에 서 변수 하나 설정 해서 class를 불러왔습니다.
그리고 mouseover , mouseout attr 변수 안에 넣어서 적용을 했습니다.

속성 정리 표 입니다.

속성	설명
clientX , clientY	브라우저 창의 왼쪽 꼭대기를 기준으로 한 마우스의 X,Y 자표(스크롤 무시)
screenX , screenY	컴퓨터 화면의 왼쪽 꼭대기를 기준으로 한 마우스의 X,Y 좌표
pageX , pageY	브라우저에서 보여주고 있는 페이지의 왼쪽 꼭대기를 기준으로 한 마우스 X,Y좌표
offsetX , offsetY	해당 객체를 기준으로 한 마우스의 X,Y좌
getAttribute()	선택한 요소(element)의 특정 속성(attribute)의 값을 가져옵니다.

완성된 전체화면 입니다.

https://ture403.github.io/web2023/javascript/mouse/mouseEffect01.html

01. 마우스 이펙트

Love looks not with the eyes, but with the mind. 사랑은 눈으로 보지 않고 마음으로 보는 거지.

ture403.github.io

완성된 코드 입니다.

https://github.com/ture403/web2023/blob/main/javascript/mouse/mouseEffect01.html

GitHub - ture403/web2023: 수업시간예제입니다.

수업시간예제입니다. Contribute to ture403/web2023 development by creating an account on GitHub.

github.com

june blog

마우스 이펙트 01

- Frederick Philips Brooks

마우스 이펙트 01번 입니다.

완성된 예제 입니다.

HTML 코드입니다.

reset.css코드입니다.

main.css 입니다.

자바스크립트 코드 입니다.

속성 정리 표 입니다.

완성된 전체화면 입니다.

완성된 코드 입니다.

'mouse'의 다른글

티스토리툴바

« 2024/09 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

마우스 이펙트 01

- Frederick Philips Brooks

마우스 이펙트 01번 입니다.

완성된 예제 입니다.

HTML 코드입니다.

reset.css코드입니다.

main.css 입니다.

자바스크립트 코드 입니다.

속성 정리 표 입니다.

완성된 전체화면 입니다.

완성된 코드 입니다.

'mouse'의 다른글

관련글

티스토리툴바