laurenv Posted May 18 Share Posted May 18 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
0 tuanphan Posted May 20 Share Posted May 20 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Question
laurenv
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
Top Posters For This Question
1
1
Popular Days
May 18
1
May 20
1
Top Posters For This Question
tuanphan 1 post
laurenv 1 post
Popular Days
May 18 2022
1 post
May 20 2022
1 post
1 answer to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment