CSS: pur CSS scroll animation
j'ai cherché un moyen de faire défiler vers le bas en cliquant sur un bouton qui est situé en haut d'une page en utilisant CSS3 seulement.
donc j'ai trouvé ce tutoriel: http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions /
Démo: http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout /
mais il est un peu trop avancé pour mon besoins puisque je veux juste le navigateur pour faire défiler vers le bas sur un clic sur un bouton situé en haut de la page, donc je me demandais: est-il possible de faire ces scrolls CSS sans les boutons d'entrée, juste avec une étiquette d'ancrage?
HTML ressemble à ceci: <a href="#" class="button">Learn more</a>
j'ai déjà quelques CSS que je dois déclencher sur le clic de bouton:
/* 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 réponses
vous pouvez le faire avec des balises ancre en utilisant CSS3 :target pseudo-sélecteur, ce sélecteur va être déclenché lorsque l'élément avec le même id que le hachage de L'URL actuelle obtenir une correspondance. exemple
sachant cela, nous pouvons combiner cette technique avec l'utilisation de sélecteurs de proximité comme " + " et " ~ " pour sélectionner tout autre élément à travers l'élément cible qui id obtient match avec le hachage de l'url courante. Un exemple de ceci serait quelque chose comme vous demandez .
bien, si vous n'y voyez pas d'inconvénient ne supportant pas tous les navigateurs principaux (seulement Firefox 36+, Chrome 61+ et Opera 48+), utilisez les liens d'ancrage et cette propriété unique pour le conteneur de défilement:
scroll-behavior: smooth;
voir la référence MDN .
utilisez - le comme ceci:
<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>
voici un violon .
et voici aussi un Violon avec défilement horizontal et vertical.
vous pouvez utiliser mon script à partir de CodePen en enveloppant tout le contenu dans un .levit-container 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();
}();
et pour les navigateurs WebKit j'ai eu de bons résultats avec:
.myElement {
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth; // Added in from answer from Felix
overflow-x: scroll;
}
Cela fait défiler se comporter beaucoup plus comme le comportement standard du navigateur - au moins il fonctionne bien sur l'iPhone que nous testions sur!
Espère que ça aide,
Ed