Squarespace Text Animation on Hover | Multicoloured Text Effect

  Рет қаралды 7,897

Carl Johnson

Carl Johnson

Күн бұрын

Пікірлер: 51
@evanhamlyn9148
@evanhamlyn9148 2 жыл бұрын
thank you Carl, once again you have helped me. Take care
@VladimirCherepanoff
@VladimirCherepanoff 2 жыл бұрын
Cheers Carl! you always gots the goods!
@edtechocean6750
@edtechocean6750 4 жыл бұрын
Thank You, so happy to find your channel!!
@adriemanquero
@adriemanquero 4 жыл бұрын
This looks so fun. Thank you for making this!
@Carl_Johnson
@Carl_Johnson 4 жыл бұрын
No problem Adriana 😀
@jaisandhu26
@jaisandhu26 4 жыл бұрын
Great way to add make static websites bit more interesting
@greggolko6543
@greggolko6543 2 жыл бұрын
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_Johnson
@Carl_Johnson 4 жыл бұрын
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_
@vicenteisaias_ 3 жыл бұрын
thanks
@tim.van.emmerloot
@tim.van.emmerloot 4 жыл бұрын
Another great one!! Thanks!!
@Carl_Johnson
@Carl_Johnson 4 жыл бұрын
Thanks Tim!
@wendyhoile7659
@wendyhoile7659 4 жыл бұрын
Thank you Carl. That is such a nice idea.
@RichardDunbavand
@RichardDunbavand 3 жыл бұрын
This is brilliant!
@chukleberryfinn
@chukleberryfinn 3 жыл бұрын
hey, I cant find the code in your comments or on your website? Thanks!
@LEYRTP
@LEYRTP 3 жыл бұрын
Perfect!!! 🔥🔥🔥🔥
@LEYRTP
@LEYRTP 3 жыл бұрын
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?
@nirshemesh2151
@nirshemesh2151 3 жыл бұрын
This is epic, thank you. Is it possible to use a background image of say gold foil, instead of a color?
@mikaylaherrick8237
@mikaylaherrick8237 2 жыл бұрын
Is there a way to have the entire text change color instead of each individual letter?
@arialfx
@arialfx 4 жыл бұрын
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_Johnson
@Carl_Johnson 4 жыл бұрын
Thanks arialfx! I'm not sure about that one. Would Adobe Dynamic Link do the trick??
@arialfx
@arialfx 4 жыл бұрын
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
@Carl_Johnson 4 жыл бұрын
@@arialfx No problem. Are you getting a Syntax error in the CSS editor?
@arialfx
@arialfx 4 жыл бұрын
Nope there aren't any syntax errors.
@FreakinRedVines
@FreakinRedVines 3 жыл бұрын
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?
@FaridR
@FaridR 3 жыл бұрын
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.
@hectornunez5068
@hectornunez5068 4 жыл бұрын
Thank you for such an amazing tutorial, can you make one about animated rotating text? Thanks!
@Carl_Johnson
@Carl_Johnson 4 жыл бұрын
No problem Hector. I have a animated typing text video kzbin.info/www/bejne/i4DNdqVsaJaGbas
@hectornunez5068
@hectornunez5068 4 жыл бұрын
@@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!
@stuartlee99
@stuartlee99 4 жыл бұрын
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_Johnson
@Carl_Johnson 4 жыл бұрын
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
@stuartlee99
@stuartlee99 4 жыл бұрын
@@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!
@kondjanegongo796
@kondjanegongo796 4 жыл бұрын
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_Johnson
@Carl_Johnson 4 жыл бұрын
Hi Kondja, I've had a few people ask about that. It is on my list of requests 😀
@kondjanegongo796
@kondjanegongo796 4 жыл бұрын
@@Carl_Johnson Great, really appreciate that. is there a place where one can donate (bribe, and have it appear top of that list lol)
@georgegogarten3593
@georgegogarten3593 4 жыл бұрын
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?
@georgegogarten3593
@georgegogarten3593 4 жыл бұрын
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?
@georgegogarten3593
@georgegogarten3593 4 жыл бұрын
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.
@georgegogarten3593
@georgegogarten3593 4 жыл бұрын
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.
@christinaackerman2237
@christinaackerman2237 4 жыл бұрын
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_Johnson
@Carl_Johnson 4 жыл бұрын
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.
@tanyalize
@tanyalize 3 жыл бұрын
Is it possible to automatically activate the effect when loading the page without having to hover the text with the mouse?
@edwindavis6823
@edwindavis6823 4 жыл бұрын
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
@onlysalsal Жыл бұрын
can you do this to a link that is also an H2 tag?
@Carl_Johnson
@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.
@maddierourke1079
@maddierourke1079 4 жыл бұрын
Can this be added to a header? if so how?
@caleblam8470
@caleblam8470 4 жыл бұрын
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-uy7ym
@mariam-uy7ym 4 жыл бұрын
Will this work with 7.1 square space version?? I tried this, but couldn’t make the colors change.
@Carl_Johnson
@Carl_Johnson 4 жыл бұрын
Hi Mario, yes it works in 7.1. This video is on a 7.1 template.
@rolandvandenhout
@rolandvandenhout 4 жыл бұрын
Nicely down Carl.... See you have someone fans leaving comments? :o)
@Carl_Johnson
@Carl_Johnson 4 жыл бұрын
😂 Thanks Roland! Yes, the fans channels have been removed by YT now!
@user-dk6dh5ou4v
@user-dk6dh5ou4v 2 жыл бұрын
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?
Reveal Text on Hover in Squarespace // Squarespace Tutorial - Fluid Engine Hover Effects
8:43
InsideTheSquare with Becca Harpain
Рет қаралды 52 М.
99.9% IMPOSSIBLE
00:24
STORROR
Рет қаралды 31 МЛН
Don’t Choose The Wrong Box 😱
00:41
Topper Guild
Рет қаралды 62 МЛН
Getting Started With Lottie Animations in Squarespace
4:28
Carl Johnson
Рет қаралды 19 М.
Adding Parallax Effect to Background Image in Squarespace 7.1
6:23
How is this Website so fast!?
13:39
Wes Bos
Рет қаралды 1,3 МЛН
How to Make an Animated Logo on Hover Squarespace
7:30
Carl Johnson
Рет қаралды 11 М.
Award Winning Animation With Only 20 Lines Of CSS?
6:59
Hyperplexed
Рет қаралды 1,9 МЛН
Change Image on Hover in Squarespace
4:23
Rebecca Grace Designs - Squarespace Coding Expert
Рет қаралды 11 М.
I paid 5 designers on Fiverr to create a cover for the same book
19:32
Mel Torrefranca
Рет қаралды 861 М.
I Remade Star Wars VFX in 1 Week
10:39
ErikDoesVFX
Рет қаралды 2,9 МЛН
Squarespace Image Text Overlay on Hover
6:51
Carl Johnson
Рет қаралды 49 М.
How to Play a Lottie Animation on Scroll in Squarespace
5:18
Carl Johnson
Рет қаралды 12 М.