Jump to content

Fade-in text blocks possible?

Recommended Posts

Hi,

Is there a way to have a text block fade in, then out (maybe while doing a ken burns motion)? Or have several text blocks appear then disappear, one after the other?  I'm looking to add some minor motion to a site to add a little pizazz, but not overboard.  The text can be text in images if that is necessary.

I've been using Squarespace for 5 months now, and have some basic elements, but am looking to spruce it up a bit. I'm looking through the online KB, but I don't see anything that does this.

Thanks!

Link to comment
  • Replies 9
  • Created
  • Last Reply
14 hours ago, derricksrandomviews said:

You can make quote blocks fade in and lots of other animations. I just put one of those in place of a standard text block. 

Thanks derricksrandom!  Is there a place I need to go to activate those, or are they just included (and I need to find them)?

Link to comment

Add a quote block like you would a text block on a page, right at the insert point, that little dot (blue and white plus +), you click to open the elements panel, and it will have quote as one of the options at the top. After you add the block you  will get another panel, edit it to add text, and the source of the qoute, which you don't have to use and there will be an animations option. Pull it down for lots of choices. 

This bit of code should  remove the quotation marks if you don't want them, in custom CSS

.quote-block blockquote>span:first-child { display:none; }

 

 

Link to comment

Well you can have multiple quote blocks on a page, on top of the other,  side by side. Use spacers if you have to to size them and line em up the way you want and space in between.

As far as color is concerned you can get them to stand out on a site wide basis both color and font.

Colors

To style the Quote Block's colors:

  1. In the Home Menu, click Design, then Colors.
  2. Click the pencil icon on your selected color theme.
  3. Scroll to the Quote Block section to change the Text and Source colors.
  4. Click Save after making changes.

Fonts

To style the Quote Block's fonts:

  1. In the Home Menu, click Design, then Fonts.
  2. Click “the on your selected font pack.
  3. Click Advanced, then scroll to the Quote Block section to style Text and Source.
  4. Click Save.

There are other things you can do also with CSS code, if you have a business plan.

Link to comment
  • 2 months later...
  • 2 months later...
On 7/30/2020 at 6:07 PM, derricksrandomviews said:

Since what you are after is animating any text block, this might be something more useful:

https://www.rebeccagracedesigns.com/blog/animate-text-on-squarespace-website

This is great thanks for sharing. Is there a line of code I can use to cause a FADEIN animation for all blocks across the whole site instead of being adding this animation manually to every image and text block www.nafisi.design

Screenshot 2020-10-02 at 15.50.19.png

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.