Jump to content

Font effects

Recommended Posts

Posted

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?

Posted

yes. that looks exactly like it. did you put this video on 0.5 speed or is the JS taking up so much ressources that the video is very slow.

how have you done it?

Posted

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!)

  • 1 month later...
Posted

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. 

Posted

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 🙂

 

 

Posted
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!)

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.