Técnicas de JavaScript
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 por 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 más 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 animación a continuació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 mediante 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.
