코딩기록

리액트)1주차 학습 - css 애니메이션 본문

프론트/리액트

리액트)1주차 학습 - css 애니메이션

뽀짝코딩 2024. 6. 8. 12:49
728x90

1. html에서 js로 이벤트 적용하기

모달 열고, 닫기

<body>
  <h1 id="heading">제목입니다</h1>
  <p>내용입니다</p>
  <button>수정하기</button>
  <button onclick="modalOpCl('block')">삭제하기</button>

  <div class="modalDiv">
    <div class="bg" onclick="modalOpCl('none')"></div>
    <div class="modal">
      <p>정말 삭제하시겠습니까?</p>
      <button onclick="modalOpCl('none')">취소</button>
      <button>삭제</button>
    </div>
  </div>

  <!--  JS에서 UI 바꾸는 방법
  1. html/css ui를 만든다.
  2. css로 숨긴다.
  3. js로 다시 나타나게 한다.

  dry: don't repeat your code

  -->

  <script>
    //모달 열고, 닫기
    // function modalOpen() {
    //   var modal = document.querySelector(".modalDiv");
    //   modal.style.display = "block";
    // }

    // function modalClose() {
    //   var modal = document.querySelector(".modalDiv");
    //   modal.style.display = "none";
    // }

    //코드 반복 줄이기
    function modalOpCl(인자) {
      var modal = document.querySelector(".modalDiv");
      modal.style.display = 인자;

    }
  </script>

</body>

 

 

2. wiggle 애니메이션

복잡한 애니메니션이 필요할때 사용

<body>
  <h1 class="wiggle">안녕하세요!</h1>
</body>

 

  wiggle.css  

/* wiggle 애니메이션 */
@keyframes wiggle {
  0% { 
    transform: rotate(0deg); 
    color: red;
    }
  25% { 
    transform: rotate(10deg);
    color: orange;
  }
  50% { 
    transform: rotate(0deg);
    color: yellow;
  }
  75% { 
    transform: rotate(-10deg);
    color: blue;
  }
  100% { 
    transform: rotate(0deg);
    color: green;
  }
}

h1.wiggle {
  display: inline-block;
  animation: wiggle 5s;

}

 

3. 마우스 움직임 추적

마우스가 움직일때마다 좌표가 화면에 출력된다.

<body>
  <h1>x : <span id="x"></span>, y : <span id="y"></span></h1>
  <div id="cursor">	
  <script>
    window.addEventListener("mousemove", 마우스추적);
    var x = document.querySelector("#x");
    var y = document.querySelector("#y");

    function 마우스추적(event) {
      x.innerHTML = event.clientX;
      y.innerHTML = event.clientY;
      cursor.style.top = event.clientY + "px";
      cursor.style.left = event.clientX + "px";
      // cursor.style.top = (event.clientY - 25 ) + "px";  //마우스가 정중앙에 위치
      // cursor.style.left = (event.clientX - 25 ) + "px"; //마우스가 정중앙에 위치

	  // transform으로 	
      // cursor.style.transform = "translate(" + event.clientX + "px," + event.clientY + "px)";  
      //let value = (event.clientX - 25) + "px," + (event.clientY - 25) + "px";  //마우스가 정중앙에 위치
      //cursor.style.transform = "translate(" + value + ")";
    }
  </script>

</body>

 

 

 

#cursor {
  cursor: none; /* 마우스 숨기기 */
  position: absolute;
  top: 0;
  left: 0;

  width: 50px;
  height: 50px;
  background-color: rgb(255, 255, 0);
  border-radius: 50%;

}

 

 

4. Scroll 위치 추적

*현재 문서에서 스크롤을 얼마나 내렸는지 확인하는 방법*
문서의 전체 높이 : 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 () {
      var documentHeight = document.documentElement.scrollHeight;
      var browserHeight = window.innerHeight;
      scrollY = document.documentElement.scrollTop;
      var percent = scrollY / (documentHeight - browserHeight) * 100;
      // target.style.height = Math.round(percent) + "%";  //세로 스크롤

      target.style.width = Math.round(percent) + "%";   //가로 스크롤
      console.log(percent + ",  " + Math.round(percent));
    });
  </script>

</body>

 

  scroll.css  

@charset "UTF-8";
body {
  height: 1000vh;
  background: rgb(2, 0, 36);
  background: linear-gradient(45deg, rgb(2, 0, 36) 0%, rgb(9, 9, 121) 35%, rgb(0, 212, 255) 100%);
}

.scroll-outer {
  position: fixed;
  background-color: gray;
  border-radius: 14px;
  overflow: hidden;
  transform: translateY(-50%);
  /* 세로 스크롤 */
  /* 가로 스크롤 */
  width: 100vw;
  height: 5px;
  top: 10px;
  left: 50%;
}

.scroll-inner {
  /* 세로 스크롤 */
  position: absolute;
  top: 0;
  background-color: yellow;
  border-radius: 14px;
  /* 가로 스크롤 */
  width: 0%;
  height: 100%;
}

 

 

 

 

 

 

참고

판다코딩 강의 - 처음부터 따라해보는 HTML/CSS 실습

 

 

반응형
저작자표시 비영리 변경금지

'프론트 > 리액트' 카테고리의 다른 글

리액트)2주차 학습 - 기본부터 끝까지 러닝메이트 HTML/CSS  (0) 2024.06.10
리액트)1주차 학습 - html, CSS 문법  (0) 2024.06.04
리액트)스터디6- 웹퍼블리셔-css메모장 선택자... /업뎃중  (0) 2024.05.16
리액트)스터디4- vs code 자주쓰는 플러그인 (확장도구)  (0) 2024.05.10
리액트)스터디3- css 참고 및 사이트  (0) 2024.05.09
'프론트/리액트' Related Articles more
Comments