animation and staying on screen while scrolling

Hey, can anybody help and tell me how to create an animation like (here: https://latch.agency/)
the "get in touch" is moving and staying always visible even if we are scrolling the page.

I wish to do something similar, round shape also with the logo inside.

Has anybody an idea about and can give some insights please?

7 hours ago, amou said:

Hey, can anybody help and tell me how to create an animation like (here: https://latch.agency/)
the "get in touch" is moving and staying always visible even if we are scrolling the page.

I wish to do something similar, round shape also with the logo inside.

 

Has anybody an idea about and can give some insights please?

The idea is to add an svg with using block code and use CSS to animate it to rotate infinitely

Add to code block (put in footer)

<a href="#" id="spin-text">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xml:lang="en"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 500 500"
    >
      <title>Circular Text Path</title>
      <defs>
        <path
          id="textcircle"
          d="M250,400
                       a150,150 0 0,1 0,-300a150,150 0 0,1 0,300Z"
          transform="rotate(12,250,250)"
        />
      </defs>
      <g class="textcircle">
        <text textLength="940">
          <textPath
            xlink:href="#textcircle"
            aria-label="CSS & SVG are awesome"
            textLength="940"
          >
            The test need to be circulate
          </textPath>
        </text>
      </g>
    </svg>
</a>

Add custom CSS

.sqs-block-content:has(#spin-text) {
  transform: none !important;
}

#footer-sections {
  z-index: 9;
}
#spin-text {
  --size: 160px;
  display: block;
  position: fixed;
  right: 0;
  bottom: 0;
}
#spin-text text {
  fill: #000;
  font-family: "Lato", sans-serif;
  font-size: 30px;
  font-weight: 500;
  text-transform: uppercase;
  font-variant-ligatures: none;
  letter-spacing: 6px;
  animation: rotate 25s linear infinite;
  transform-origin: 250px 250px;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

#spin-text .textcircle {
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
  transform-origin: 250px 250px;
}

#spin-text .textcircle {
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
  transform-origin: 250px 250px;
}

#spin-text svg:hover .textcircle {
  transform: scale(1.2) rotate(90deg);
}

Demo

Hope it can help

The above code I share is applying :has select for Css style which is not available for all browser: https://caniuse.com/css-has

For full support, change from 

.sqs-block-content:has(#spin-text) {
  transform: none !important;
}

to

#YourBlockID .sqs-block-content { 
  transform: none !important;
}

Replace #YourBlockID with the code block id you are using

Hi HoaLT,

thanks for your help. I integrated the code (https://www.ayursattvic.com/tmoignage#) but now it is showing in the footer and not spinning. I need it on the right side and it should always be visible even when the  webpage visitor is scrolling. Also I wish to have the Logo inside the circle.

About the CSS … where I shall integrate the CSS code? And where I find the BlockID ?

And the spinning circle should be a link to email

2 hours ago, amou said:

And the spinning circle should be a link to email

It can be done by using href = "mailto:your email"

<a href="mailto:someone@example.com" id="spin-text">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xml:lang="en"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 500 500"
    >
      <title>Circular Text Path</title>
      <defs>
        <path
          id="textcircle"
          d="M250,400
                       a150,150 0 0,1 0,-300a150,150 0 0,1 0,300Z"
          transform="rotate(12,250,250)"
        />
      </defs>
      <g class="textcircle">
        <text textLength="940">
          <textPath
            xlink:href="#textcircle"
            aria-label="CSS & SVG are awesome"
            textLength="940"
          >
            The test need to be circulate
          </textPath>
        </text>
      </g>
    </svg>
</a>

Css code

#block-yui_3_17_2_1_1722434160526_6677 .sqs-block-content { 
  transform: none !important;
}

#footer-sections {
  z-index: 9;
}
#spin-text {
  --size: 160px;
  display: block;
  position: fixed;
  right: 0;
  bottom: 0;
  width: var(--size);
}
#spin-text text {
  fill: #000;
  font-family: "Lato", sans-serif;
  font-size: 30px;
  font-weight: 500;
  text-transform: uppercase;
  font-variant-ligatures: none;
  letter-spacing: 6px;
  animation: rotate 25s linear infinite;
  transform-origin: 250px 250px;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

#spin-text .textcircle {
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
  transform-origin: 250px 250px;
}

#spin-text .textcircle {
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
  transform-origin: 250px 250px;
}

#spin-text svg:hover .textcircle {
  transform: scale(1.2) rotate(90deg);
}

Let me know how it goes on your site

My testing

where shall I put the css code? It is still showing only on the footer and not spinning

On 8/4/2024 at 3:35 PM, amou said:

where shall I put the css code? It is still showing only on the footer and not spinning

I checked that it is working on your site now.

Look like you have figured it out, right?

really strange, for me its not working, neither safari neither firefox. its still in the footer, very big and not spinning