thank you Carl, once again you have helped me. Take care
@VladimirCherepanoff2 жыл бұрын
Cheers Carl! you always gots the goods!
@edtechocean67504 жыл бұрын
Thank You, so happy to find your channel!!
@adriemanquero4 жыл бұрын
This looks so fun. Thank you for making this!
@Carl_Johnson4 жыл бұрын
No problem Adriana 😀
@jaisandhu264 жыл бұрын
Great way to add make static websites bit more interesting
@greggolko65432 жыл бұрын
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!
@Carl_Johnson4 жыл бұрын
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')
@vicenteisaias_3 жыл бұрын
thanks
@tim.van.emmerloot4 жыл бұрын
Another great one!! Thanks!!
@Carl_Johnson4 жыл бұрын
Thanks Tim!
@wendyhoile76594 жыл бұрын
Thank you Carl. That is such a nice idea.
@RichardDunbavand3 жыл бұрын
This is brilliant!
@chukleberryfinn3 жыл бұрын
hey, I cant find the code in your comments or on your website? Thanks!
@LEYRTP3 жыл бұрын
Perfect!!! 🔥🔥🔥🔥
@LEYRTP3 жыл бұрын
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?
@nirshemesh21513 жыл бұрын
This is epic, thank you. Is it possible to use a background image of say gold foil, instead of a color?
@mikaylaherrick82372 жыл бұрын
Is there a way to have the entire text change color instead of each individual letter?
@arialfx4 жыл бұрын
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?
@Carl_Johnson4 жыл бұрын
Thanks arialfx! I'm not sure about that one. Would Adobe Dynamic Link do the trick??
@arialfx4 жыл бұрын
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_Johnson4 жыл бұрын
@@arialfx No problem. Are you getting a Syntax error in the CSS editor?
@arialfx4 жыл бұрын
Nope there aren't any syntax errors.
@FreakinRedVines3 жыл бұрын
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?
@FaridR3 жыл бұрын
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.
@hectornunez50684 жыл бұрын
Thank you for such an amazing tutorial, can you make one about animated rotating text? Thanks!
@Carl_Johnson4 жыл бұрын
No problem Hector. I have a animated typing text video kzbin.info/www/bejne/i4DNdqVsaJaGbas
@hectornunez50684 жыл бұрын
@@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!
@stuartlee994 жыл бұрын
This has been fun trying to do Carl. So thank you for that. Is there a procedure to have differing colours for differing pages?
@Carl_Johnson4 жыл бұрын
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
@stuartlee994 жыл бұрын
@@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!
@kondjanegongo7964 жыл бұрын
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.
@Carl_Johnson4 жыл бұрын
Hi Kondja, I've had a few people ask about that. It is on my list of requests 😀
@kondjanegongo7964 жыл бұрын
@@Carl_Johnson Great, really appreciate that. is there a place where one can donate (bribe, and have it appear top of that list lol)
@georgegogarten35934 жыл бұрын
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?
@georgegogarten35934 жыл бұрын
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?
@georgegogarten35934 жыл бұрын
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.
@georgegogarten35934 жыл бұрын
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.
@christinaackerman22374 жыл бұрын
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!! :)
@Carl_Johnson4 жыл бұрын
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.
@tanyalize3 жыл бұрын
Is it possible to automatically activate the effect when loading the page without having to hover the text with the mouse?
@edwindavis68234 жыл бұрын
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?
@onlysalsal Жыл бұрын
can you do this to a link that is also an H2 tag?
@Carl_Johnson Жыл бұрын
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.
@maddierourke10794 жыл бұрын
Can this be added to a header? if so how?
@caleblam84704 жыл бұрын
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 🙇🏻♂️
@mariam-uy7ym4 жыл бұрын
Will this work with 7.1 square space version?? I tried this, but couldn’t make the colors change.
@Carl_Johnson4 жыл бұрын
Hi Mario, yes it works in 7.1. This video is on a 7.1 template.
@rolandvandenhout4 жыл бұрын
Nicely down Carl.... See you have someone fans leaving comments? :o)
@Carl_Johnson4 жыл бұрын
😂 Thanks Roland! Yes, the fans channels have been removed by YT now!
@user-dk6dh5ou4v2 жыл бұрын
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?