Spectre Parallax is a 3d effect used in various websites to make web pages attractive. In this effect, as we scroll, the background of the webpages moves at a different speed than the foreground making it look brilliant to the eyes.
Spectre Parallax Class:
- parallax: This class is used to create the 3D parallax effect.
- parallax-top-left: This class is used to active press effect on the top left corner of the content.
- parallax-top-right: This class is used to active press effect on the top right corner of the content.
- parallax-bottom-left: This class is used to active press effect on the bottom left corner of the content.
- parallax-bottom-right: This class is used to active press effect on the bottom right corner of the content.
- parallax-content: This class holds the parallax content.
- parallax-front: This class holds the parallax text font.
- parallax-back: This class holds the parallax image.
Syntax:
<div class="parallax">
<div class="parallax-top-left"></div>
<div class="parallax-top-right"></div>
<div class="parallax-bottom-left"></div>
<div class="parallax-bottom-right""></div>
<div class="parallax-content">
<div class="parallax-front">
<h2>...</h2>
</div>
<div class="parallax-back">
<img src="...">
</div>
</div>
</div>Example 1: In this example, we will add text and images in parallax content.
HTML
<!DOCTYPE html><html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE Parallax</strong>
<br><br>
</center>
<div class="parallax" style="padding:10px">
<div class="parallax-top-left"></div>
<div class="parallax-top-right"></div>
<div class="parallax-bottom-left"></div>
<div class="parallax-bottom-right"></div>
<div class="parallax-content">
<div class="parallax-front">
<p class="text-success">
A Computer Science Portal for Geeks
</p>
</div>
<div class="parallax-back">
<img src=
class="img-responsive rounded">
</div>
</div>
</div>
</body>
</html>
|
Output:
Spectre Parallax
Example 2: In this example, we will add whole images in parallax content.
HTML
<!DOCTYPE html><html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE Parallax</strong>
<br><br>
</center>
<div class="parallax" style="padding:10px">
<div class="parallax-top-left"></div>
<div class="parallax-top-right"></div>
<div class="parallax-bottom-left"></div>
<div class="parallax-bottom-right"></div>
<div class="parallax-content">
<div class="parallax-back">
<img src=
class="img-responsive rounded">
</div>
</div>
</div>
</body>
</html>
|
Output:
Spectre Parallax
Reference: https://picturepan2.github.io/spectre/experimentals/parallax.html