Spectre Parallax

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=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</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=
"https://media.geeksforgeeks.org/wp-content/uploads/20220814001346/logo-200x200.png" 
                     class="img-responsive rounded">
            </div>
        </div>
    </div>
</body>
</html>

Output:

Example 2: In this example, we will add whole images in parallax content.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20211110050115/Tailwind-CSS-Tutorial.png" 
                    class="img-responsive rounded">
            </div>
        </div>
    </div>
</body>
</html>

Output:

Reference: https://picturepan2.github.io/spectre/experimentals/parallax.html

Explore