amou Posted July 30 Share Posted July 30 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? HoaLT 1 Link to comment
HoaLT Posted July 30 Share Posted July 30 (edited) 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 Edited July 30 by HoaLT Press 👍 or mark my comment as solution if you find my sharing useful 🆒 Squarespace pinchzoom lightbox plugin (affiliate link) 👁🗨 360 degree photo viewer (affiliate link) Link to comment
HoaLT Posted July 30 Share Posted July 30 (edited) 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 Edited July 30 by HoaLT Press 👍 or mark my comment as solution if you find my sharing useful 🆒 Squarespace pinchzoom lightbox plugin (affiliate link) 👁🗨 360 degree photo viewer (affiliate link) Link to comment
amou Posted July 31 Author Share Posted July 31 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 ? Link to comment
amou Posted July 31 Author Share Posted July 31 And the spinning circle should be a link to email Link to comment
HoaLT Posted July 31 Share Posted July 31 (edited) 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 Edited July 31 by HoaLT Press 👍 or mark my comment as solution if you find my sharing useful 🆒 Squarespace pinchzoom lightbox plugin (affiliate link) 👁🗨 360 degree photo viewer (affiliate link) Link to comment
HoaLT Posted July 31 Share Posted July 31 My testing Press 👍 or mark my comment as solution if you find my sharing useful 🆒 Squarespace pinchzoom lightbox plugin (affiliate link) 👁🗨 360 degree photo viewer (affiliate link) Link to comment
amou Posted August 4 Author Share Posted August 4 (edited) where shall I put the css code? It is still showing only on the footer and not spinning Edited August 4 by amou Link to comment
HoaLT Posted August 5 Share Posted August 5 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. 2024-08-06 00-02-24.mp4 Look like you have figured it out, right? Press 👍 or mark my comment as solution if you find my sharing useful 🆒 Squarespace pinchzoom lightbox plugin (affiliate link) 👁🗨 360 degree photo viewer (affiliate link) Link to comment
amou Posted August 6 Author Share Posted August 6 really strange, for me its not working, neither safari neither firefox. its still in the footer, very big and not spinning Enregistrement de l’écran 2024-08-06 à 09.12.54.mov Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment