MOUSE EFFECT07 - JAVASCRIPT

마우스를 이용한 자바스크립트 효과입니다. 마우스 값을 이용하여 효과를 만들 수 있습니다.

Code Youtube

Code Sample

전체 소스는 여기서 다운 받을 수 있습니다.

샘플 소스는 여기서 확인 할 수 있습니다.

Code Reference

Value	Description	View
`innerWidth`	브라우저의 콘텐츠 영역의 너비(스크롤 포함)값을 반환합니다.	View
`innerHeight`	브라우저의 콘텐츠 영역의 높이(스크롤 포함)값을 반환합니다.	View
`outerWidth`	브라우저의 툴바/스크롤바를 포함한 바깥 영역의 너비를 반환홥니다.	View
`outerHeight`	브라우저의 툴바/스크롤바를 포함한 바깥 영역의 높이를 반환홥니다.	View
`Math.ceil()`	숫자 보다 크거나 같은 수 중에서 가장 작은 정수를 반환합니다.	View
`Math.floor()`	제공된 숫자 보다 작거나 같은 가장 큰 정수를 반환합니다.	View
`Math.round()`	제공된 숫자를 반올림하여 가장 가까운 정수를 반환합니다.	View

Code example

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mouse Effect07 - javascript</title>
    </head>
    <body>
        
        <!-- main -->
        <main>
            <div class="cursor"></div>
    
            <div class="contents">
                <p>I dream my painting and I paint my dream.</p>
                <p>나는 나의 그림을 <em>꿈</em>꾸고, 내 <em>꿈</em>을 그린다.</p>
            </div>
        </main>
        <!-- //main -->
        
        <!-- info -->
        <div class="info left">
            <h1><a href="mouse00.html">Javascript Mouse Effect07</a></h1>
            <p>마우스 방향에 따라 움직이기</p>
        </div>
        <!-- //info -->
    
    </body>
</html>

/* reset */
@font-face { 
    font-family: 'NEXON Lv1 Gothic OTF'; 
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
    font-weight: normal; 
    font-style: normal; 
}

*, *::before, *::after {
    box-sizing: border-box; 
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #fff;
    transition: all 0.2s;
}

a:hover {
    border-bottom: 1px dashed #fff;
}

img {
    width: 100%;
    vertical-align: top;
}

ul {
    padding: 10px 20px;
}

li {
    list-style: none;
}

body {
    background: url(../assets/img/sc08@2.jpg) no-repeat center center;
    background-size: cover;
    color: #fff;
    height: 100vh;
    transition: all 0.2s;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.5;
    font-family: 'NEXON Lv1 Gothic OTF';
    cursor: none;
}

body::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(13, 28, 3, 0.9);
    z-index: -1;
}

/* info */
.info {
    position: absolute;
    z-index: 1000;
}

.info h1 {
    font-size: 20px;
    border-bottom: 1px dashed #fff;
    margin-bottom: 8px;
}

.info p, .info li {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 3px;
}

.info li.active a:last-child {
    background: #fff;
    color: #000;
}

.info.left {
    left: 20px;
    top: 20px;
}

.info.right {
    right: 10px;
    top: 10px;
}

.info.right a {
    display: inline-block;
    margin-left: 5px;
    width: 20px; height: 20px;
    border: 1px dashed #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    transition: all 0.2s;
}

.info.right a:hover {
    background: #fff;
    color: #000;
}

.info.bottom {
    left: 10px;
    bottom: 10px;
}

.info.bottom li {
    display: block;
    transition: all 0.2s;
}

.info.bottom li.active {
    color: orange;
}

.info.bottom li:hover {
    color: orange;
}

.info.view {
    right: 20px;
    bottom: 20px;
}

.info.view a {
    color: #fff;
    border: 1px solid #fff;
    border-radius: 30px;
    padding: 5px 30px;
}

@media (max-width: 800px){
    .info.bottom {display: none;}
    .info.right {display: none;}
}

/* main */
.cursor {
    position: absolute; 
    width: 200px; height: 200px;
    border-radius: 50%;
    z-index: -1;
    user-select: none;
    pointer-events: none;
    background: url(../assets/img/sc08@2.jpg) center center fixed;
    background-size: cover;
    border: 5px solid #fff;
    overflow: hidden;
}

.contents {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    flex-direction: column;
    overflow: hidden;
}

.contents p {
    max-width: 70vw;
    font-size: 3vw;
    text-align: justify;
}

.contents p:first-child {
    font-size: 2vw;
    line-height: 2;
}

.contents p em {
    color: orange;
    border-bottom: 2px dashed orange;
    font-style: normal;
}

 <!-- script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script>
    const cursor = document.querySelector(".cursor");
    const circle = cursor.getBoundingClientRect();
    // const width = cursor.offsetWidth;
    // const height = cursor.offsetHeight;

    function follow(e){
        gsap.to(cursor, {duration: .3, left: e.pageX - circle.width, top: e.pageY - circle.height});
    }

    document.addEventListener("mousemove", follow);
</script>

INSTAGRAM 바로가기

TWITTER 바로가기

STUDY 바로가기

YOUTUBE 바로가기

INFLUENCER 바로가기

여러분의 댓글은 영상을 제작하는데 많은 힘이 됩니다.
모르시거나 궁금한 사항은 언제든지 댓글로 남겨주세요.
최대한 힘이 되어 드리겠습니다.
오늘도 수고하셨습니다.

728x90

저작자표시

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

webs portfoliodeveloper

Port developer

challenge

1.

2.

3.

completed 전체 보기

스터디 과정 26기 수료 | 김현* 프론트 취업 완료

스터디 과정 26기 수료 | 양다* 프론트 취업 완료

스터디 과정 26기 수료 | 김아* 프론트 취업 완료

스터디 과정 26기 수료 | 김가* 프론트 취업 완료

스터디 과정 25기 수료 | 이태* 프론트 취업 완료

스터디 과정 26기 수료 | 양다* 프론트 취업 완료

스터디 과정 26기 수료 | 김아* 프론트 취업 완료

스터디 과정 26기 수료 | 김가* 프론트 취업 완료

국비지원 과정 30기 수료 | 김성* 프론트 취업 완료

국비지원 과정 30기 수료 | 양다* 프론트 취업 완료

국비지원 과정 30기 수료 | 이영* 프론트 취업 완료

국비지원 과정 30기 수료 | 이중* 프론트 취업 완료

국비지원 과정 30기 수료 | 박선* 프론트 취업 완료

국비지원 과정 30기 수료 | 최진* 프론트 취업 완료

국비지원 과정 30기 수료 | 김석* 프론트 취업 완료

국비지원 과정 30기 수료 | 김대* 프론트 취업 완료

국비지원 과정 30기 수료 | 권규* 프론트 취업 완료

국비지원 과정 30기 수료 | 권혜* 프론트 취업 완료

국비지원 과정 30기 수료 | 김민* 프론트 취업 완료

국비지원 과정 30기 수료 | 김대* 프론트 취업 완료

portfolio 전체 보기

재밌는 포트폴리오

포트포리오

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 포트폴리오

가로 세로 포트폴리오

귀여운 포트폴리오

쿨한 포트폴리오

페이지 포트폴리오

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 개발자

웹 퍼블리셔

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 개발자

디자인 및 퍼블리셔

프론트앤드 개발자

interview 전체보기

review

스터디 후기 이다*

스터디 후기 이다*

MOUSE EFFECT07 - JAVASCRIPT

Code Youtube

Code Sample

Code Reference

Code example

Share

기타(삭제예정)/02 MOUSE EFFECT Related Articles

더보기

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역