Jump to content

Recommended Posts

Site URL: https://lily-oboe-g479.squarespace.com

Password is "1"


I have been working on this for over 6 hours and I cannot figure out how to add Parralaxing to my site. 

I want to mainly add it to parallax images when you scroll, I just want to figure out how to add it to image blocks but I don't know where to put the ID and the Class. 

Here is the code from this site: 




<div class="wrapper">
  <div class="parallax-container">
    <div class="background">
      <img class="background__image" src="https://s3-ap-southeast-2.amazonaws.com/daily-fire-assets/codepen-assets/building.jpg" />
    <div class="foreground">
      <div class="foreground__content">
        <h1>Oooo, parallax</h1>



/* layout */
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 420px;

/* Parallax Styles */
.parallax-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 8px;
  perspective-origin: 0%;
  display: flex;

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(0px);

.foreground {
  margin-top: auto;
  margin-bottom: 50px;
  transform-origin: 0;
  transform: translateZ(3px) scale(0.625);
  /* Uncomment the code below to see the difference the scale property makes! */
  /* transform: translateZ(3px); */
  /* transform: translateZ(0) scale(1); */

.foreground h1 {
  font-size: 36px;


Link to comment
  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.