html - moviles - parallax js
¿Parallax con solo CSS? (5)
Buscando parallax pure css y haciendo clic en el primer resultado de CodePen (el segundo resultado es la página actual :), se muestra un bonito ejemplo con fondos fijos y de desplazamiento . Para el registro, coloco el código fuente aquí, proporcionando soporte para Chrome, Safari y Opera, también.
El ejemplo parece tener dos tipos de fondos:
- fijo , con
background-attachment: fixeden el elemento deseado, como#slide2 - scrolling , with
transform: translateZ(-1px) scale(2)antes del elemento deseado, como#slide1
Además, el efecto de desplazamiento parece depender de la configuración transform-style: preserve-3d del body para funcionar correctamente. (Por cierto, IE no es compatible transform-style ).
Finalmente, se pueden lograr diferentes velocidades de desplazamiento al ajustar la propiedad de transform , como los dos elementos img del ejemplo.
<!DOCTYPE html>
<html>
<head>
<meta charset=''UTF-8''>
<title> Pure CSS Parallax Scrolling </title>
<!-- Copyright (c) 2014 by Keith Clark -->
<style>
@import url(http://fonts.googleapis.com/css?family=Nunito);
html {
height: 100%;
overflow: hidden;
}
body {
margin:0;
padding:0;
perspective: 1px;
-webkit-perspective: 1px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: Nunito;
}
h1 {
font-size: 250%
}
p {
font-size: 140%;
line-height: 150%;
color: #333;
}
.slide {
position: relative;
padding: 25vh 10%;
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
-webkit-transform-style: inherit;
transform-style: inherit;
}
img {
position: absolute;
top: 50%;
left: 35%;
width: 320px;
height: 240px;
-webkit-transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
padding: 10px;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
img:last-of-type {
-webkit-transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}
.slide:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
}
.title {
width: 50%;
padding: 5%;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide:nth-child(2n) .title {
margin-left: 0;
margin-right: auto;
}
.slide:nth-child(2n+1) .title {
margin-left: auto;
margin-right: 0;
}
.slide, .slide:before {
background: 50% 50% / cover;
}
.header {
text-align: center;
font-size: 175%;
color: #fff;
text-shadow: 0 2px 2px #000;
}
#title {
background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-6.jpg");
background-attachment: fixed;
}
#slide1:before {
background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-4.jpg");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide2 {
background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-3.jpg");
background-attachment: fixed;
}
#slide3:before {
background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-5.jpg");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide4 {
background: #222;
}
</style>
</head>
<body>
<div id="title" class="slide header">
<h1>Pure CSS Parallax</h1>
</div>
<div id="slide1" class="slide">
<div class="title">
<h1>Slide 1</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
</div>
<div id="slide2" class="slide">
<div class="title">
<h1>Slide 2</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
<img src="http://lorempixel.com/output/abstract-q-c-640-480-6.jpg">
<img src="http://lorempixel.com/output/abstract-q-c-640-480-4.jpg">
</div>
<div id="slide3" class="slide">
<div class="title">
<h1>Slide 3</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
</div>
<div id="slide4" class="slide header">
<h1>The End</h1>
</div>
</body>
He estado trabajando en un proyecto y he terminado con el contenido. Para el diseño, sin embargo, estoy pensando en utilizar la técnica de desplazamiento de paralaje.
Sin embargo, todo lo que he podido averiguar ha sido con JavaScript o Jquery, mientras que solo soy competente con CSS3.
¿Se puede implementar el desplazamiento de paralaje solo con CSS3 (con HTML5 si es necesario), en lugar de usar complementos jquery? Sería bueno si pudiera señalar algunos tutoriales para el mismo.
Nota: Esto está cerca del efecto que quiero producir ( http://jessandruss.us/ )
Debería poder obtener al menos un efecto parcial mediante el uso de transiciones CSS. Sin embargo, como mencionó Alejandro, el CSS no detecta desplazamiento.
Eche un vistazo a "That Cool Parallax Scrolling Effect - en Pure CSS3!" ( http://css.dzone.com/articles/cool-parallax-scrolling-effect ) para un ejemplo.
La clave está en el uso de enlaces de páginas internas. Entonces, en lugar de desplazarse, un usuario haría clic en un enlace en la página y la página se desplazaría hacia arriba / abajo a la nueva sección. A medida que la página se desplaza, las transiciones proporcionan el efecto de paralaje.
Realmente me gusta la respuesta de KitKat , pero como Roy Prins sugirió, sería muy útil reducirla a lo esencial, para ver exactamente qué es suficiente para crear este efecto. Lo he hecho aquí.
Para producir un efecto de desplazamiento de paralaje muy básico, el siguiente ejemplo es suficiente. Tenga en cuenta que los prefijos del navegador, los fallbacks, etc. no se han solucionado. Los valores de CSS marcados con /* eg */ pueden cambiarse a discreción del diseñador.
Mira mi bolígrafo bifurcado aquí .
<html><head><style>
html,
body {
width: 100%;
height: 100%;
overflow: auto;
}
body {
perspective: 1px; /* e.g. */
}
.background {
transform:
translateZ(-.4px)
scale(.6)
translateX(-104%)
translateY(-40%)
rotate(-5deg); /* e.g. */
}
.foreground {
transform:
translateZ(.25px)
translateX(50%)
scale(.75)
rotate(2deg); /* e.g. */
}
</style></head><body>
<img class="background"/>
<img class="foreground"/>
</body></html>
Una pequeña corrección a la respuesta de KitKat: parece que no se necesita transform-style:preserve-3d (al menos en Chrome), y que el efecto depende del overflow:auto del cuerpo overflow:auto . Quita esto y la paralaje falla.
Sí, si desea un simple efecto de paralaje básico, entonces la regla CSS3 @keyframes sería suficiente (no tan paralaje), pero nuevamente, como los otros mencionados, si desea usar el paralaje al máximo, entonces usar javascript es una obligación. De todos modos te he dado enlaces para ambas formas. Siéntase libre de revisarlos y usar lo que quiera.
CSS3 puro:
http://jasonlau.biz/home/css/parallax-effect-using-only-css-with-no-javascript / * with keyframes * /
http://css.dzone.com/articles/cool-parallax-scrolling-effect / * sin fotogramas clave * /
Con JQuery:
http://potentpages.com/parallax-tutorials/
http://www.webdesignerdepot.com/2013/07/how-to-create-a-simple-parallax-effect/
http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641
http://www.1stwebdesigner.com/css/create-scrolling-parallax-website/
Espero que haya ayudado
<!DOCTYPE html>
<html>
<head>
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<p>Scroll Up and Down this page to see the parallax scrolling effect.Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.</p>
<div class="parallax"></div>
<div style="height:1000px;background-color:red;font-size:36px">
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>
</body>
</html>
Aquí hay un codepen