ConeCake Posted June 24, 2021 Share Posted June 24, 2021 Site URL: https://www.code-shop.co/ Hey! I stumbled upon this website (the url is not my website). If you scroll down to the very bottom, right before newsletter sign up is a cool rolling animation with the companys social media accounts linked in it. I really like this and would like something similar on my own site, but how do I make one? I tried understanding the css but could not wrap my head around it since I have not used css for too long. Any help is appreciated! Thanks! Link to comment
Solution Beyondspace Posted June 26, 2021 Solution Share Posted June 26, 2021 On 6/25/2021 at 1:54 AM, ConeCake said: Site URL: https://www.code-shop.co/ Hey! I stumbled upon this website (the url is not my website). If you scroll down to the very bottom, right before newsletter sign up is a cool rolling animation with the companys social media accounts linked in it. I really like this and would like something similar on my own site, but how do I make one? I tried understanding the css but could not wrap my head around it since I have not used css for too long. Any help is appreciated! Thanks! Add this into code block <div class="marquee"> <div class="track"> <div class="content"><h3 style="color: #fff; text-decoration:none;"><a href="https://www.instagram.com/letstalkcodeshop" target="_blank">Follow on Instagram @letstalkcodeshop | Follow on Instagram @letstalkcodeshop | Follow on Instagram @letstalkcodeshop | Follow on Instagram @letstalkcodeshop | Follow on Instagram @letstalkcodeshop | Follow on Instagram @letstalkcodeshop | Follow on Instagram @letstalkcodeshop | Follow on Instagram @letstalkcodeshop | Follow on Instagram @letstalkcodeshop</a></h3></div> </div> </div> <style> .marquee { position: relative; width: 110vw; max-width: 100%; height: 25px; padding-top: 20px; padding-bottom:20px; overflow-x: hidden; background: #000; } .track { position: absolute; white-space: nowrap; will-change: transform; animation: marquee 32s linear infinite; } .marquee h3 a:hover { color: #fff; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } </style> ConeCake 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment