Jump to content

Font effects

Recommended Posts

Hi all, I'm looking for a font effect similar to the one on mnrch.net website on the headline "TRUSTED PARTNER IN TURBULENT TIMES". this effects changes the font color / makes it somehow inverted transparent to the video underneath .

any ideas how to make this happen on squarespace?

Link to comment

I use this site to test some effects so it loads a lot of JavaScript & CSS code & Plugins

so it can load slowly

This is code I used for your effect, add it to Code Injection > Footer

you can replace body#....2b9 with text block id. Use this tool to find ID: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

Note: text in Text Block, I use Heading 1, if you use heading 2, you need to change h1 in the code to h2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  setTimeout(function(){
            $('body#collection-6572d00a60727a0edd00a2b9 h1').insertAfter('body#collection-6572d00a60727a0edd00a2b9 video');
         }, 2000);

})
</script>
<style>
  body#collection-6572d00a60727a0edd00a2b9 h1 {
  position: absolute !important;
    top: 30%;
    z-index: 9999;
  }
</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
  • 1 month later...

thanks again for that help - i do struggle still - i tried to rebuild that website to check if I'm able to build the effect into the H1 headline

the block ID is #block-yui_3_17_2_1_1701943410249_5303 and I modified the JS code. what am I missing / doing wrong?  i did try code injection in the footer and header, too.

https://blueberry-pike-54k4.squarespace.com/
 

i also tried to use instead of the block-yui the collection #collection-657198b61aad8f749e2925bb like you did in your example. then the font appears first very small and then bigger but without the effect. 

Link to comment

thanks - i tried that but then the the text first is very small - then bigger in a ligher blue and not centralised anymore

 

it's driving me crazy - i thought I understood the logic you presented and it made a lot of sense (and I am SUPER Thankful for your help! thank you thank you thank you 🙂

 

 

Link to comment
12 hours ago, benjaminr said:

thanks - i tried that but then the the text first is very small - then bigger in a ligher blue and not centralised anymore

 

it's driving me crazy - i thought I understood the logic you presented and it made a lot of sense (and I am SUPER Thankful for your help! thank you thank you thank you 🙂

 

 

Add this code under

<style>
  body#collection-657198b61aad8f749e2925bb h1 {
    mix-blend-mode: exclusion;
}

body#collection-657198b61aad8f749e2925bb h1 span {
    color: white !important;
}

</style>

image.thumb.png.446c87639bae6e8cc8cd24cc59e42e53.png

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

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.