FTWSGEM Posted April 14, 2023 Share Posted April 14, 2023 (edited) Hey! I found a code I'd like to use to have a piece of animated text on one of my pages. Changing the position from absolute to relative aligns the text center but the text now displays one below the other (rather then appearing directly under the stationary text) Also, it seems to cut the top of the text off too. URL if needed: https://ftws-progress.squarespace.com/config/design Password: happy123 I have copied the code used below: In code block on the page: <CENTER><h2>ARE YOU READY TO <div class="fadeIn"> <span>BREAK THE MOULD?</span> <span>ELEVATE YOUR BRAND?</span> <span>SOAR WITH CONFIDENCE?</span> <span>GET STARTED?</span> </div> </h2></center> In Design > CSS: /*FadeIn*/ .fadeIn{ display: grid; text-indent: 0px; } .fadeIn span{ animation: fadeEffect 10.5s linear infinite 0s; -ms-animation: fadeEffect 10.5s linear infinite 0s; -webkit-animation: fadeEffect 10.5s linear infinite 0s; color: #F9F3F3; opacity: 0; overflow: hidden; position: absolute; } .fadeIn span:nth-child(2){ color: #F9F3F3; animation-delay: 2.5s; -ms-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; } .fadeIn span:nth-child(3){ color: #F9F3F3; animation-delay: 5s; -ms-animation-delay: 5s; -webkit-animation-delay: 5s; } .fadeIn span:nth-child(4){ color: #F9F3F3; animation-delay: 7.5s; -ms-animation-delay: 7.5s; -webkit-animation-delay: 7.5s; } /*FadeIn Animation*/ @-moz-keyframes fadeEffect{ 0% { opacity: 0; } 5% { opacity: 0; -moz-transform: translateY(0px); } 10% { opacity: 1; -moz-transform: translateY(0px); } 25% { opacity: 1; -moz-transform: translateY(0px); } 30% { opacity: 0; -moz-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes fadeEffect{ 0% { opacity: 0; } 5% { opacity: 0; -webkit-transform: translateY(0px); } 10% { opacity: 1; -webkit-transform: translateY(0px); } 25% { opacity: 1; -webkit-transform: translateY(0px); } 30% { opacity: 0; -webkit-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes fadeEffect{ 0% { opacity: 0; } 5% { opacity: 0; -ms-transform: translateY(0px); } 10% { opacity: 1; -ms-transform: translateY(0px); } 25% { opacity: 1; -ms-transform: translateY(0px); } 30% { opacity: 0; -ms-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } Thanks in advance Edited April 14, 2023 by FTWSGEM Link to comment
tuanphan Posted April 16, 2023 Share Posted April 16, 2023 https://ftws-progress.squarespace.com/?noredirect Can you take a screenshot of problem? 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!) Link to comment
FTWSGEM Posted April 16, 2023 Author Share Posted April 16, 2023 @tuanphan Please find attached. There are 4 lines of text that appear one after the other but rather then appearing in place of each other, they appear leaving a gap and the top of the text is cut off. Link to comment
Solution Vicks Posted April 16, 2023 Solution Share Posted April 16, 2023 (edited) it looks like your span has position relative and not absolute as in the code above.. I have updated the code: made the grid container relative, so that all child follow absolute position from this grid. made the spans absolute. added line-height so not crop the texts. aligned the items to center, because they all will stick to left once positioned absolute. .fadeIn{ display: grid; text-indent: 0px; position:relative; justify-items: center; // align items to center line-height: 1.2em; // added bigger line height so that element doesnt cut off from top } .fadeIn span{ position: absolute; } if the posittion absolute in .fadeIn span doesnt work, try " absolute !important; " hope this helps Edited April 16, 2023 by Vicks Link to comment
FTWSGEM Posted April 16, 2023 Author Share Posted April 16, 2023 6 hours ago, Vicks said: it looks like your span has position relative and not absolute as in the code above.. I have updated the code: made the grid container relative, so that all child follow absolute position from this grid. made the spans absolute. added line-height so not crop the texts. aligned the items to center, because they all will stick to left once positioned absolute. .fadeIn{ display: grid; text-indent: 0px; position:relative; justify-items: center; // align items to center line-height: 1.2em; // added bigger line height so that element doesnt cut off from top } .fadeIn span{ position: absolute; } if the posittion absolute in .fadeIn span doesnt work, try " absolute !important; " hope this helps You are an absolute diamond, thank you so much! Link to comment
FTWSGEM Posted April 16, 2023 Author Share Posted April 16, 2023 Don't suppose you can help with a media query to get it to show properly on mobile? When I add one it doesn't seem to make any difference. Thanks Link to comment
Vicks Posted April 17, 2023 Share Posted April 17, 2023 5 hours ago, FTWSGEM said: Don't suppose you can help with a media query to get it to show properly on mobile? When I add one it doesn't seem to make any difference. Thanks I see its the middle text which is spans across three lines and overlaps the paragraph below a little. is it what you want to fix? Perhaps you want to reduce the font size a bit? Or add height to the fadeIn section so it stays constant and keep some separation with paragraph below. something like this: @media screen and (max-width: 767px) { .fadeIn { min-height: 70px; } } That should work, though I would design it in a different way so that it doesn't float on top of other elements. Link to comment
FTWSGEM Posted April 17, 2023 Author Share Posted April 17, 2023 Yes, that is what is causing problems on mobile. Is there a way to only reduce the font size of the fade in on mobile only? I like the way is displays on desktop. 8 hours ago, Vicks said: I see its the middle text which is spans across three lines and overlaps the paragraph below a little. is it what you want to fix? Perhaps you want to reduce the font size a bit? Or add height to the fadeIn section so it stays constant and keep some separation with paragraph below. something like this: @media screen and (max-width: 767px) { .fadeIn { min-height: 70px; } } That should work, though I would design it in a different way so that it doesn't float on top of other elements. Link to comment
Vicks Posted April 17, 2023 Share Posted April 17, 2023 5 hours ago, FTWSGEM said: Yes, that is what is causing problems on mobile. Is there a way to only reduce the font size of the fade in on mobile only? I like the way is displays on desktop. Its the same code, just use font-size property to update the font size, you can stack multiple media queries starting from bigger to smaller like this: @media screen and (min-width: 1200px) { .fadeIn { font-size: 0.9rem; } } @media screen and (min-width: 768px) { .fadeIn { font-size: 0.7rem; } } @media screen and (min-width: 480px) { .fadeIn { font-size: 0.5rem; min-height: 10px; // If on smaller screen, the height is too much, you can reduce it too. } } Just play around with different screen sizes and add breakpoints and adjust your sizes and margins wherever the layout is breaking. applying style to .fadeIn will only change the size of fading text, not the "ARE YOU READY TO" part of it. If you want to change the whole text size, you need to apply another class to your h2 element and use that class to adjust the font size. tuanphan 1 Link to comment
mbockmaster Posted February 1 Share Posted February 1 On 4/16/2023 at 9:56 AM, Vicks said: it looks like your span has position relative and not absolute as in the code above.. I have updated the code: made the grid container relative, so that all child follow absolute position from this grid. made the spans absolute. added line-height so not crop the texts. aligned the items to center, because they all will stick to left once positioned absolute. .fadeIn{ display: grid; text-indent: 0px; position:relative; justify-items: center; // align items to center line-height: 1.2em; // added bigger line height so that element doesnt cut off from top } .fadeIn span{ position: absolute; } if the posittion absolute in .fadeIn span doesnt work, try " absolute !important; " hope this helps Hi @Vicks & @FTWSGEM! This is exactly what I've been trying to create, thank you so much for sharing your knowledge! I've got this partially working, but am having some difficulties with the text cutting off. I see that I can keep increasing the line height to help, but it forces my text down. It seems that my container is collapsing, is there a better way to resolve? https://toucan-vuvuzela-r235.squarespace.com/about pw: illume Link to comment
mbockmaster Posted February 13 Share Posted February 13 Bump, wondering if @tuanphan, @Ziggy or @creedon might have insight? Link to comment
tuanphan Posted February 15 Share Posted February 15 Use this code to Website Tools > Custom CSS h3.preFade.fadeIn { position: relative !important; top: -20px; } 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!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment