Jump to content

Animated arrow from codepen into code block

Recommended Posts

  • Replies 4
  • Views 1.6k
  • Created
  • Last Reply
9 hours ago, robertmackenzie said:

Site URL: https://terrier-cornet-s4fa.squarespace.com/

I am trying to add - https://codepen.io/jurbank/pen/WZovGE as a clickable arrow that shifts down to the next point on the page. I've added it to the code block but it's just appearing as text and not showing at all. I'm not sure which form of CSS I am supposed to copy over.

Any help would be much appreciated.

I think you should complie the scss to css before using it

.arrow-container {
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateZ(0deg);
}
.arrow-container:hover {
  cursor: pointer;
}
.arrow-container:hover .arrow {
  top: 50%;
}
.arrow-container:hover .arrow:before {
  transform: translate(-50%, -50%) rotateZ(-30deg);
}
.arrow-container:hover .arrow:after {
  transform: translate(-50%, -50%) rotateZ(30deg);
}

.arrow {
  position: absolute;
  left: 50%;
  transition: all 0.4s ease;
}
.arrow:before, .arrow:after {
  transition: all 0.4s ease;
  content: "";
  display: block;
  position: absolute;
  transform-origin: bottom right;
  background: #fff;
  width: 4px;
  height: 50px;
  border-radius: 10px;
  transform: translate(-50%, -50%) rotateZ(-45deg);
}
.arrow:after {
  transform-origin: bottom left;
  transform: translate(-50%, -50%) rotateZ(45deg);
}
.arrow:nth-child(1) {
  opacity: 0.3;
  top: 35%;
}
.arrow:nth-child(2) {
  opacity: 0.6;
  top: 55%;
}
.arrow:nth-child(3) {
  opacity: 0.9;
  top: 75%;
}

image.png.b7d2904de57d32c4ed7159debbd67f0e.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
14 hours ago, bangank36 said:

I think you should complie the scss to css before using it


.arrow-container {
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateZ(0deg);
}
.arrow-container:hover {
  cursor: pointer;
}
.arrow-container:hover .arrow {
  top: 50%;
}
.arrow-container:hover .arrow:before {
  transform: translate(-50%, -50%) rotateZ(-30deg);
}
.arrow-container:hover .arrow:after {
  transform: translate(-50%, -50%) rotateZ(30deg);
}

.arrow {
  position: absolute;
  left: 50%;
  transition: all 0.4s ease;
}
.arrow:before, .arrow:after {
  transition: all 0.4s ease;
  content: "";
  display: block;
  position: absolute;
  transform-origin: bottom right;
  background: #fff;
  width: 4px;
  height: 50px;
  border-radius: 10px;
  transform: translate(-50%, -50%) rotateZ(-45deg);
}
.arrow:after {
  transform-origin: bottom left;
  transform: translate(-50%, -50%) rotateZ(45deg);
}
.arrow:nth-child(1) {
  opacity: 0.3;
  top: 35%;
}
.arrow:nth-child(2) {
  opacity: 0.6;
  top: 55%;
}
.arrow:nth-child(3) {
  opacity: 0.9;
  top: 75%;
}

image.png.b7d2904de57d32c4ed7159debbd67f0e.png

Thanks for getting back to me, I tried that and unfortunately it still just shows as code.

Link to comment
5 hours ago, robertmackenzie said:

Thanks for getting back to me, I tried that and unfortunately it still just shows as code.

Have you made sure display as source is unchecked

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

what is your site password

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.