Do It Yourself – Tutorials – How to create a typing text animation in Squarespace // Squarespace CSS Tutorial

by | Jan 13, 2021 | 0 comments

Do It Yourself – Tutorials – How to create a typing text animation in Squarespace // Squarespace CSS Tutorial

by | Jan 13, 2021 | Do It Yourself - Build Your Own Website | 0 comments

Do It Yourself – Website Tutorials



Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 http://bit.ly/guide-to-css

This tutorial was recorded in my 7.1 demo site but also works for older versions of Squarespace.

This tutorial will show you how to create a typing text effect in Squarespace, where a block of text will appear to be typed onto the page after it loads. A few important things to note before you copy and paste this into your own site:

+ This will work in any version of Squarespace, 7, 7.1, and even older sites built on Squarespace 5.
+ There is more than one way to do this! This is just one approach of many because code is super customizable.
+ Get creative with the font itself using some CSS! I have a few examples of codes for color, bold font styles, but get creative here 🙂
+ Youtube won’t allow those greater-than/less-than/angled brackets in a YouTube description, and those are key for steps one and three! If you can’t see the code in the video, you can copy it right out of my blog post at https://insidethesquare.co/squarespace-tutorials/typing-text

Alrighty, that’s it for the good-to-know info! Steps and codes from the demo are below. If you need any help along the way, visit insidethesquare.co/code-help

Step One: Add a code block to your site with the sentence you want to feature, like this example here.
(left angle bracket)div class=”typit”(right angle bracket)HERE IS AN EXAMPLE OF SOME TYPING TEXT(left angle bracket)/div(right angle bracket)

Step two: Navigate to your Custom CSS (Design – Custom CSS) and paste this code below
.typeit {
overflow: hidden;
font-size:25px; /* this can be any font size you want */
border-right: 2px solid #50bdb8; /* change this color in the keyframe too */
white-space: nowrap;
margin: 0 auto;
animation:
typeit 3.5s steps(40, end),
right-border .5s step-end infinite;
}
@keyframes typeit {
from { width: 0 }
to { width: 100% }
}
@keyframes right-border {
from, to { border-color: transparent }
50% { border-color: #50bdb8; /* change this in the css above too */ }
}

Optional Step Three: Customize your code with some CSS! You can change the font family, color, size, style and more using some code. If you want to change the font color and thickness, add this after your first curly bracket {
color:red; font-weight:bolder;

Want to change the font size on mobile? Add this line to your custom CSS and change the value to the font size you want to use on any screen smaller than 640px in width:
@media only screen and (max-width: 640px){ .typeit { font-size:25px!important; }}

▸▸▸ Ready for more codes?
The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy at https://InsideTheSquare.co/css


#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #scrollingtext #squarespacecodes #freesquarespacetutorial

The term “Squarespace” is a trademark of Squarespace, Inc. I am not affiliated with Squarespace, Inc. I just really love their platform.

source

0 Comments

Submit a Comment

What Our Clients Are Saying

Travco RV

Leland lets me focus on running my business while he takes care of the digital marketing for us. He really...

Rod, Travco-Rv.com

Dieno Digital Marketing Services
5
2018-04-27T20:16:51+00:00

Rod, Travco-Rv.com

Leland lets me focus on running my business while he takes care of the digital marketing for us. He really takes care of our companies marketing with his expertise and has a lot of great ideas. We are very fortunate to  have him helping us with fresh new ideas.

British Columbia Coalition Of Motorcyclists

We've been working with Dieno Digital, for the past year and a half now and couldn't be happier with all...

Tara, British Columbia Coalition Of Motorcyclists

Dieno Digital Marketing Services
5
2018-04-27T22:05:28+00:00

Tara, British Columbia Coalition Of Motorcyclists

We've been working with Dieno Digital, for the past year and a half now and couldn't be happier with all the updates  to our website. Leland is always very responsive and able to answer all of questions or fix any issues in no time at all. We look forward to continuing to expanding and broadening our website with Dieno Digital.

Amplifylife.ca

Been working with Leland on a project for a Not-For-Profit organization and it is a pleasure to be able to...

Rob - Amplylife.ca

Dieno Digital Marketing Services
5
2018-05-03T19:49:40+00:00

Rob - Amplylife.ca

Been working with Leland on a project for a Not-For-Profit organization and it is a pleasure to be able to bring a high level of creativity, energy, expertise and professionalism to the project for their digital marketing needs. We are so excited for the chance to work more with Leland and Dieno Digital.

FS Designs

Leland is extremely knowledgeable and super pleasant to deal with. He helped me get my website running for my graphic...

F.S.

Dieno Digital Marketing Services
5
2018-06-19T18:50:18+00:00

F.S.

Leland is extremely knowledgeable and super pleasant to deal with. He helped me get my website running for my graphic design business and improved my SEO so that I appear more frequently and near the top of searches. He a great digital and web strategist and I would highly recommend his services.
5
4
Dieno Digital Marketing Services