benjaminr Posted December 7, 2023 Posted December 7, 2023 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?
tuanphan Posted December 8, 2023 Posted December 8, 2023 It is possible, after testing something, I achieved it with SS See a demo: https://tuanphan3.squarespace.com/text-effect1 pass: abc Is this what you want? benjaminr and melody495 2 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!)
benjaminr Posted December 8, 2023 Author Posted December 8, 2023 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?
tuanphan Posted December 9, 2023 Posted December 9, 2023 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> benjaminr 1 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!)
benjaminr Posted February 1 Author Posted February 1 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.
tuanphan Posted February 3 Posted February 3 body#collection-6572d00a60727a0edd00a2b9 is Page ID, not Block ID with new page, the ID should be body#collection-657198b61aad8f749e2925bb 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!)
benjaminr Posted February 5 Author Posted February 5 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 🙂
tuanphan Posted February 6 Posted February 6 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> 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!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment