Hi Carl, amazing tutorial love the effect and it works like an absolute charm, thanks for this! One question I have is if there is a way to make the color effect trigger on scroll for mobile since there isn't really a mouse to hover and the colors only trigger if you go out of your way to click on individual letters. Thanks!
Here's the script you'll need to make the effect work 👇 function _toArray(arr) { return Array.isArray(arr) ? arr : Array.from(arr) } function makeSpans (selector) { var _document$querySelect = document.querySelectorAll(selector) var _document$querySelect2 = _toArray(_document$querySelect) var elements = _document$querySelect2.slice(0) return elements.map(function (element) { var text = element.innerText.split('') var spans = text.map(function (letter) { return '' + letter + '' }).join('') return element.innerHTML = spans }) } makeSpans('h1')
Hi Carl, thank you so much for this! Super helpful. Is there a way to make differ H1's turn different colors. For example, if I have an H1 that I want to be purple. But another H1 to be blue. Can I implement this into the code to each specific H1?
Hi Carl, is there a way to add this effect to the page buttons on the top of the website? I'm having a hard time assigning the class to the pages themselves in order to apply the CSS code to them directly.
Always love your little Squarespace tutorials! I'd like to know how to make it that if someone purchases a custom animation on my website, it automatically edits the project file for it in After Effects and automatically send it to the buyer?
That's fine :) Thanks a lot for your awesome tutorials. I actually was watching your "Scroll Progress Bar" video right now but it doesn't seem to work when I followed exactly all the steps. I'm sorry to disturb you but I just thought if you have any ideas for a solution?
@@Carl_Johnson You are the best, The one I'm looking for is the one that one phrase is looping with more phrases and the rest is not. I've seen it in titles most of the time. Thank you for your amazing content!
Glad you found it fun Stu 😀 Yes, there are a couple of ways to do that. Probably the easiest way is instead of putting the CSS into the site-wide CSS editor, put it between style tags (see below) in the page header code injection of the page where you'd like the text effect. You can repeat this on different pages, but change the hex colours in the CSS Hope that makes sense. Style tags CSS HERE
@@Carl_Johnson Thank you Carl for taking the time to reply. I am at Uni, so even just trying out and "playing" with the code injections, allows one to make the mistakes I usually go on to learn from. So will definitely give it a go with style tags. We've been tasked with making blogs to run concurrently with our Fine Art degree, so I will be using your tutorials as a way of trying to bring something extra to the dynamics of my entries. Great presentations Carl and once again thank you for the feedback!
Nice!!! Thanks great upload. Wanted to ask, as there isnt a video or code i can find on the net but can you make a video where one has the Navigation vertically or at the bottom. With the text horizontally and not vertically too.
Yes, you'll need to change all instances of h1 to h2, including in the JavaScript that is pinned at the top of the comments. You'll also need to make the text a link by wrapping the code in the Code Block in link tags like so: YOUR TEXT You will need to change YOURURL to the page you want to link to.
This looks really good and works to color each letter, however, it removes all formatting and links from any text on the page that contain the same tag as the type you are coloring, in my case all H2 text is "broken/loses formatting" as soon as the script starts. Is there a way to run the whole thing in a code block so that it doesn't affect the whole page, only a specific portion of the text?
I'm not the best at Javascript but was thinking maybe calling the function makeSpans('h1') in a way that it only applies to a specific class such as the "text-hover" class?
Changing the script to the following fixed it: function _toArray(arr) { return Array.isArray(arr) ? arr : Array.from(arr) } function makeSpans (selector) { var _document$querySelect = document.querySelectorAll(selector) var _document$querySelect2 = _toArray(_document$querySelect) var elements = _document$querySelect2.slice(0) return elements.map(function (element) { var text = element.innerText.split('') var spans = text.map(function (letter) { return '' + letter + '' }).join('') return element.innerHTML = spans }) } makeSpans('.text-hover') This makes it so that only the text in the .text-hover class gets transformed into a span and not all H1 or H2 like the example in the video. Hope this helps anyone looking to use it because it's a cool effect to have on a page.
If you are looking to apply the script to only one page on your website then instead of adding the script code in the code injection in the advanced menu which would make it run on every page on the website you can just add another code block below the text. The important thing to remember is that the code runs top-down so the text needs to exist for it to transform it. Adding the script to the header in this specific case won't do anything because it will run before the text is created on the page. CSS though can be added as a in the header for the specific page you want this effect to happen in.
Hi Carl!! Thank you so much for sharing, do you think it's possible to have all of the code on the custom CSS sheet? I don't have the business version of Square because I use it as a portfolio so I can't use the code injectors! Thank you for all you do!! :)
Hi Christina! Unfortunately there is no way of putting code into a site on the personal subscription. Squarespace has covered off every conceivable way of doing it.
Hi Carl, as always it's an amazing video mate, I've used the code on my website, but when I add the script to the footer section, the contents on my portfolio(index) page disappears. Do you know why this might be happening?
Hello, i have some problem about this effect 🙇🏻♂️,when I add this code, my website hover background effect will doesn’t work. How can I solve this 🙇🏻♂️
Hey Carl, thanks so much for the tutorial but I ran into a problem: the script makes every h1 color to black. I've tried to fix that but I couldn't. I even tried to use the !important. Here is what I tried to use: //fix the H1 #block-yui_3_17_2_1_1665829163655_14841 { text-decoration-color: var(--light1) !important; text-decoration-thickness: 2px !important; } This one wouldn't work even for the thickness. If you can help me in any way that would be awesome! Edit: I tried to change the color directly in the html but the script seems to override it Ready to Book Your Session?
thank you Carl, once again you have helped me. Take care
Thank You, so happy to find your channel!!
Cheers Carl! you always gots the goods!
This looks so fun. Thank you for making this!
No problem Adriana 😀
Hi Carl, amazing tutorial love the effect and it works like an absolute charm, thanks for this! One question I have is if there is a way to make the color effect trigger on scroll for mobile since there isn't really a mouse to hover and the colors only trigger if you go out of your way to click on individual letters. Thanks!
Great way to add make static websites bit more interesting
Another great one!! Thanks!!
Thanks Tim!
Thank you Carl. That is such a nice idea.
This is brilliant!
Here's the script you'll need to make the effect work 👇
function _toArray(arr) {
return Array.isArray(arr) ? arr : Array.from(arr)
}
function makeSpans (selector) {
var _document$querySelect = document.querySelectorAll(selector)
var _document$querySelect2 = _toArray(_document$querySelect)
var elements = _document$querySelect2.slice(0)
return elements.map(function (element) {
var text = element.innerText.split('')
var spans = text.map(function (letter) {
return '' + letter + ''
}).join('')
return element.innerHTML = spans
})
}
makeSpans('h1')
thanks
hey, I cant find the code in your comments or on your website? Thanks!
This is epic, thank you. Is it possible to use a background image of say gold foil, instead of a color?
Hi Carl, thank you so much for this! Super helpful. Is there a way to make differ H1's turn different colors. For example, if I have an H1 that I want to be purple. But another H1 to be blue. Can I implement this into the code to each specific H1?
Is there a way to have the entire text change color instead of each individual letter?
Perfect!!! 🔥🔥🔥🔥
I've noticed that the logo that I have on my pages disappear when the script is added to the footer. Is there a way to override this?
Hi Carl, is there a way to add this effect to the page buttons on the top of the website? I'm having a hard time assigning the class to the pages themselves in order to apply the CSS code to them directly.
Always love your little Squarespace tutorials! I'd like to know how to make it that if someone purchases a custom animation on my website, it automatically edits the project file for it in After Effects and automatically send it to the buyer?
Thanks arialfx! I'm not sure about that one. Would Adobe Dynamic Link do the trick??
That's fine :) Thanks a lot for your awesome tutorials. I actually was watching your "Scroll Progress Bar" video right now but it doesn't seem to work when I followed exactly all the steps. I'm sorry to disturb you but I just thought if you have any ideas for a solution?
@@arialfx No problem. Are you getting a Syntax error in the CSS editor?
Nope there aren't any syntax errors.
Thank you for such an amazing tutorial, can you make one about animated rotating text? Thanks!
No problem Hector. I have a animated typing text video ruclips.net/video/UOjEr631S7I/видео.html
@@Carl_Johnson You are the best, The one I'm looking for is the one that one phrase is looping with more phrases and the rest is not. I've seen it in titles most of the time. Thank you for your amazing content!
This has been fun trying to do Carl. So thank you for that.
Is there a procedure to have differing colours for differing pages?
Glad you found it fun Stu 😀
Yes, there are a couple of ways to do that. Probably the easiest way is instead of putting the CSS into the site-wide CSS editor, put it between style tags (see below) in the page header code injection of the page where you'd like the text effect.
You can repeat this on different pages, but change the hex colours in the CSS
Hope that makes sense.
Style tags
CSS HERE
@@Carl_Johnson Thank you Carl for taking the time to reply. I am at Uni, so even just trying out and "playing" with the code injections, allows one to make the mistakes I usually go on to learn from. So will definitely give it a go with style tags. We've been tasked with making blogs to run concurrently with our Fine Art degree, so I will be using your tutorials as a way of trying to bring something extra to the dynamics of my entries. Great presentations Carl and once again thank you for the feedback!
Nice!!! Thanks great upload. Wanted to ask, as there isnt a video or code i can find on the net but can you make a video where one has the Navigation vertically or at the bottom. With the text horizontally and not vertically too.
Hi Kondja, I've had a few people ask about that. It is on my list of requests 😀
@@Carl_Johnson Great, really appreciate that. is there a place where one can donate (bribe, and have it appear top of that list lol)
can you do this to a link that is also an H2 tag?
Yes, you'll need to change all instances of h1 to h2, including in the JavaScript that is pinned at the top of the comments. You'll also need to make the text a link by wrapping the code in the Code Block in link tags like so:
YOUR TEXT
You will need to change YOURURL to the page you want to link to.
This looks really good and works to color each letter, however, it removes all formatting and links from any text on the page that contain the same tag as the type you are coloring, in my case all H2 text is "broken/loses formatting" as soon as the script starts. Is there a way to run the whole thing in a code block so that it doesn't affect the whole page, only a specific portion of the text?
I'm not the best at Javascript but was thinking maybe calling the function makeSpans('h1') in a way that it only applies to a specific class such as the "text-hover" class?
Changing the script to the following fixed it:
function _toArray(arr) {
return Array.isArray(arr) ? arr : Array.from(arr)
}
function makeSpans (selector) {
var _document$querySelect = document.querySelectorAll(selector)
var _document$querySelect2 = _toArray(_document$querySelect)
var elements = _document$querySelect2.slice(0)
return elements.map(function (element) {
var text = element.innerText.split('')
var spans = text.map(function (letter) {
return '' + letter + ''
}).join('')
return element.innerHTML = spans
})
}
makeSpans('.text-hover')
This makes it so that only the text in the .text-hover class gets transformed into a span and not all H1 or H2 like the example in the video. Hope this helps anyone looking to use it because it's a cool effect to have on a page.
If you are looking to apply the script to only one page on your website then instead of adding the script code in the code injection in the advanced menu which would make it run on every page on the website you can just add another code block below the text. The important thing to remember is that the code runs top-down so the text needs to exist for it to transform it. Adding the script to the header in this specific case won't do anything because it will run before the text is created on the page. CSS though can be added as a in the header for the specific page you want this effect to happen in.
Hi Carl!! Thank you so much for sharing, do you think it's possible to have all of the code on the custom CSS sheet? I don't have the business version of Square because I use it as a portfolio so I can't use the code injectors! Thank you for all you do!! :)
Hi Christina! Unfortunately there is no way of putting code into a site on the personal subscription. Squarespace has covered off every conceivable way of doing it.
Is it possible to automatically activate the effect when loading the page without having to hover the text with the mouse?
Hi Carl, as always it's an amazing video mate, I've used the code on my website, but when I add the script to the footer section, the contents on my portfolio(index) page disappears. Do you know why this might be happening?
Hello, i have some problem about this effect 🙇🏻♂️,when I add this code, my website hover background effect will doesn’t work. How can I solve this 🙇🏻♂️
Can this be added to a header? if so how?
Will this work with 7.1 square space version?? I tried this, but couldn’t make the colors change.
Hi Mario, yes it works in 7.1. This video is on a 7.1 template.
Nicely down Carl.... See you have someone fans leaving comments? :o)
😂 Thanks Roland! Yes, the fans channels have been removed by YT now!
Hey Carl, thanks so much for the tutorial but I ran into a problem: the script makes every h1 color to black. I've tried to fix that but I couldn't. I even tried to use the !important. Here is what I tried to use:
//fix the H1
#block-yui_3_17_2_1_1665829163655_14841 {
text-decoration-color: var(--light1) !important;
text-decoration-thickness: 2px !important;
}
This one wouldn't work even for the thickness.
If you can help me in any way that would be awesome!
Edit:
I tried to change the color directly in the html but the script seems to override it
Ready to Book Your Session?