css3 - examples - CSS: animación de desplazamiento CSS puro
keyframes css3 ejemplos (4)
He estado buscando una forma de desplazarme hacia abajo cuando hago clic en un botón que se encuentra en la parte superior de una página usando solo CSS3.
Así que encontré este tutorial: http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/
Demostración: http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/
Pero es un poco demasiado avanzado para mis necesidades ya que solo quiero que el navegador se desplace con un clic en un botón ubicado en la parte superior de la página, así que me pregunto: ¿es posible hacer esos desplazamientos CSS sin los botones de entrada, solo con una etiqueta de anclaje?
El HTML se ve así: <a href="#" class="button">Learn more</a>
Ya tengo un CSS que necesito activar al hacer clic en el botón:
/* 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;
}
}
Bueno, si no te importa admitir no todos los principales navegadores (solo Firefox 36+, Chrome 61+ y Opera 48+), usa enlaces de anclaje y esta propiedad única para el contenedor de desplazamiento:
scroll-behavior: smooth;
Ver la referencia de MDN .
Úselo así:
<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>
Aquí hay un Fiddle .
Y aquí también hay un Fiddle con desplazamiento horizontal y vertical.
Puede hacerlo con etiquetas de anclaje usando css3 :target pseudo-selector de :target , este selector se activará cuando el elemento con la misma ID que el hash de la URL actual obtenga una coincidencia. Example
Sabiendo esto, podemos combinar esta técnica con el uso de selectores de proximidad como "+" y "~" para seleccionar cualquier otro elemento a través del elemento objetivo que coincida con id con el hash de la url actual. Un ejemplo de esto sería algo así como lo que estás preguntando .
Puedes usar mi script desde CodePen simplemente envolviendo todo el contenido dentro de un DIV .levit-container.
~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();
}();
Y para los navegadores habilitados para webkit he tenido buenos resultados con:
.myElement {
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth; // Added in from answer from Felix
overflow-x: scroll;
}
Esto hace que el desplazamiento se comporte mucho más como el comportamiento estándar del navegador, ¡al menos funciona bien en el iPhone en el que estábamos probando!
Espero que ayude,
Ed