Pure CSS scroll animation
Szukałem sposobu na przewinięcie w dół po kliknięciu przycisku, który znajduje się na górze strony, używając tylko CSS3.
Więc znalazłem ten tutorial: http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/
Demo: http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/
Ale jest to trochę zbyt zaawansowane dla moich potrzeb, ponieważ chcę tylko, aby przeglądarka przewijała w dół po kliknięciu na jeden przycisk znajduje się na górze strony, więc zastanawiałem się: czy można zrobić te zwoje CSS bez przycisków wprowadzania, tylko z tagiem kotwicy?
HTML wygląda tak: <a href="#" class="button">Learn more</a>
Mam już jakiś CSS, który muszę uruchomić po kliknięciu przycisku:
/* 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;
}
}
4 answers
Możesz to zrobić za pomocą tagów anchor używając pseudo-selektora css3 :target
, ten selektor zostanie uruchomiony, gdy element o tym samym id co hash bieżącego adresu URL zostanie dopasowany. przykład
Wiedząc o tym, możemy połączyć tę technikę z wykorzystaniem selektorów zbliżeniowych, takich jak " + "i"~", aby wybrać dowolny inny element poprzez element docelowy, który id dopasuje się do hasha bieżącego adresu url. Przykładem tego może być coś w rodzaju tego, czym jesteś pytanie .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-13 01:06:57
Użyj linków kotwiących i właściwości scroll-behavior
( MDN reference) dla kontenera przewijania:
scroll-behavior: smooth;
Obsługa przeglądarek : Firefox 36+, Chrome 61 + (dlatego również Edge 79+) i Opera 48+.
Intenet Explorer, non-Chromium Edge i (do tej pory) Safari nie obsługują i po prostu "przeskakują" do celu łącza.
Przykładowe użycie:
<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>
Oto Skrzypce .
A tu jeszcze Skrzypce zarówno poziome jak i przewijanie pionowe.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-04-02 13:04:19
Możesz użyć mojego skryptu z CodePen, po prostu owijając całą zawartość w.levit-pojemnik DIV.
~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();
}();
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-05 16:57:13
A dla przeglądarek obsługujących webkit miałem dobre wyniki z:
.myElement {
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth; // Added in from answer from Felix
overflow-x: scroll;
}
To sprawia, że przewijanie zachowuje się znacznie bardziej jak standardowe zachowanie przeglądarki-przynajmniej działa dobrze na iPhonie, na którym testowaliśmy!
Hope that helps,
Ed
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-21 13:01:54