laurenv Posted May 18, 2022 Share Posted May 18, 2022 Hi, so I have some html code that I can use to build a scroller like this: https://codepen.io/PixelNull/pen/qzmRKe. But struggling with figuring out how to incorporate it into Squarespace. Anyone know how to do this? Link to comment
tuanphan Posted May 20, 2022 Share Posted May 20, 2022 Add a Code Block > Paste this code <div class="card"> <h1>Coding is <!-- Scroller Start --> <div class="scroller"> <span> Cool<br/> Art<br/> Intruiging<br/> Challenging </span> </div> <!-- Scroller End --> </h1> <p class="note"> Simple text scroller by <a href="http://roel.shoikan.nl">Roël Couwenberg.</a><br/><br/> Follow me!<br/> <a href="http://roel.shoikan.nl">My Website.</a> </p> </div> <style> .card h1 { font-weight: normal; } .card a { text-decoration: none; font-weight: bold; background: linear-gradient(135deg, rgba(43,171,217,1) 0%, rgba(0,130,200,1) 100%); -webkit-background-clip: text; color: transparent; } .card { background: linear-gradient(135deg, rgba(43,171,217,1) 0%, rgba(0,130,200,1) 100%); font-family: "Montserrat", Arial; } .card { position: absolute; background-color: #F8F8F8; border-radius: 1.5em; min-width: 400px; max-width: 1170px; width: 30%; padding: 2.6em 3.8em; cursor: pointer; top: 50%; transform: translate(-50%, -50%); left: 40%; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1), 0 32px 32px rgba(0, 0, 0, 0.15), 0 64px 64px rgba(0, 0, 0, 0.15); } .note::after { content: ''; width: 20%; height: 2px; border-radius: 999px; background-color: #AFAFAF; background: linear-gradient(135deg, rgba(43,171,217,1) 0%, rgba(0,130,200,1) 100%); position: absolute; top: -1.8em; left: 0; } .note { font-size: 0.8em; color: #8A8A8A; position: relative; margin-top: 4em; } /* Scroller styling */ .scroller { height: 1.2em; line-height: 1.2em; position: relative; overflow: hidden; width: 10em; } .scroller > span { position: absolute; top: 0; animation: slide 5s infinite; font-weight: bold; } @keyframes slide { 0% { top: 0; } 25% { top: -1.2em; } 50% { top: -2.4em; } 75% { top: -3.6em; } } </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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment