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