Open In App

Spectre Parallax

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 18 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads