The introduction
Parallax Scrolling is using multiple layers of background to move at different speeds to create a three-dimensional Scrolling effect.
In fact, this technology has been widely used in some foreign websites as early as 2013. Because of the great visual experience it brings to websites, there are already countless websites using this technology.
I used it in a recent project and thought I needed to tidy it up. This article briefly introduces what parallax scrolling is, how to implement it, and how to use it in existing frameworks (VUE/React).
What is parallax rolling?
Parallax effect was originally an astronomical term. When we look at the starry sky, the more distant stars move more slowly and the closer stars move more quickly. We feel the same way when we’re sitting in our cars and looking out the window. The mountains in the distance did not seem to move, and the rice fields nearby passed quickly. Many games use parallax effects to increase the three dimensions of the scene. Simply put, the position of elements in a web page changes as you scroll. But different elements change position at different rates, leading to the illusion of layered elements in a web page.
After reading the above paragraph, I believe you have a preliminary understanding of the concept of parallax rolling. Let’s take a look at parallax scrolling using CSS.
CSS implementation
CSS is mainly implemented in two ways: background-attachment: fixed and Transform: translate3D. Let’s look at the specific implementation methods below:
background-attachment: fixed
Background-attachment may not be used in normal business development, so let’s have a look at it first.
The background-attachment CSS property determines whether the position of the background image is fixed within the viewport or scrolls along the block containing it.
It has three properties:
fixedThe: key indicates that the background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background does not scroll with the content of the element.local: This keyword indicates that the background is fixed relative to the content of the element. If an element has a scrolling mechanism, the background will scroll with the content of the element.scroll: This keyword indicates that the background is fixed relative to the element itself, rather than scrolling with its content. We use background-attachment: fixed to implement parallax scrolling. Here’s an example:
// html
<div class="a-text">1</div>
<div class="a-img1">2</div>
<div class="a-text">3</div>
<div class="a-img2">4</div>
<div class="a-text">5</div>
<div class="a-img3">6</div>
<div class="a-text">7</div>
Copy the code// css
$img1: 'https://images.pexels.com/photos/1097491/pexels-photo-1097491.jpeg';
$img2: 'https://images.pexels.com/photos/2437299/pexels-photo-2437299.jpeg';
$img3: 'https://images.pexels.com/photos/1005417/pexels-photo-1005417.jpeg';
div {
height: 100vh;
background: rgba(0, 0, 0, .7);
color: #fff;
line-height: 100vh;
text-align: center;
font-size: 20vh;
}
.a-img1 {
background-image: url($img1);
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
.a-img2 {
background-image: url($img2);
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
.a-img3 {
background-image: url($img3);
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
Copy the codeThe effect is as follows:
Of course, you can check it out directly here :https://codepen.io/jack-cool/pen/MWYogYQ
transform: translate3d
Again, let’s look at two concepts first: transform and perspective
transform: cSS3 property, you can transform elements (2D / 3D), including translation translate, rotate rotate, scale, and so onperspective: CSS3 attribute. When an element involves 3D transformation, perspective can define the 3D stereoscopic effect that our eyes see, i.e. the sense of space.
Let’s start with an example:
// html
<div id="app">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
Copy the code// css
html {
overflow: hidden;
height: 100%
}
body {
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
#app{
width: 100vw;
height:200vh;
background:skyblue;
padding-top:100px;
}
.one{
width:500px;
height:200px;
background:#409eff;
transform: translateZ(0px);
margin-bottom: 50px;
}
.two{
width:500px;
height:200px;
background:#67c23a;
transform: translateZ(-1px);
margin-bottom: 150px;
}
.three{
width:500px;
height:200px;
background:#e6a23c;
transform: translateZ(-2px);
margin-bottom: 150px;
}
Copy the codeThe effect is as follows:
Of course, you can check it out directly here :https://codepen.io/jack-cool/pen/zYxzOpb
Here’s how to use transform: Translate3D for parallax scrolling:
Transform-style: preserve-3d; perspective: XPX;
Transform: translateZ() : translateZ() : translateZ()
Because the child element has a different transform: translateZ(), the distance between the top and bottom of the scroll bar relative to the screen (our eyes) is different.
Transform-style: preserve-3d; perspective: XPX; child: translateZ()
After looking at two ways to implement scrolling parallax with CSS, let’s look at how to apply scrolling parallax in an existing framework (VUE/React).
Vue or React
Used in the react
Use this method with a parallax or react parallax.
import React from "react";
import { render } from "react-dom";
import { Parallax } from "react-parallax";
import Introduction from "./Introduction";
const styles = {
fontFamily: "sans-serif".textAlign: "center"
};
const insideStyles = {
background: "white".padding: 20.position: "absolute".top: "50%".left: "50%".transform: "translate(-50%,-50%)"
};
const image1 =
"https://images.pexels.com/photos/830891/pexels-photo-830891.jpeg";
const image2 =
"https://images.pexels.com/photos/1236701/pexels-photo-1236701.jpeg";
const image3 =
"https://images.pexels.com/photos/3210189/pexels-photo-3210189.jpeg";
const image4 =
"https://images.pexels.com/photos/2437299/pexels-photo-2437299.jpeg";
const App = (a)= > (
<div style={styles}>
<Introduction name="React Parallax" />
<Parallax bgImage={image1} strength={500}>
<div style={{ height: 500 }}>
<div style={insideStyles}>HTML inside the parallax</div>
</div>
</Parallax>
<h1>| | |</h1>
<Parallax bgImage={image3} blur={{ min: -1, max: 3 }}>
<div style={{ height: 500 }}>
<div style={insideStyles}>Dynamic Blur</div>
</div>
</Parallax>
<h1>| | |</h1>
<Parallax bgImage={image2} strength={-100}>
<div style={{ height: 500 }}>
<div style={insideStyles}>Reverse direction</div>
</div>
</Parallax>
<h1>| | |</h1>
<Parallax
bgImage={image4}
strength={200}
renderLayer={percentage => (
<div>
<div
style={{
position: "absolute",
background: `rgba(255, 125, 0, ${percentage * 1})`,
left: "50%",
top: "50%",
borderRadius: "50%",
transform: "translate(-50%,-50%)",
width: percentage * 500,
height: percentage * 500
}}
/>
</div>
)}
>
<div style={{ height: 500 }}>
<div style={insideStyles}>renderProp</div>
</div>
</Parallax>
<div style={{ height: 500 }} />
<h2>{"\u2728"}</h2>
</div>
);
render(<App />, document.getElementById("root"));
Copy the codeThe effect is as follows:
Of course, more detail can check: https://codesandbox.io/s/react-parallax-zw5go
Used in the vue
Vue: Parallaxy parallaxy: parallaxy: parallaxy
<template>
<div id="app">
<div style="background-color: #fff; height: 100vh;">
<h1 style="margin-top: 0; padding-top: 20px;">Scroll down ⬇</h1>
</div>
<div style="position: relative; z-index: 9999; background-color: #fff;">
<h1 style="margin:0;">Parallax Effect</h1>
<parallax>
<img src="https://images.pexels.com/photos/830891/pexels-photo-830891.jpeg">
</parallax>
</div>
<div style="background-color: #fff; height: 100vh;"></div>
<h1>Parallax fixed position</h1>
<div style="position: relative;">
<parallax :fixed="true">
<img src="https://images.pexels.com/photos/3210189/pexels-photo-3210189.jpeg">
</parallax>
</div>
<div style="background-color: #fff; height: 100vh;"></div>
</div>
</template>
<script>
import Parallax from "vue-parallaxy";
export default {
name: "App".components: {
Parallax
}
};
</script>
<style>
body {
margin: 0;
}
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
position: relative;
}
</style>
Copy the codeThe effect is as follows:
Of course, more detail can check: https://codesandbox.io/s/vue-parallaxjs-ljh9g
The last
You can follow my public account of the same name [Front-end Forest], where I will regularly post some cutting-edge articles related to the big front-end and summarize the actual combat in the daily development process. Of course, I am also an active contributor to the open source community, github https://github.com/Jack-cool, welcome star!!
