Jump to content

How to fill one word with a flashing GIF?

Go to solution Solved by iamdavehart,

Recommended Posts

Site URL: https://lychee-magnolia-et83.squarespace.com/

Hi there, on my landing page I would like to fill the "*" with a flashing colourful gif. I know how to create gifs and upload them to use a URL in Squarespace. How do I address the "*" only and is it even possible? I saw that Ghost Plugins has a code for addressing a whole font style: https://www.ghostplugins.com/steps/92g7jen6

Below is a screenshot. The password to my website is creative1234.

Thank you.

1813614937_ScreenShot2021-08-26at8_23_39PM.thumb.png.7544266a4e3f53a6d093aa29499b34f1.png

 

Edited by nowicluk
Link to comment
20 hours ago, nowicluk said:

Site URL: https://lychee-magnolia-et83.squarespace.com/

Hi there, on my landing page I would like to fill the "*" with a flashing colourful gif. I know how to create gifs and upload them to use a URL in Squarespace. How do I address the "*" only and is it even possible? I saw that Ghost Plugins has a code for addressing a whole font style: https://www.ghostplugins.com/steps/92g7jen6

Below is a screenshot. The password to my website is creative1234.

Thank you.

1813614937_ScreenShot2021-08-26at8_23_39PM.thumb.png.7544266a4e3f53a6d093aa29499b34f1.png

 

If you can make * italic or under line, then it will have a different code, then we can use CSS to target it to add gif

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

Hey @nowicluk! This is definitely possible. 

Try bolding the * and then targeting only that character with bold-targeted CSS.

Something like this should help as it will only target the character that's bold – this being the *. Be sure to update h1 if that is not the header size you are using in your example.

Targeting the text block's block-id before the CSS will also help in case you bold other headers throughout the site and don't want those affected.

// GIF Text //

h1 strong {
  background: url(GIF-URL-HERE.gif) !important;
  background-size: cover !important;
  background-position: center !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  }

Hope this helps! 👻

Cody and Team, The Ghost Co.

👻 Ghost Plugins: Over 500+ free plugins and templates for Squarespace
🎉 
Ghost MarketplaceThe very first product-based marketplace for Squarespace

Link to comment

@tuanphan @ghostplugins Thank you. I tried it. But it doesn't work. See below.

h1 strong {
  background: url(www.dropbox.com/s/0fxpqva9linmm7w/tcl_colours.gif) !important;
  background-size: cover !important;
  background-position: center !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  }

The website is live: www.thecreativelab.bz

Edited by nowicluk
Link to comment

Hey @nowicluk!

It is best to host the GIF file yourself on your Squarespace website via Custom CSS > Manage Files. Once you upload to the file to CSS Files, click the file and a URL will generate in the CSS panel.

Take this file URL and paste it into your code (replace the DropBox link). That should do the trick! 👍

Cody and Team, The Ghost Co.

👻 Ghost Plugins: Over 500+ free plugins and templates for Squarespace
🎉 
Ghost MarketplaceThe very first product-based marketplace for Squarespace

Link to comment
  • Solution

Looking at your site and the gif involved there's a couple of issues here. 

  • I don't think dropbox let you link directly to files any more and use them as a proxy web server. You'd be much better off loading the image up to squarespace and then using that image as @ghostplugins says.
  • However, I think looking at the gif you're using, this won't get you what you want anyway. I think you mean for the asterisk itself to cycle through the colours. the code that you're trying to put in will fill the background. so you'll get a square gif flashing away but no asterisk (the asterisk gets made transparent by the css you've used). 

🙂

EDIT! I didn't see the background-clip in the CSS, so if you just do what @ghostplugins said (which is my first point about dropbox not hosting files) it would work. however, the css animations below would work too because your GIF is just block colours. my bad!

However, support for text background-clip can be a bit patchy (background-clip - CSS: Cascading Style Sheets | MDN (mozilla.org)), so leaving this here as a css animation alternative.

🙂

to get this effect you've got a number of options (use javascript, create a flashing asterisk gif etc), but I think the best is to use a css animation. doesn't require premium. Just replace the css you've been using with something like this

@keyframes flashy-asterisk {
    0% { color:red; }
    32% { color:red; }
    33% { color: blue; }
    66% { color: blue; }
    67% { color: green; }
    100% { color: green; }
}

h1 strong {
    animation: flashy-asterisk 2s linear infinite;
}
  • the colours have been laid out like this to get it flashing like the gif, but if you removed the extra repeated stops (32% and 66%) then it would ease between the colours.
  • the animation commands cycles between them infinitely over 2s. It starts and 0% and goes to 100% and then starts again at 0%

looks like this

flashy-asterisk.gif.127986a25537b7c83e35296996f2e1fa.gif

Here's the css animations reference if you want to try different effects

CSS Animations (w3schools.com)

 

Edited by iamdavehart
misread the problem!

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.