ㅇ transform - a에서 b로 변형시킨다
(상대적으로 속도가 빠르다.)
ㅇ animation 속성
ㅡ 대표적인 CSS wiggle 애니메이션
ㅡ animation : 행동 시간 반복 ;
ㅡ @keyframes 행동 { }
ㅇ 마우스 움직임 추적하기 ( 사용자의 마우스 기준 )
window에 이벤트 걸어주기 !!!
window.addEventListener("mousemove", 마우스추
x.innerHTML = event.clientX;
offsetWidth 패딩,테두리 포함
clientWidth 순수 html의 width 크기만 계산
<div id="box3"></div>
<p class="p">안녕하세요</p>
<h2>마우스움직임</h2>
<h3>x: <span id="x"></span> y: <span id="y"></span></h3>
<script>
window.addEventListener("mousemove", 마우스추적);
var x = document.querySelector("#x");
var y = document.querySelector("#y");
function 마우스추적(event) {
x.innerHTML = event.clientX;
y.innerHTML = event.clientY;
console.log(event);
}
</script>
</body>
1) 예제 마우스 따라오기 - js
<body>
<h2>마우스움직임</h2>
<h3>x: <span id="x"></span> y: <span id="y"></span></h3>
<div id="cursor"></div>
<script>
window.addEventListener("mousemove", 마우스추적);
var x = document.querySelector("#x");
var y = document.querySelector("#y");
var cursor = document.querySelector("#cursor");
function 마우스추적(event) {
x.innerHTML = event.clientX;
y.innerHTML = event.clientY;
cursor.style.top = event.clientY - 25 + "px";
cursor.style.left = event.clientX - 25 + "px";
}
</script>
</body>
css
body {
cursor: none;
}
#cursor {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: coral;
}
2) transform 으로 적용하기
<body>
<h2>마우스움직임</h2>
<h3>x: <span id="x"></span> y: <span id="y"></span></h3>
<div id="cursor"></div>
<script>
window.addEventListener("mousemove", 마우스추적);
var x = document.querySelector("#x");
var y = document.querySelector("#y");
var cursor = document.querySelector("#cursor");
let value = (event.clientX - 25) + "px," + (event.clientY - 25) + "px";
function 마우스추적(event) {
x.innerHTML = event.clientX;
y.innerHTML = event.clientY;
cursor.style.transform = "translate(" + value + ")";
}
</script>
</body>
3) 마우스의 추적 -글자나오게 하기 how to map mouse position in css
<body>
<div id="targetBox">
<div id="blind"></div>
<h1>안녕하세요. 자바스크립트 연습</h1>
</div>
<script>
var targetBox = document.querySelector("#targetBox");
var blind = document.querySelector("#blind");
targetBox.addEventListener("mousemove", function (e) {
blind.style.transform = "translateX(" + e.clientX + "px)";
});
</script>
</body>
css
body {
/* cursor: none; */
}
#targetBox {
width: auto;
display: inline-block;
border: 1px solid red;
position: relative;
overflow: hidden;
}
#targetBox h1 {
padding: 20px;
margin: 0px;
font-size: 1.5rem;
}
#blind {
width: 100%;
height: 100%;
position: absolute;
background-color: red;
top: 0;
left: 0;
/* transform: translateX(50%);
블라인드를 이걸로 움직여준다. */
}
4) 스크롤 트릭 css scroll trick
문서의 전체 높이 : document.documentElement.scrollheight
브라우저가 보여주고있는 높이: window.innerHeight
스크롤의 위치 : document.documentElement.scrollTop
스크롤의 위치 / (문서의 전체 높이 - 브라우저가 보여주고 있는 높이 )*100%
<body>
<div class="scroll-outer">
<div class="scroll-inner"></div>
</div>
<script>
// 문서의 전체 높이 : document.documentElement.scrollheight
// 브라우저가 보여주고있는 높이: window.innerHeight
// 스크롤의 위치 : document.documentElement.scrollTop
// 스크롤의 위치 / (문서의 전체 높이 - 브라우저가 보여주고 있는 높이 )*100%
var scrollY = 0;
var target = document.querySelector(".scroll-inner");
window.addEventListener("scroll", function (e) {
var documentHeight = document.documentElement.scrollHeight;
var browserHeight = window.innerHeight;
scrollY = document.documentElement.scrollTop;
var percent = (scrollY / (documentHeight - browserHeight)) * 100 + "%";
target.style.height = percent;
console.log(percent);
});
</script>
<!-- 100%로 꽉차게 하려면 body의 height 를 고정값으로 px 로주거나, 결과값을 반올림한다. -->
</body>
자바스크립트 반올림하기 (계산하기 쉽게)
Math.round();
ㅡ scss
$radius: 14px;
body {
height: 1000vh;
background: rgb(2, 0, 36);
background: linear-gradient(
90deg,
rgba(2, 0, 36, 1) 0%,
rgba(121, 9, 90, 1) 35%,
rgba(0, 212, 255, 1) 100%
);
}
.scroll-outer {
position: fixed;
top: 50%;
right: 10px;
transform: translateY(-50%);
width: 10px;
height: 100px;
border-radius: $radius;
background-color: gray;
}
.scroll-inner {
width: 100%;
height: 0px;
position: absolute;
top: 0;
background-color: yellow;
border-radius: $radius;
}
자바스크립트 반올림하기 (계산하기 쉽게)
Math.round();
5) 스크롤 위치추적하기 2 - 가로 스크롤 (요즘 트랜드)
<body>
<div class="scroll-outer">
<div class="scroll-inner"></div>
</div>
<script>
// 문서의 전체 높이 : document.documentElement.scrollheight
// 브라우저가 보여주고있는 높이: window.innerHeight
// 스크롤의 위치 : document.documentElement.scrollTop
// 스크롤의 위치 / (문서의 전체 높이 - 브라우저가 보여주고 있는 높이 )*100%
var scrollY = 0;
var target = document.querySelector(".scroll-inner");
window.addEventListener("scroll", function (e) {
var documentHeight = document.documentElement.scrollHeight;
var browserHeight = window.innerHeight;
scrollY = document.documentElement.scrollTop;
var percent = (scrollY / (documentHeight - browserHeight)) * 100;
target.style.width = Math.round(percent) + "%";
console.log(percent,
'IT 정보' 카테고리의 다른 글
| [IT]noreferrer, noopener, nofollow 무엇인가 ? - 보안이슈, SEO (0) | 2024.02.24 |
|---|---|
| [IT} Flex와 Grid의 차이점 간단하게 요약!! (0) | 2024.02.24 |
| [입문] Git / Github - ISSUES (0) | 2024.01.16 |
| [소스트리] 클론 오류, Github연동 (깃허브 연동, SSH passphrase) (0) | 2024.01.15 |
| [입문] Git / Github 활용하기의 모든것 ! ( 설치, 설정 및 세팅,ssh key 등록 -윈도우 오류) 기본동작원리, 기본 용어 (0) | 2024.01.10 |
