[웹 프런트엔드] CSS3로 채팅

1623 단어
초판
css3로 탄막을 실현하는 것은 확실히 비교적 간단하다. 애니메이션을 설정하여 탄막을 화면 오른쪽에서 화면 왼쪽으로 이동하게 하면 된다. 처음에는 이렇게 실현되었다.
.danmu {
  position: fixed;
  left: 100%;
  animation: danmu 5s linear 0s 1;
}

@keyframes danmu {
  from {
    left: 100%;
    transform: translateX(0);
  }
  to {
    left: 0;
    transform: translateX(-100%);
  }
}

pc단에서 테스트하는 것은 매우 유창하고 효과가 좋다. 그러나 이동단에서 시험해 보니 이 애니메이션은 유창하지 않다. 렉이 있고 OS가 약간 좋다.android라면 높은 기기도 렉이 있고 낮은 기기도 더욱 뚜렷하다.
연유
한 연구에 따르면 키 프레임에서 left를 사용하면 left의 변화가 과장되는 과정에서 reflow를 초래하여 렉이 걸리는 것으로 나타났다.그러면 개선된 사고방식이 비교적 명확해진다.left를 제거하고translate만 사용한다.
새로운 문제
그러나 모두translate를 사용하면 새로운 문제가 생겼다.left:100%를 사용하면 화면 오른쪽에서 탄막이 나타날 수 있다.그러나translate가 사용하는 백분율 단위는 자신에 비해 명확하게translate를 주어야 한다.화면폭은 운행할 때 js를 사용해야만 얻을 수 있다.이렇게 되면 애니메이션의 키 프레임은 js를 사용하여 동적 생성을 해야 할 것 같다.
솔루션
애니메이션을 보여주기 전에 현재 화면 너비에 따라 키프레임을 동적으로 생성합니다.
// css
.danmu {
  position: fixed;
  left: 0;
  visibility: hidden;
  animation: danmu 5s linear 0s 1;
}

// js   
  let style = document.createElement('style');
  document.head.appendChild(style);
  let width = window.innerWidth;
  let from = `from { visibility: visible; -webkit-transform: translateX(${width}px); }`;
  let to = `to { visibility: visible; -webkit-transform: translateX(-100%); }`;
  style.sheet.insertRule(`@-webkit-keyframes danmu { ${from} ${to} }`, 0);

주의, 여기.mu에서visibility를 숨기도록 설정했습니다. 그렇지 않으면 스크린이 화면 왼쪽에 쌓여 있고 키프레임에서visibility를 숨기면 스크린이 애니메이션 과정에서만 보일 수 있습니다.이렇게 하는 이유는 탄막의 초기 위치가left:0이어야만 편리하게 탄막 머리가 화면 오른쪽에서 나타나고 오른쪽에서 왼쪽으로 이동하여 탄막 끝부분이 화면 왼쪽으로 사라질 때까지 설정할 수 있기 때문이다.
XGBoost
[Windows/WPF] 배경 프로그램 만들기 (.NET5 버전 별도)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage