Antecedentes e introducción
Si está navegando por cualquier sitio web moderno en computadoras o teléfonos móviles, es posible que haya experimentado que cuando se desplaza hacia abajo o hacia arriba en el sitio web, parece que toda la pantalla se mueve en la dirección del desplazamiento. Si este es el efecto del fondo, la información del primer plano también cambia a medida que se desplaza. Este efecto se puede describir brevemente como Parallax Scrolling.
Desplazamiento
Entendamos lo que significa desplazarse. Cuando está viendo una página web, la acción de navegar por la página web en cualquier dirección (arriba, abajo, izquierda y derecha) se conoce como desplazamiento.
Por lo general, si es un usuario de una computadora de escritorio, esta acción se realiza mediante la rueda de desplazamiento del mouse.
Historia
Veamos la palabra - Desplazarse. Antiguamente, para enviar un mensaje a otras personas que se encuentran a gran distancia se utilizaban pergaminos manuscritos. Estos pergaminos se veían como se muestra a continuación:
Imagina la acción de la persona que sostiene el pergamino. Para leer el contenido en su totalidad, la persona tendría que "desplazarse" y seguir rodando. El uso de estos pergaminos también fue para mantener un registro de texto o decisiones. Con el paso del tiempo, el uso del rollo aumentó ya que se preparó a partir de diferentes materiales de escritura como: papiro, pergamino y papel.
A medida que evolucionaron las computadoras, fue posible procesar y almacenar documentos, tablas e imágenes de gran tamaño. A veces, los datos eran tantos que el tamaño de la pantalla simplemente no era suficiente para presentar los datos al usuario. Cuando los datos a mostrar eran más grandes que el tamaño de la ventana o el área de visualización, los datos permanecían ocultos. Esto requirió un enfoque de expansión del área de la pantalla.
Algunas opciones para lograr la expansión de la pantalla se enumeran a continuación:
- Para aumentar el tamaño de la pantalla
- Para reducir el tamaño de los datos
- Para usar el desplazamiento
Este mecanismo de desplazamiento es más importante para las personas que trabajan con diseño gráfico y edición de fotografías.
Origen de desplazamiento de Parallax
Echemos un vistazo a la historia del desplazamiento de paralaje. Primero, entenderemos lo que significa la palabra paralaje. La palabra paralaje proviene de la palabra griegaπαράλλαξις (paralaje), que significa alternancia.
Si estamos viendo un objeto desde un ángulo, el objeto aparecerá de una manera específica. Pero si mueve el mismo objeto desde diferentes posiciones, habrá un movimiento aparente de objetos. Este fenómeno se conoce como Parallax.
Ahora que hemos entendido el origen y los antecedentes de Parallax, comprendamos la historia y el concepto de desplazamiento de Parallax en el diseño web.
Definición
Según Wikipedia - Parallax scrolling es una técnica en gráficos por computadora donde las imágenes de fondo pasan por la cámara más lentamente que las imágenes de primer plano, creando una ilusión de profundidad en una escena 2D y agregando a la sensación de inmersión en la experiencia virtual.
El desplazamiento de Parallax se empleó en los primeros días de la animación. Muchos de los estudios de animación (como Disney) utilizaron cámaras multiplano para lograr el efecto de paralaje.
A medida que las tecnologías de gráficos por computadora evolucionaron junto con los marcos de vanguardia como JavaScript, los diseñadores y desarrolladores web ahora pueden crear sitios con una rica experiencia. Aunque el desplazamiento de paralaje comenzó con un par de capas, se llevó al siguiente nivel con barras de desplazamiento en las computadoras. La técnica siguió siendo la misma, pero debido a su aplicación para Scrolling, se creó una experiencia única.
Ejemplos
El desplazamiento de paralaje se utiliza ampliamente en los sitios web modernos. Dado que el desplazamiento de paralaje se puede implementar para móviles y sitios de escritorio de una sola vez, la popularidad de dichos sitios se ha disparado en los últimos años.
A continuación se muestran algunos ejemplos de sitios web que emplean el desplazamiento de paralaje:
Bear Grylls
A medida que avanza la animación, podrá ver cómo el contenido del sitio web se está volviendo interactivo. A medida que avanza, se revelará más y más información.
Haga que su dinero importe
Para presentar al lector los beneficios de una cooperativa de crédito, este sitio lo lleva a través de una historia. A medida que avanza, la información se revela de una manera única.
Infografía de InfoQuest
El viaje de un empleado para encontrar información crítica en su lugar de trabajo se representa mediante la experiencia de desplazamiento.
GitHub 404
Esto es un poco diferente de la experiencia habitual de paralaje, el objeto en la parte superior de la pantalla se mueve al pasar el puntero del mouse sobre él.
Aplicaciones de Parallax Scrolling
A estas alturas, debería quedar claro a partir de la definición y los antecedentes que el desplazamiento de paralaje es útil en una amplia variedad de medios digitales. Algunas de las aplicaciones son el desplazamiento de paralaje a continuación:
Diseño de juego
El desplazamiento Parallax se usa ampliamente en el diseño de juegos. El personaje debe moverse en relación con el fondo y con el control del jugador mediante el mouse y el teclado, toda la experiencia debe cambiar. El diseño del juego es una forma muy primitiva pero moderna de usar el desplazamiento de paralaje.
Sitios web
Para que el usuario se sienta atraído por el sitio web, es importante una experiencia dinámica y diferente. Como puede haber notado en los ejemplos de sitios web discutidos anteriormente, el desplazamiento de paralaje se suma al contenido debido a su representación de manera interactiva.
Este capítulo habla sobre los conceptos de diseño web y las ventajas de usar el desplazamiento de paralaje en el diseño web.
Fondo de diseño web
Desde el comienzo del 20 º siglo, los medios de papel ha entrado en una competencia feroz debido a los medios digitales. Los medios digitales incluyen lo que vemos en Internet y, por lo tanto, las revistas aliadas que aparecen.
Los boletines que recibe como parte de las suscripciones semanales / mensuales también se incluyen en los medios digitales. Principalmente, los medios digitales dependen en gran medida de los dispositivos móviles y de escritorio. Hace una diferencia cuando puede ver contenido en su dispositivo móvil (computadora de mano) así como en dispositivos de escritorio. La forma en que se muestra el contenido en cualquiera de los dispositivos, está en juego un estilo específico de diseño del contenido.
Este estilo de diseño se conoce como Web Designing. Desde el punto de vista del diseño o la codificación, cuando un diseñador de páginas web se propone crear una página web, también tiene en cuenta los dispositivos móviles.
Según Wikipedia, Web design abarca muchas habilidades y disciplinas diferentes en la producción y mantenimiento de sitios web. Una de esas habilidades es diseñar una experiencia impactante para los usuarios. El diseño web se adapta a esta experiencia y proporciona una forma organizada de organizar los contenidos de la página y les proporciona un estilo diferente.
El diseño web incluye: diseño de interfaz, diseño gráfico y el uso de ciertos estándares para escribir el código. Este trabajo puede ser realizado por una sola persona o por un equipo de personas.
Hay muchas herramientas disponibles en el mercado para facilitar este trabajo, sin embargo, depende de las habilidades creativas de cada uno crear la apariencia de una página web.
Diseño web moderno
Con la evolución de la tecnología, hay una explosión de conocimiento. Internet se ha convertido en una cosa y ha disparado la calidad de nuestras vidas. En cualquier momento, un usuario medio de Internet procesa cada vez más información. Esta información puede estar en forma de un sitio web en una computadora de escritorio o desde un dispositivo de mano; tableta o un teléfono móvil.
Aunque tanta información intenta atraer la atención del usuario, es obvio que, como persona que diseña una experiencia web, there are only 3 seconds allocated to pass the message across.
¿Cómo se hace frente a esto? Es más que importante transmitir el mensaje, porque está en la fuente de cualquier diseño web. Quieres construir un sitio web que comunique, al mismo tiempo que tiene que atraer y hacer que el usuario se apegue al contenido. Ciertamente es una tarea difícil.
Teniendo en cuenta la amplia gama de trabajo para cualquier contenido web determinado, cada vez más personas ingresan al mundo del diseño web. Un diseñador web creativo es la comidilla de la ciudad gracias a su increíble talento para crear una buena experiencia de usuario. El diseñador web puede actualmente aceptar un trabajo en una empresa de marketing / publicidad o comenzar por su cuenta para sumergirse en el diseño web.
Aesthetic appeal is the key for a given content on web. Esto significa que un diseñador web debe conocer los principios y la base del diseño, el color, el espaciado, etc. Cada día más usuarios ven contenido web de gran calidad. Es obvio que uno comparará la página web o sitio web actual con el que se visitó hace unas horas o unos minutos. El orden del contenido, junto con buenos gráficos y colores, ha hecho que muchos banners / páginas independientes sean algo popular en Internet.
Ejemplo
Tomemos el caso de un gráfico simple. Hay muchos gráficos en Internet, llamados memes. Son simplesGraphics Interchange Format (GIF)imágenes con texto incrustado dentro de los gráficos. Estos memes están circulando por Internet basándose en un evento reciente en alguna parte del mundo. Si miramos este ejemplo, el único atractivo que tienen es gráfico y algún texto relevante o irrelevante.
Aún así, ha ganado tanta popularidad que hace pensar en posibilidades asombrosas en Internet.
Por lo tanto, para que un diseño web sea efectivo, tanto la creatividad como el método para comunicar el mensaje juegan un papel importante.
It is important point to note that a successful web page is combination of Web Design and Web Development. Según la tendencia actual del mercado, junto con el diseñador web, un desarrollador web es imprescindible en el equipo. Un diseñador web siempre buscará inspiración y utilizará su creatividad para crear gráficos y esquemas de color relevantes. Mientras que un desarrollador web utilizará sus habilidades de codificación para llevar los gráficos y los esquemas de color en vivo en el sitio web.
Un diseñador web también debe tener conocimientos sobre cómo escribir el código, para que el esquema de color o gráfico deseado sea utilizable por un desarrollador web. Un código simple en una aplicación simple como el Bloc de notas puede ayudar a un diseñador web a tomar el asiento del conductor en el desarrollo web.
Uso de Parallax Scrolling
Parallax Scrolling cae dentro de los límites del trabajo tanto del diseñador como del desarrollador web. Un diseñador web puede crear el efecto de Parallax Scrolling utilizando herramientas como InVision, UXPin para transmitir al desarrollador web el comportamiento previsto en el desplazamiento. Además, un desarrollador web utilizará sus habilidades para crear el efecto de desplazamiento de paralaje. Esto se puede hacer mediante diferentes técnicas de JavaScript, CSS y jQuery. En los siguientes capítulos se proporciona una descripción detallada de cada uno de estos métodos.
Según la definición especificada en la sección anterior, parallax scrolling is a technique when the background content is moved at a different speed than the foreground content when scrolling.
En este sitio web se muestra una técnica CSS simple para crear un efecto de desplazamiento de paralaje: The Urban Walks .
Como puede ver en la captura de pantalla anterior, el teléfono móvil en el centro de la pantalla cambiará el contenido después de que se desplace dos veces. Además, observe en el primer desplazamiento, el fondo con el teléfono móvil cambiará.
Esta transición le da la sensación de que el teléfono es constante en su lugar y que el fondo cambia a medida que se desplaza hacia abajo. Este efecto se denomina efecto de desplazamiento de paralaje. Sabes que lo estás desplazando hacia abajo ya que hay un indicador de las pantallas hacia la derecha de la pantalla en forma de algunos puntos.
El primer uso del desplazamiento de paralaje fue en los viejos juegos de computadora. Donde una imagen de fondo fija se movería a una velocidad más lenta a medida que el personaje se movía más rápido que el fondo. Algunos ejemplos de estos juegos: Disney's Aladdin y Disney's Lion King. Estos juegos se lanzaron en 1993 y 1994 respectivamente.
Si bien es cierto que comenzó con los juegos, actualmente, muchos diseñadores web están enfatizando el efecto de hacer que su audiencia ame su sitio. Las ventajas del desplazamiento de paralaje se extienden desde el sitio web a los sitios móviles.
Estos sitios web, una vez diseñados con desplazamiento de paralaje para las versiones de escritorio, se agregan con un código que también admite pantallas móviles.
Ventajas de Parallax Scrolling en Web y Móvil
En esta sección, discutiremos las ventajas de usar el desplazamiento de paralaje desde varias perspectivas, como se explica a continuación:
Desde la perspectiva de la audiencia
Hay un elemento divertido asociado con el desplazamiento de paralaje. Como ha visto en el ejemplo anterior, transmitir la información de mil palabras se ha vuelto más fácil a medida que el usuario se desplaza desde diferentes pantallas.
Si consideramos a un usuario por primera vez, hay una curiosidad asociada a cada pergamino. Por tanto, no solo enriquece la experiencia del sitio web, sino que también aumenta la probabilidad de que el usuario pase más tiempo en la primera visita al sitio web en sí.
La proporción de participación del usuario aumenta drásticamente a medida que el usuario está intrigado por el desplazamiento.
El usuario no tiene que pensar en el proceso de descifrar la información, ya que está disponible de una manera más obvia.
En algunos casos, puede poner una historia sobre el producto / servicio que ofrece animando otros elementos en la pantalla, como el logotipo o el icono del menú.
Desde la perspectiva técnica
Una vez que implemente el desplazamiento de paralaje para una versión de escritorio, se puede usar muy fácilmente el mismo marco para el sitio web móvil o las pantallas.
Dado que el fragmento de código es simple y reutilizable, si usted es una agencia de marketing o una empresa proveedora de servicios de sitios web, esto se vuelve sencillo cuando se reúnen nuevos clientes.
El conocimiento del desplazamiento de paralaje viene con más experiencia en marcos frontend como CSS, JavaScript, etc.
Para un desarrollador web, cuando se trata de crear un efecto de desplazamiento de paralaje, hay varias técnicas disponibles. Una de esas técnicas es utilizarCascaded Styling Sheets(CSS).
CSS explica cómo se muestran los elementos HTML en la pantalla. Se puede crear un archivo CSS y se puede utilizar para el sitio web completo. Es más sencillo agregar un archivo CSS que agregar estilos a cada elemento HTML y administrarlos en diferentes partes de la página web.
Note- Algunos de los métodos que se describen a continuación en este capítulo son específicos para computadoras de escritorio y no para dispositivos móviles. Se mencionará en los pasos cuando una técnica en particular no sea adecuada para dispositivos móviles.
Teniendo en cuenta las descargas de CSS en todo el dibujo adicional en el modelo de objetos de documento (DOM), hay una mayor utilización de la aceleración de hardware y un efecto suave sin sobrecargar la CPU.
Método de posición absoluta
Este método se utiliza con frecuencia para crear un efecto de paralaje, ya que es relativamente ligero en comparación con otras opciones disponibles. La posición de la imagen de fondo se mantiene fija en relación con otro contenido en la pantalla. En el ejemplo que se analiza a continuación, verá cómo hacerlo utilizando la magia de CSS.
En esta sección, veremos dos métodos para el método de posición absoluta:
- Fondo único
- Fondo múltiple
Método de fondo único
En este método, crearemos dos archivos en la misma carpeta. Observe los pasos que se indican a continuación para el mismo propósito:
Step 1
Tenemos que crear dos archivos en la misma carpeta: el primer archivo con marcado HTML y el segundo con código CSS.
Step 2
Ahora, definamos nuestro marcado HTML. Observe el código que se proporciona a continuación:
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "BgContainer">
<div class = "Parallax">
<h1> Welcome! </h1>
</div>
<div class = "FgContainer">
<div class = "MainContent">
<p>
Here we will go ahead with some content which will really vary
according to the content on your site. I am just typing out this
content as it is sometimes good to engage user than the usual lorem
ipsum text!
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</body>
</html>Step 3
Abra el bloc de notas. Copie y pegue el fragmento de código anterior.
Cuando guarde el archivo, en Save as type, Seleccione All Files. Ingrese un nombre para su archivo según sea necesario, pero debe ir seguido de una extensión:.html como se muestra en la captura de pantalla a continuación.
Step 4
Una vez que se guarda el archivo, cree otro archivo en el bloc de notas y pegue el código que se proporciona a continuación:
html, body {
font-size: 18px;
line-height: 28px;
}
h1 {
letter-spacing: -15px;
color: white;
text-align: center;
font-size: 200px;
font-weight: 800;
line-height: 200px;
}
BgContainer {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
FgContainer {
position: relative;
display: block;
background-color: white;
z-index: 1;
}
MainContent {
max-width: 750px;
margin: 0 auto;
padding: 75px 0;
}
p {
margin: 75px 0;
}
.Parallax {
display: flex;
flex: 1 0 auto;
position: relative;
z-index: -1;
height: 100vh;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2);
background: url(https://cdn.pixabay.com/photo/2017/02/07/09/02/background-2045380_640.jpg);
background-color: rgb(250,228, 216);
}Como ha visto en el último paso, cuando está guardando el archivo, en Save as escriba, seleccione All Files. Ingrese un nombre a su archivo según sea necesario y agregue una extensión.css lo.
Análisis de código
Entendamos qué parte del código es responsable del efecto de paralaje. El trabajo más importante para el paralaje se realiza mediante el uso de perspectiva y reglas de transformación. Referirse aline 15en el fragmento de código anterior. La perspectiva se crea para nuestroBgContainerprimero. Esto inicia una plataforma para la regla de transformación.
En el Parallax contenedor a partir de la línea 40, transform La regla en la línea 48 empuja el div BgContainer al fondo usando translate (-1px).
Puede modificar los valores de los parámetros de conversión y escala para modificar la profundidad del paralaje.
Cuando abra el archivo html, el efecto de paralaje será visible como se muestra a continuación:
Note - Para el resto del tutorial, se asumirá que el lector puede crear los archivos HTML y CSS según la estructura de carpetas proporcionada en el método anterior.
Método de fondo múltiple
En este método, tendremos diferentes imágenes a medida que el usuario se desplaza hacia abajo en la página. Hay una imagen con lápices, que se usa en diferentes combinaciones de colores para ilustrar este efecto.
Observe el siguiente código para la página HTML como se muestra a continuación:
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<h1>Multiple Background Example</h1>
<div class = "parallax">
<div class = "bg__First">First</div>
<div class = "bg__Second">Second</div>
<div class = "bg__Third">Third</div>
<div class = "bg__Fourth">Fourth</div>
</div>
</body>
</html>Al igual que en el ejemplo anterior, usaremos styles.cssalmacenado en la misma ubicación que este archivo HTML. Tenemos tres div diferentes nombrados como Primero, Segundo, Tercero y Cuarto.
El código CSS para el desplazamiento de paralaje se proporciona a continuación:
body, html {
height : 100%;
font-family : sans-serif;
}
.parallax [class*="bg__"] {
position : relative;
height : 50vh;
text-indent : -9999px;
background-attachment : fixed;
background-position : top center;
background-size : cover;
}
.parallax [class*="bg__"]:nth-child( 2n) {
box-shadow : inset 0 0 1em #111;
}
.parallax .bg__First, .bg__Fourth {
height : 100vh;
}
.parallax .bg__First {
background-image : url("parallax0.png");
}
.parallax .bg__Second {
background-image : url("parallax1.png");
}
.parallax .bg__Third {
background-image : url("parallax2.png");
}
.parallax .bg__Fourth {
background-image : url("parallax1.png");
}Aquí, creamos el efecto de paralaje de la línea 7, la propiedad importante aquí es background-attachment:fixed.
Usando esta propiedad, la primera imagen con lápices de colores permanecerá siempre en la parte superior. A medida que se desplaza hacia abajo, comenzarán a aparecer diferentes imágenes como las descritas en la línea 28.
Como resultado, podrá ver el efecto de paralaje como se muestra en el gif a continuación. La siguiente imagen es la captura de pantalla del ejemplo que consideramos para varios antecedentes.
Parallax de CSS puro
Combinemos el conocimiento de los dos métodos anteriores y creemos un efecto avanzado de Parallaje de CSS puro.
La diferencia será la forma en que organicemos el image elemento y el z-transformpropiedad. La explicación de la propiedad se proporcionará después del código CSS.
Cree el archivo HTML con el siguiente código utilizando el método habitual del Bloc de notas.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "wrapParallax">
<div class = "parallax_one">
<img src = "https://cdn.pixabay.com/photo/2018/06/16/15/36/water-lily-3478924_640.jpg" alt = "">
</div>
<div class = "parallax_two">
<h1>Pure CSS Parllax Advanced Level</h1>
</div>
<div class = "parallax_three">
<img src = "https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_640.jpg" alt = "">
</div>
</div>
</body>
</html>Para el archivo CSS, el código se proporciona a continuación:
body, html {
padding: 0;
margin: 0;
}
h1 {
color: blue;
text-align: center;
padding: 20px;
text-shadow: 0px 0px 10px #fffff;
}
img {
width:100vw;
height:100vh;
}
.wrapParallax {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.parallax_one {
transform: translateZ(-100px) scale(2)
}
.parallax_two {
z-index: 10;
transform: translateZ(-200px) scale(3)
}
.parallax_three {
margin-top: 100vh;
}Análisis de código
Hemos fijado la posición de la primera capa en line 26 mediante el uso position:absolutepropiedad. Las posiciones también están codificadas en 0.
En parallax_two, que es la capa con encabezado, hemos aplicado z-index: 10para proporcionar un efecto flotante al título. La capaparallax_three se mueve a la parte inferior proporcionando una propiedad margin-top.
Así, podemos elevar el nivel de complejidad en nuestro efecto Parallax.
Observe el efecto como se muestra en la siguiente figura.
Para crear el efecto Parallax, el método más popular es usar JavaScript. A partir de este capítulo, discutiremos los conceptos de JavaScript y algunas de las bibliotecas utilizadas para lograr el desplazamiento de Parallax.
Utilizar JavaScript puro tiene sentido para mantener el rendimiento óptimo del sitio web. Hay muchas otras ventajas de usar bibliotecas desde un aspecto del rendimiento. Sin embargo, para comprender mejor la organización del código, comenzaremos con la implementación de paralaje de JavaScript puro. Dato curioso, a veces JavaScript puro también se llamavanilla JavaScript.
Desplazamiento de Parallax usando JavaScript puro
Primero, cree el archivo HTML principal con el código que se muestra a continuación. La página HTML solo constará de cuatro encabezados de texto.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
<script src = "myscripts.js"></script>
</head>
<body>
<section class = "parallax">
<h1>The First Scroll</h1>
</section>
<section class = "parallax">
<h1>The Second One</h1>
</section>
<section class = "parallax">
<h1>GoingOn !!</h1>
</section>
<section class = "parallax">
<h1>And we've reached the bottom!!</h1>
</section>
</body>
</html>Observe que en la línea número 4, para este ejemplo, estamos usando myscripts.js archivo que se almacenará en la misma carpeta que el archivo HTML y el archivo CSS.
Ahora, preparemos nuestro archivo CSS como se muestra a continuación.
header {
height: 4em;
background: #845;
}
.parallax {
background-repeat: no-repeat;
background-size: cover;
}
.parallax h1 {
text-align: center;
margin: 0;
font-size: 2.5em;
letter-spacing: .2em;
color: red;
padding: 10rem 0;
mix-blend-mode: exclusion;
}
.parallax:nth-of-type(1) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(1) h1 {
padding: 15rem 0;
}
.parallax:nth-of-type(2) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(2) h1 {
padding: 12rem 0;
}
.parallax:nth-of-type(3) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(4) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}Ahora viene la parte de JavaScript, cree un archivo en el bloc de notas y guárdelo como myscripts.js .
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
window.addEventListener("scroll", function() {
var scrolledHeight= window.pageYOffset;
$$(".parallax").forEach(function(el,index,array) {
var limit = el.offsetTop+ el.offsetHeight;
if(scrolledHeight > el.offsetTop && scrolledHeight &l;= limit) {
el.style.backgroundPositionY= (scrolledHeight - el.offsetTop) /1.5+ "px";
} else {
el.style.backgroundPositionY= "0";
}
});
});Análisis de código
Analicemos el código JavaScript.
Código de line number 1 to 4 representa la función auxiliar.
En la línea 6, seleccionamos nuestro elemento de paralaje y agregamos scrollevento a la ventana. Para determinar cuánta área se desplaza, estamos usandoscrolledHeightpropiedad. A medida que la pantalla se desplaza hacia abajo,backgroundPositionY se actualiza para el elemento de paralaje.
Para ralentizar el efecto de paralaje, dividimos entre 1,5, este número se puede cambiar a cualquier número que desee.
Ahora, podrá ver la página desplazándose hacia abajo como se muestra en la siguiente captura de pantalla.
Uso de la biblioteca de JavaScript ScrollMagic
Como se discutió en la sección anterior, aunque podemos usar JavaScript puro para crear un efecto de paralaje, existen algunas bibliotecas de JavaScript poderosas que mejorarán la experiencia del usuario. ScrollMagic es una de esas bibliotecas para crear interacciones de desplazamiento de paralaje.
Discutamos más sobre esto con la ayuda de un ejemplo como se muestra a continuación:
Note- En este ejemplo, para que sea sencillo, tendremos el CSS almacenado en un archivo HTML. Además, el código JavaScript estará presente en el mismo documento. En pocas palabras, crearemos solo un archivo HTML y tendrá las bibliotecas ScrollMagic referenciadas junto con el CSS requerido.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<style type = "text/css">
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}
</style>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:cyan">
<p>These are bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id="parallax2" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:yellow">
<p>Some More Bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id = "parallax3" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing2"></div>
<script>
// init controller
var controller = new ScrollMagic.Controller({
globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});
// build scenes
new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax2"})
.setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax3"})
.setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
</script>
</body>
</html>Como se muestra en el código anterior, hemos requerido referencias de bibliotecas de JavaScript de line 3 to 6. El código CSS se especifica de la línea 9 a la 19.
Red de entrega de contenidos
Las referencias del script de la línea 3 a la 6 apuntan a las URL de ScrollMagic Content Delivery Network (CDN). El uso de una CDN tiene sentido en el desarrollo de sitios web modernos, ya que puede cargar las bibliotecas necesarias sin ralentizar su sitio web.
Si se requieren personalizaciones en las bibliotecas, se tendría que alojar las bibliotecas en su servidor respectivo para utilizar estos efectos. Si está utilizando funcionalidades básicas de una biblioteca, es eficaz utilizar la URL de CDN.
El código HTML anterior muestra una imagen separada por 2 divisiones. Aparece la primera división con un encabezado:These are bricks y la segunda división aparece con - Some More Bricks.
Observe que en el código CSS de la línea 9 a la 19, solo estamos especificando la posición y el estilo para el div de paralaje respectivo.
El trabajo de crear este suave paralaje scenelo hace la biblioteca ScrollMagic. Si se refiere al código de secuencia de comandos de la línea 43 a la 62, ScrollMagiccontroller se invoca y un scene es creado.
Las escenas guían al DOM para crear un efecto de paralaje cuando el 80% de la pantalla está ocupada. JavaScript se utiliza para comprender el disparador de desplazamiento. Como resultado, lo que obtiene es una experiencia flotante en esta página.
Note - Considerando la imagen de arriba como una imagen GIF, no podrá observar el efecto suave de las divisiones del texto.
Activar animaciones
Las posibilidades de crear una experiencia de usuario variada son infinitas con ScrollMagic Library. Observe los fragmentos de código que se proporcionan a continuación para activar animaciones en el desplazamiento.
Tenga en cuenta que para esto necesita dos archivos * menos; un archivo HTML y un archivo CSS.
Cree un archivo HTML con el código que se muestra a continuación:
<html>
<head>
<link rel = "stylesheet" href = "style.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div style = "height:450px;"></div>
<div id = "square" class = "square">This is it!</div>
<div style = "height:450px;"></div>
<script>
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "40%", ease: Linear.easeNone})
.addTo(controller);
var scene = new ScrollMagic.Scene({triggerElement: '.square'})
.setClassToggle('.square', 'show')
.addTo(controller);
</script>
</body>
</html>Ahora, cree un archivo CSS con el siguiente código.
.square {
background: aqua;
margin: 0 auto;
display: block;
padding: 40px 0;
text-align: center;
color: #000;
font-size: 40px;
font-weight: bold;
opacity: 0;
transition: .3s;
width: 0%;
}
.square.show{
opacity: 1;
width: 100%;
}
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}Análisis de código
Refiriéndose al código HTML, el código ScrollMagic comienza desde line 17 y continúa hasta line 25. En esta sección, estamos creando dos escenas ScrollMagic. La primera escena es para la imagen del ladrillo y la otra es para la animación del banner.
Como se especifica en setTween funcionar en line 20, cuando la acción de desplazamiento ocurre al 40% del tamaño de la pantalla, comienza la siguiente escena que muestra el banner ¡Esto es!
La opacidad del div con id - square se controla en el archivo CSS en line 10 y line 15.
Como resultado, podrá ver la siguiente animación en la página.
Desplazamiento horizontal
También podemos aplicar scroll de paralaje y lograr un scroll horizontal. La biblioteca ScrollMagic se puede utilizar para crear un efecto de desplazamiento horizontal. Vea el código a continuación.
Aunque el código es sencillo para crear un efecto de desplazamiento horizontal, necesitaremos una referencia de jquery para lograr el movimiento horizontal de las pantallas. Los detalles de jQuery se proporcionan en el próximo capítulo, por ahora, simplemente siga el código que se indica a continuación.
Crearemos tres archivos separados: archivo HTML para el código principal, archivo CSS para estilos y archivo JS para llamadas a la función ScrollMagic.
Aquí está el código del documento HTML.
<html>
<head>
<link rel = "stylesheet" href = "style.css">
</head>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>
<script src = "animation.js"></script>
<body>
<div class = "wrapper" id = "js-wrapper">
<div class = "sections" id = "js-slideContainer">
<section class = "section">
<span class = "section__title" id = "title1">Scroll Once</span>
<span id = "trigger--title1"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title2">Do It Again</span>
<span id = "trigger--title2"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title3">Thank You!</span>
<span id = "trigger--title3"></span>
</div>
</div>
</body>
</html>Observe que tenemos tres secciones, que aparecerán después de hacer scroll. Las tres secciones se indican con los identificadores title1, title2 y title3 en las líneas 15, 19 y 23 respectivamente.
El código para el documento CSS se proporciona a continuación:
body {
font-family: serif;
}
body, html {
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.section {
height: 100%;
width: calc( 100% / 5 );
float: left;
position: relative;
}
.section:nth-child(1) {
background: green;
}
.section:nth-child(2) {
background: orange;
}
.section:nth-child(3) {
background: red;
}
.sections {
width: 500%;
height: 100%;
}
.section__title {
position: absolute;
top: 50%;
left: 50%;
font-size: 30px;
color: #fff;
}Análisis de código
Los colores de fondo para las tres pantallas (o secciones) se proporcionan en lines 10, 22 y 25.
Estamos calculando el ancho relativo de cada pantalla en el código que comienza en line 13.
El código JavaScript para ScrollMagic se proporciona a continuación:
$(function () {
var controller = new ScrollMagic.Controller();
var horizontalSlide = new TimelineMax()
.to("#js-slideContainer", 1, {x: "-20%"})
.to("#js-slideContainer", 1, {x: "-40%"})
new ScrollMagic.Scene({
triggerElement: "#js-wrapper",
triggerHook: "onLeave",
duration: "400%"
})
.setPin("#js-wrapper")
.setTween(horizontalSlide)
.addTo(controller);
});Observe la triggerHookpropiedad en la línea 8. Esta propiedad es responsable de proporcionar el efecto de desplazamiento cuando el usuario llega a la finalización del evento de desplazamiento. La funciónTimelineMax se encarga de proporcionar el efecto de desplazamiento horizontal a nuestras pantallas.
Una vez creados los archivos respectivos, podrá ver la animación de desplazamiento horizontal como se muestra a continuación.
En los capítulos anteriores, hemos entendido cómo los buenos efectos del uso de bibliotecas de JavaScript agregan al sitio web. JavaScript, cuando se combina con Photoshop, proporciona una flexibilidad fenomenal y facilidad para agregar desplazamiento de paralaje a su sitio web.
En este capítulo, veremos tres complementos de Photoshop para agregar el efecto de desplazamiento de paralaje. Al igual que hicimos referencia a JavaScript en el capítulo anterior, vamos a utilizar referencias de Photoshop en nuestro código HTML para crear un potente desplazamiento de paralaje de Photoshop.
Un punto importante a tener en cuenta sobre los complementos de Photoshop es que, a menudo, los complementos no se actualizan, por lo que le recomendamos que investigue un poco antes de comenzar a utilizar cualquier complemento para el desplazamiento de paralaje.
Desplazamiento de Parallax usando Parallax.js simple
Parallax.js utilizando el complemento de Photoshop, podemos crear un efecto de desplazamiento de paralaje sin muchas molestias. Tener en cuenta el complemento jQuery requiere la inclusión de bibliotecas de alta gama como bootstrap. Tenga en cuenta que en este capítulo habrá etiquetas HTML5 en el código.
Veamos el archivo HTML que se muestra a continuación:
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Parallax.js | Simple Parallax Scrolling Effect with jQuery</title>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
</head>
<body>
<section>
<div class = "container">
<h1>Example on Parallax.js</h1>
<p data-pg-collapsed>
This is an example of parallax scrolling using Parallax.js jQuery Plugin.
</p>
<br/>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-position = "top" data-bleed = "10"
data-image-src = "https://pixabay.com/get/ea31b90a2af5093ed1534705fb0938c9bd22ffd41cb2114595f9c67dae/clematis-3485218_1920.jpg"
data-natural-width = "1600" data-natural-height = "800" >
</div>
<section>
<div class = "container">
<h2 id = "sampleLorem">Sample Text Here</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
<br/>
<br/>
Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean
quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis
tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus
risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis
quis ligula lacinia aliquet. Mauris ipsum.
<br/>
<br/>
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nam nec
ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing
diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla.
Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.
Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu
magna luctus suscipit.
<br/>
<br/>
Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus
vitae pharetra auctor, sem massa mattis sem, at interdum magna augue
eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent
blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.
Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt
malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris.
Morbi in dui quis est pulvinar ullamcorper.
<br/>
<br/>
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed
aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis,
venenatis tristique, dignissim in, ultrices sit amet, augue. Proin
sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi
lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus,
accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium
blandit orci.
<br/>
<br/>
Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non,
convallis id, sagittis at, neque. Nullam mauris orci, aliquet et,
iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam
imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus
et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
nisi. Nulla quis sem at nibh elementum imperdiet.
<br/>
<br/>
</p>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-bleed = "10" data-speed = "0.2"
data-image-src = "https://pixabay.com/get/ea31b90620f0063ed1534705fb0938c9bd22ffd41cb2114594f0c37cae/chamomile-3489847_1920.jpg"
data-natural-width = "1600" data-natural-height = "801"
data-pg-name = "PARALLAX IMAGE 002">
</div>
</body>
</html>Código de análisis
Los fragmentos de código anteriores muestran el código de una página con dos imágenes y un texto de muestra entre ellas.
Como puede ver, el código comienza con <!DOCTYPE html>Esta es la forma típica de informar a los navegadores que el código está basado en HTML5.
la <meta> etiquetas de line 4 to 6muestra el código que es una máquina para la interpretación. No podrá ver el impacto de este código. Lo importante a tener en cuenta aquí es - conmeta etiqueta, los desarrolladores web obtienen un control mejorado sobre los datos que se muestran.
También en line 8 and 9, Hemos incluido las hojas de estilo CSS junto con Bootstrap. Para una fuente y tipografía específicas, Bootstrap es la biblioteca más utilizada.
Lines 10 and 11cuidar las bibliotecas de Photoshop y Parallax.js. Es importante incluir control sobre Parallax.js para tener el efecto de imágenes de paralaje. Podrás encontrardata-parallax propiedad con div en line 21, Que es suficiente para llamar a la biblioteca parallax.js para el efecto de paralaje requerido.
El efecto de paralaje se puede ver en el código de lines 21 y line 40. Las propiedades importantes que hacen que este efecto suceda con parallax.js son:data-parallax, data-image-src, data-natural-width, data-natural-height.
Con el archivo CSS, tenemos que proporcionar solo una propiedad. Es como se muestra a continuación:
.parallax-container {
height: 500px;
width: 100%;
}En el código HTML anterior, hemos creado una estructura específica para archivos CSS. Tendremos una carpeta llamadacss, que tendrá archivos CSS - bootstrap.min.css y style.css.
Una vez que todo haya terminado con los documentos, podrá ver el efecto de paralaje como se muestra a continuación:
Parallaxator usando el complemento de Photoshop
Parallaxator, el mejor complemento de Photoshop, proporciona efectos de desplazamiento de paralaje y es fácil de usar. Puede descargar el complemento Parallaxator, sus archivos CSS y JS desde este enlace: Parallaxator GitHub .
Una vez que se descargan los archivos CSS y JS, puede usar el código que se muestra a continuación para crear el código HTML.
<!DOCTYPE html>
<html>
<head>
<title>Parallaxator Plugin</title>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
<link rel = "stylesheet" href = "fm.parallaxator.jquery.css">
<link rel = "stylesheet" href = "style.css">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "fm.parallaxator.jquery.js"></script>
</head>
<body>
<div class = "section1 parallaxator">
<img class = "parallax_child" src = "img/landscape.jpg" width = "100%">
<h1 class = "mega_text parallax_child">Nature</h1>
</div>
<div class = "section2 parallaxator">
<img class = "parallax_child" src = "img/architecture.jpg" width = "100%">
<h1 class = "mega_text parallax_child">
Architecture<br>
</h1>
</div>
<div class = "section3 parallaxator">
<img class = "parallax_child" src = "img/architecture1.jpg" width = "100%">
<h1 class = "mega_text parallax_child" data-parallaxator-reverse = "true" data-parallaxator-velocity = "0.35">
Architecture again!
</h1>
</div>
</body>
</html>Código de análisis
El efecto de paralaje lo proporciona la clase parallax_child que se proporciona con cada etiqueta img. El parallax_child está conectado con archivos CSS y JS que se proporcionan a continuación.
Para que el plugin parallaxator funcione, hemos incluido fm.parallaxator.jquery.css y fm.parallaxator.jquery.js. Estos archivos deben estar disponibles en el mismo directorio que el archivo HTML.
El código de CSS es el que se muestra a continuación:
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.section1,.section2, .section3 {
border-bottom: 32px solid #fff;
padding-top: 40%;
}
.section1 {
background-color: #fdb;
}
.section2 {
background-color: #bdf;
}
.section3 {
background-color: #fbd;
}
.mega_text {
font-weight: bold;
font-size: 100px;
margin: 0;
text-shadow: 0 10px 100px #fff, 0 0 15px #fff;
padding: 64px;
display: block;
}Como resultado del código anterior, podrá ver el efecto de paralaje.
Complemento Stellar.js jQuery para Parallax Scrolling
Stellar.js es otra adición a la lista de complementos de Photoshop de paralaje. Aunque ya no se mantiene, los desarrolladores que han usado su construcción estable pueden usar el efecto de desplazamiento de paralaje con facilidad. Es compatible con las últimas versiones de Photoshop y fácil de implementar.
Deberá descargar el último jquery.stellar.js del sitio web oficial del complemento Stellar.js . Una vez descargado, cree este archivo de complemento en la misma carpeta que sus archivos HTML y CSS.
Echemos un vistazo al código HTML.
<!doctype html>
<html>
<head>
<title>Stellar.js Demo</title>
<link href = "style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "jquery.stellar.js"></script>
<script>
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
</script>
</head>
<body>
<h1>Demo Site</h1>
<div class = "image architecture" data-stellar-background-ratio = "0.5">
<span>Architecture</span>
</div>
<div class = "image abstract" data-stellar-background-ratio = "0.5">
<span>Abstract</span>
</div>
<div class = "image landscape" data-stellar-background-ratio = "0.5">
<span>Landscape</span>
</div>
<div class = "image window" data-stellar-background-ratio = "0.5">
<span>Window</span>
</div>
</body>
</html>Código de análisis
Para que Stellar.js funcione, hemos incluido la biblioteca justo después de que se hace referencia al complemento de Photoshop en jquery.stellar.js line 6.
Las funciones para Stellar paralaje se llaman en la etiqueta de script de line 8 to line 15. Con la propiedaddata-stellar-background-ratio, Establecemos un desplazamiento para las imágenes que se muestran. Esto se hace enlines 19,20,21 and 22.
El código CSS se proporciona a continuación:
body {
font-family: helvetica, arial;
padding-top: 40px;
}
h1 {
background-color: black;
color: white;
height: 40px;
font-size: 24px;
font-weight: normal;
left: 0;
line-height: 40px;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 1;
}
h1 a {
border-bottom: 1px solid white;
color: white;
display: inline-block;
line-height: 30px;
text-decoration: none;
}
.image {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.image span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
}
.architecture {
background-image: url(img/architecture.jpg);
}
.abstract {
background-image: url(img/ruin.jpg);
}
.landscape {
background-image: url(img/landscape.jpg);
}
.window {
background-image: url(img/window.jpg);
}Una vez que se crean los archivos y stellar.js, el archivo del complemento se incluye en la misma carpeta, debería poder ver el efecto como se muestra en la captura de pantalla que se muestra a continuación:
Bootstrap es un marco popular con muchos componentes listos para usar para elegir. Bootstrap puede optimizar el código para implementar el desplazamiento de paralaje.
En este capítulo, con un ejemplo, analicemos cómo vamos a utilizar el componente Jumbotron para implementar el desplazamiento de paralaje.
Página completa con Jumbotron Parallax Bootstrap4
Imagine un sitio web en el que se muestra al usuario con un gran cuadro de "llamada a la acción" con algún contenido relacionado con un descuento o una venta. Por lo general, Jumbotron encuentra su aplicación en tales lugares. Es una caja grande útil para llamar la atención del usuario.
Como estamos usando solo un componente de Bootstrap, no crearemos un archivo CSS separado para este ejemplo. Vamos a sumergirnos en el código HTML.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin = "anonymous">
<style>
.jumbotron{
margin:15px 30px 0px 30px;
border-radius:10px;
background:
linear-gradient(
rgba(0, 0, 250, 0.25),
rgba(125, 250, 250, 0.45)),
url(img/ruin.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
color:white !important;
height:440px;
}
.page-scroll {
height:5000px;
}
.lead {
font-family:raleway;
font-weight:100;
margin-top:-10px;
}
</style>
</head>
<body>
<div class = "jumbotron jumbotron-fluid">
<div class = "container">
<h1 class = "display-2">Jumbotron Example</h1>
<p class = "lead">Example text for parallax using jumbotron</p>
</div>
</div>
<div class = "page-scroll"> </div>
</body>
</html>Código de análisis
la line 64 referencias a la biblioteca Bootstrap. Estamos especificando el margen y el radio del borde para Jumbotron desdeline 8 to 11.
Como podemos ver en line 33Estamos creando un div con la clase Jumbotron para mostrar el cuadro grande donde tendremos nuestra imagen específica cargada. Tenga en cuenta que esta vez no hay una URL directa para la imagen, vamos a utilizar la imagen descargada. Puede descargar cualquier imagen de alta resolución para su ejemplo y especificarla enline 16.
La salida que puede ver cuando ejecuta el código anterior se muestra a continuación:
En este tutorial, hemos estudiado diferentes bibliotecas para crear desplazamiento de paralaje. Hemos cubierto todos los aspectos desde el nivel básico hasta el nivel avanzado donde usamos CSS Bootstrap donde usamos para el desarrollo de front-end. Le sugerimos que aplique sus habilidades creativas para crear una página web que sea difícil de ignorar. Recuerde que para el desplazamiento de paralaje, existen enormes ejemplos en línea que le servirán de inspiración.
Utilización de Parallax Scrolling
Como ya hemos comentado en los capítulos introductorios, puede utilizar el desplazamiento de paralaje para lograr una experiencia de usuario extraordinaria. Aquí hay algunas ideas para el sitio, donde puede incluir desplazamiento de paralaje.
Cronología del sitio web
Estos tipos de sitios suelen tener una historia que contar sobre un producto o empresa o cualquier otra cosa. Puede crear un efecto de paralaje para presentar la historia al visitante y mantenerlos comprometidos con diferentes animaciones.
Para un sitio de línea de tiempo, valdrá la pena crear un fondo y mostrar el contenido del texto en primer plano. Puede asociarse con un diseñador gráfico para crear gráficos que vayan de la mano con el fondo.
Sitio web de la aplicación móvil
Hoy en día, la aplicación móvil es imprescindible para cualquier oferta de producto / servicio. Hay muchas nuevas empresas que buscan crear un sitio web de aplicación móvil que proporcione una explicación de lo que la aplicación móvil puede y no puede hacer.
La App Store de Apple, conocida por sus estrictas directrices para la creación de aplicaciones, exige que la aplicación móvil tenga un sitio web de soporte. Este sitio web siempre deberá ser atractivo y fácil de usar.
Con el desplazamiento de Parallax, puede utilizar una imagen móvil y mostrar diferentes tipos de funcionalidades a medida que el usuario se desplaza hacia abajo en la página. Uno de esos ejemplos ya se analiza en el Capítulo 4 de este tutorial.
Efectos del mouse sobre
Puede usar el poder del desplazamiento de paralaje y el mouse sobre para crear el siguiente nivel de animación. Con el mouse sobre, puede controlar la dirección de desplazamiento y crear un efecto de paralaje.
De esta forma, existen muchas posibilidades a la hora de crear una gran experiencia. Todo lo que necesita es una idea y un conjunto adecuado de herramientas y bibliotecas.
Futuro de la interfaz de usuario web
Con el poder de la tecnología y elementos creativos como el desplazamiento de paralaje, existe una competencia nunca antes vista para crear experiencias de usuario increíbles. Esto no se limita solo a los sitios web, sino que también se ha extendido a los sitios móviles.
Si bien la interfaz de usuario web se encuentra actualmente en su apogeo, tener una página web compatible con un dispositivo móvil es una necesidad de tiempo. Como hemos visto en los ejemplos de Bootstrap y jQuery, el sitio web no puede tener una larga vida si no son compatibles con dispositivos portátiles.
Junto con las bibliotecas existentes, el futuro de la experiencia del usuario espera ansiosamente la Inteligencia Artificial y la realidad virtual también. Hay algunas páginas web que se pueden ver con un equipo de realidad virtual. En tal situación, mantenerse en contacto con los últimos complementos y también buscar la creación de uno nuevo realmente tiene sentido.
Aplicas los conocimientos adquiridos en este tutorial para crear la mejor experiencia de usuario. ¡Te deseo mucha suerte y éxito en tu viaje de desarrollo web!