CSS : 순수 CSS 스크롤 애니메이션
CSS3 만 사용하여 페이지 상단에있는 버튼을 클릭 할 때 아래로 스크롤하는 방법을 찾고 있습니다.
그래서이 튜토리얼을 찾았습니다 : http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/
데모 : http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/
그러나 브라우저가 페이지 상단에있는 하나의 버튼을 클릭하여 아래로 스크롤하기를 원하기 때문에 내 요구에 비해 너무 발전했습니다. 그래서 궁금했습니다. 입력 버튼없이 CSS 스크롤을 수행 할 수 있습니까? 앵커 태그로?
HTML은 다음과 같습니다. <a href="#" class="button">Learn more</a>
버튼 클릭시 트리거해야하는 CSS가 이미 있습니다.
/* Button animation tryout. */
.animate {
animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@keyframes moveDown{
0% {
transform: translateY(-40px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
css3 :target의사 선택기를 사용하여 앵커 태그로 수행 할 수 있습니다 .이 선택기는 현재 URL의 해시와 동일한 ID를 가진 요소가 일치 할 때 트리거됩니다. 예
이를 알면이 기술을 "+"및 "~"와 같은 근접 선택기 사용과 결합하여 현재 URL의 해시와 일치하는 대상 요소를 통해 다른 요소를 선택할 수 있습니다. 이것의 예는 당신이 묻는 것과 같은 것 입니다.
모든 주요 브라우저 (Firefox 36+, Chrome 61+ 및 Opera 48+ 만)를 지원 하지 않아도된다면 스크롤 컨테이너에 앵커 링크와이 단일 속성을 사용하세요.
scroll-behavior: smooth;
참고 항목 MDN 참조 .
다음과 같이 사용하십시오.
<head>
<style type="text/css">
html {
scroll-behavior: smooth;
}
</style>
</head>
<body id="body">
<a href="#foo">Go to foo!</a>
<!-- Some content -->
<div id="foo">That's foo.</div>
<a href="#body">Back to top</a>
</body>
여기에 바이올린이 있습니다.
그리고 여기에 가로 및 세로 스크롤이 모두 있는 Fiddle 도 있습니다 .
.levit-container DIV 내의 모든 콘텐츠를 래핑하여 CodePen의 스크립트를 사용할 수 있습니다.
~function () {
function Smooth () {
this.$container = document.querySelector('.levit-container');
this.$placeholder = document.createElement('div');
}
Smooth.prototype.init = function () {
var instance = this;
setContainer.call(instance);
setPlaceholder.call(instance);
bindEvents.call(instance);
}
function bindEvents () {
window.addEventListener('scroll', handleScroll.bind(this), false);
}
function setContainer () {
var style = this.$container.style;
style.position = 'fixed';
style.width = '100%';
style.top = '0';
style.left = '0';
style.transition = '0.5s ease-out';
}
function setPlaceholder () {
var instance = this,
$container = instance.$container,
$placeholder = instance.$placeholder;
$placeholder.setAttribute('class', 'levit-placeholder');
$placeholder.style.height = $container.offsetHeight + 'px';
document.body.insertBefore($placeholder, $container);
}
function handleScroll () {
this.$container.style.transform = 'translateZ(0) translateY(' + (window.scrollY * (- 1)) + 'px)';
}
var smooth = new Smooth();
smooth.init();
}();
https://codepen.io/acauamontiel/pen/zxxebb?editors=0010
그리고 웹킷 지원 브라우저의 경우 다음과 같은 좋은 결과를 얻었습니다.
.myElement {
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth; // Added in from answer from Felix
overflow-x: scroll;
}
이로 인해 스크롤링이 표준 브라우저 동작과 훨씬 더 비슷하게 작동합니다. 적어도 우리가 테스트 한 iPhone에서는 잘 작동합니다!
도움이 되길 바랍니다.
Ed
참고 URL : https://stackoverflow.com/questions/17631417/css-pure-css-scroll-animation
'developer tip' 카테고리의 다른 글
| SSH 연결을 확인하기 위해 bash 스크립트를 만드는 방법은 무엇입니까? (0) | 2020.10.18 |
|---|---|
| 정적 메서드-다른 메서드에서 메서드를 호출하는 방법은 무엇입니까? (0) | 2020.10.18 |
| dict python에 대한 URL 쿼리 매개 변수 (0) | 2020.10.18 |
| rails server bin / rails : 6 : 경고 : 이미 초기화 된 상수 APP_PATH 오류 (0) | 2020.10.18 |
| Gradle이 0이 아닌 종료 값 1로 완료되었습니다 (ic_launcher.png : 오류 : 중복 파일). (0) | 2020.10.18 |