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/dist/spectre.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-exp.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-icons.min.css" > </ head > < body > < center > < h1 class = "text-success" >w3wiki</ 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 Beginner </ p > </ div > < div class = "parallax-back" > < img src = "https://media.w3wiki.net/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/dist/spectre.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-exp.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-icons.min.css" > </ head > < body > < center > < h1 class = "text-success" >w3wiki</ 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.w3wiki.net/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
Contact Us