웹 표준 사이트 만들기 - 이미지 유형1

웹 표준 사이트 만들기 - 이미지 유형1

Parallax Layout To climb steep hills requires slow pace at first. 험준한 산을 오르기 위해선 먼저 천천히 걸어야 한다. Mouse Effect01 - Javascript 마우스 이펙트 - 따라다니기 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px

@font-face { font-family: 'NEXONLv1Gothic'; font-weight: 300; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/NEXON Lv1 Gothic OTF Light.woff') format('woff'); font-style: normal; } @font-face { font-family: 'NEXONLv1Gothic'; font-weight: 400; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/NEXON Lv1 Gothic OTF.woff') format('woff'); font-style: normal; } * { margin: 0; padding: 0; } /* mouse */ .mouse { background: #222; color: #fff; font-family: 'NEXONLv1Gothic'; font-weight: 400; } .bg { position: relative; height: 100vh; background-image: url(../assets/img/bg1.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; } .bg::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100vh; background-color: rgba(5, 36, 70, 0.9); z-index: -1; } /* info */ .info { color: #fff; font-family: "NEXONLv1Gothic"; padding: 20px; position: absolute; left: 0; top: 0; } .info.right { left: auto; right: 0px; top: 0px; } .info h1 { font-weight: 300; font-size: 20px; line-height: 1.6; border-bottom: 1px dashed #fff; display: inline-block; margin-bottom: 10px; } .info h1 a { color: #fff; text-decoration: none; font-weight: 400; } .info p { font-weight: 300; font-size: 16px; } .info li { list-style: none; display: inline; } .info li a { display: inline-block; text-decoration: none; color: #fff; border: 1px dashed #fff; border-radius: 50%; width: 20px; height: 20px; line-height: 21px; text-align: center; font-size: 12px; margin-bottom: 5px; } .info li.active a { background: #fff; color: #000; } .info.left { top: auto; right: 0px; bottom: 0px; } .info.left li { display: block; font-size: 14px; line-height: 1.6; font-weight: 300; } /* mouseCont */ .mouseCont { display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; width: 100%; height: 100vh; overflow: hidden; font-family: 'NEXONLv1Gothic'; cursor: none; } .mouseCont p { font-size: 2.5vw; line-height: 2; font-weight: 300; } .mouseCont p:last-child { font-size: 3vw; font-weight: normal; font-weight: 400; } .mouseCont span { font-style: normal; border-bottom: 0.15vw dashed #fff; } .cursor { position: absolute; left: 0; top: 0; width: 50px; height: 50px; border-radius: 50%; border: 3px solid #fff; z-index: 9999; background-color: rgba(255,255,255,0.1); user-select: none; pointer-events: none; transition: background-color .2s, border-color .2s, border-radius .2s, transform .6s } .cursor.style1 { background-color: rgba(255, 165, 0, 0.4); border-color: orange } .cursor.style2 { background-color: rgb(140, 0, 255, 0.4); border-color: rgb(140, 0, 255); transform: rotateY(720deg) scale(2); } .cursor.style3 { background-color: rgb(0, 47, 255, 0.4); border-color: rgb(0, 47, 255); transform: scale(1.5) rotate(45deg); border-radius: 10px; } .cursor.style4 { background-color: rgb(121, 235, 197, 0.4); border-color: rgb(121, 235, 197); transform: scale(10) rotateY(360deg); } .cursor.style5 { background-color: rgb(255, 0, 85, 0.4); border-color: rgb(255, 0, 85); transform: rotateY(720deg) scale(0.1); } .cursor.style6 { background-color: rgb(255, 81, 0, 0.4); border-color: rgb(255, 81, 0); transform: scale(1.5) rotate(-720deg); border-radius: 0; }

from http://wtss.tistory.com/448 by ccl(A) rewrite - 2021-09-14 18:26:58