Jump to content

Pls help embed CodePen to Squarespace (...It's an image effect)

Recommended Posts

Site URL: https://cobalt-horse-nm25.squarespace.com/config/

G'day guys!

This is my first time attempting to use CodePen to enhance an image effect on my site.  I thought it would be pretty straightforward with moving HTML & CSS over to the sections in my Squarespace site, but unfortunately it's not showing up as expected, meanwhile it looks fine on CodePen.  If one of you blokes could tell me where I'm going wrong, I'll be eternally grateful...cheers, Dan.  (I've detailed my process below for your critique/review)

CodePen URL reference

Step 1 - Copy HTML from CodePen

  • I copied the HTML from CodePen and pasted it within a codeblock in my Squarespace site (Image attached)

Step 2 - Copy CSS from CodePen

  • I copied the CSS from CodePen and pasted it within the Custom CSS section of my Squarespace site

Error appearing in Custom CSS section

  • The following error appears in red within the Custom CSS section: "Operation On An Invalid Type"

 

Images showing what I'm seeing (...and obviously doing wrong)

  • Image 1 (CodePen example working fine) = 1795507506_Honeycombcodepenimage.thumb.PNG.55fddcdff6eceafae46444f267b8a82c.PNG

 

  • Image 2 (Step 1 result of copy/paste of HTML) = 547588470_HoneycombcodepenHTMLtoSquarespacecodeblock.thumb.PNG.2d612b35d9e755cb24eb6d2d6666a8d7.PNG

 

  • Image 3 (Custom CSS error message appearing in Squarespace) = 1060732714_HoneycombcodepenCustomCSSerrormessage.thumb.PNG.1c9bab04918d2fa8e2a93c9231c6a240.PNG
Link to comment
  • Replies 1
  • Created
  • Last Reply

You need to compile HTMl/CSS. Add all below code to Code Block


<base target="_blank"/>
<ul>
  <li><a href="https://unsplash.com/photos/iuvLYv85r40"><img src="https://images.unsplash.com/photo-1471119017026-179f1bb0a70e?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=c022be1f4d96b88d053b6874cd1df8f5&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60"/></a></li>
  <li><a href="https://unsplash.com/photos/voeDggfOgxc"><img src="https://images.unsplash.com/photo-1487744137800-5282ebdb0ba3?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=65472c9ecf25616e0d5037e98795db37&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60"/></a></li>
  <li><a href="https://unsplash.com/photos/_M6gy9oHgII"><img src="https://images.unsplash.com/photo-1488161628813-04466f872be2?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=8f9d47f8ca4f63a5c7035c2986cfd95e&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60"/></a></li>
  <li><a href="https://unsplash.com/photos/R1Ku62Z7zqE"><img src="https://images.unsplash.com/photo-1448376561459-dbe8868fa34c?ixlib=rb-0.3.5&amp;s=c20042d58b121e90f8b8de83253de4cb&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60"/></a></li>
  <li><a href="https://unsplash.com/photos/JN3XEQdLEss"><img src="https://images.unsplash.com/photo-1490905461158-067f4895ea9d?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=ec12d476aa884c9ff23d2169cc359a09&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60"/></a></li>
  <li><a href="https://unsplash.com/photos/j4nBSqFf08U"><img src="https://images.unsplash.com/photo-1468818461933-b1d79f62434e?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=8d34ef5dba728dc836a9f60a2034c912&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60"/></a></li>
</ul>
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}

ul {
  width: 70vmin;
  height: 70vmin;
  position: relative;
}

li {
  /*
    |a|d|a|
    -------  -           
    |/   \|  | 0.5h
    |\   /|  ^          
    ------- 
    |  w  |
  
    a = 0.5h/tan60 = 0.28867513459h
    d = 0.5h/sin60 = 0.57735026919h
    w = a + d + a  = 1.15470053838h
  
    [zoom out]
  
        |a|_d_|         _____    _
        /|     \       /     \   |
  ang=60_|      \__d__/       \  | h     
       \        /     \       /  |
        \_____|/|      \_____/  _|
              a     
       |--------|
           w
  */
  --h: calc(100% / 3);
  --w: calc(1.15470053838 * var(--h));
  --a: calc(0.28867513459 * var(--h));
  --d: calc(0.57735026919 * var(--h));
  height: var(--h);
  width: var(--w);
  position: absolute;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 
  
   [clip-path coordinates]
  
    --A-F--
   B|/   \|E    coord.
    |\   /|       A(a/w, 0)
    --C-D--       B(0, 50%)
                  C(a/w, 100%)
                  D(100% - a/w, 100%)
                  E(100%, 50%)
                  F(100% - a/w, 0)
                where a/w = 0.24999999999
  */
  --aw: 24.99999999999%;
  clip-path: polygon(
    var(--aw) 0,
    0 50%,
    var(--aw) 100%,
    calc(100% - var(--aw)) 100%,
    100% 50%,
    calc(100% - var(--aw)) 0
  );
}

li:nth-of-type(1) {
  left: calc(50% - var(--a) - var(--d) * 0.5);
  top: 0;
}
li:nth-of-type(2) {
  left: calc(50% - var(--a) * 2 - var(--d) * 1.5);
  top: calc(var(--h) * 0.5);
}
li:nth-of-type(3) {
  left: calc(50% - var(--a) * 2 - var(--d) * 1.5);
  top: calc(var(--h) * 1.5);
}
li:nth-of-type(4) {
  left: calc(50% - var(--a) - var(--d) * 0.5);
  top: calc(var(--h) * 2);
}
li:nth-of-type(5) {
  left: calc(50% + var(--d) * 0.5);
  top: calc(var(--h) * 0.5);
}
li:nth-of-type(6) {
  left: calc(50% + var(--d) * 0.5);
  top: calc(var(--h) * 1.5);
}

/* 
style 
*/

ul {
  filter: drop-shadow(0 0 10px hsla(0, 0%, 0%, 0.3));
}

li:hover {
  filter: drop-shadow(0 0 10px powderblue);
  z-index: 10;
}

/*
anim
*/

ul {
  animation: r 4s forwards;
}
@keyframes r {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(0);
  }
}

li {
  animation: ir 4s forwards;
}
@keyframes ir {
  from {
    transform: rotate(-360deg);
  }
  to {
    transform: rotate(0);
  }
}

</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.