CFlo1 Posted March 17, 2023 Share Posted March 17, 2023 (edited) Hello! I've added in a code block and custom css for the typewriter effect on a 2 line statement. However i'm running into the issue where the second line stays visible in the beginning, the text types out for line 1 and then it will type it out for line 2. I'd like line 2 to remain hidden and actually flow like it is being typed out after line 1 has been typed. PW is Nolan. Here is the CSS code I used: .typewriter p { white-space: nowrap; overflow: hidden; } .typewriter p:nth-child(1) { /*If you are having problems with text clipping change the width from 16em to a higher value*/ width: 23em; -webkit-animation: type 5s steps(40, end); animation: type 5s steps(40, end); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .typewriter p:nth-child(2) { /*If you are having problems with text clipping change the width from 13.5em to a higher value*/ width: 23em; opacity: 0; -webkit-animation: type2 5s steps(40, end); animation: type2 5s steps(40, end); -webkit-animation-delay: 3s; animation-delay: 5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @keyframes type { 0% { width: 0; } 100% { border: none; } } @-webkit-keyframes type { 0% { width: 0; } 100% { border: none; } } @keyframes type2 { 0% { width: 0; } 1% { opacity: 0; } 100% { opacity: 0; border: none; } } @-webkit-keyframes type2 { 0% { width: 0; } 1% { opacity: 0; } 100% { opacity: 0; border: none; } } .typewriter {color:#2b2b2b; font-size: 18px; line-height: 18px; padding-top: 20px } Edited March 18, 2023 by CFlo1 Link to comment
tuanphan Posted March 19, 2023 Share Posted March 19, 2023 Hi, What is site url? 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
CFlo1 Posted March 20, 2023 Author Share Posted March 20, 2023 Hi Tuan! I tried a different code which is working better, but i'm struggling with cursors now. The cursor for the first line is staying visible after it finishes typing. URL: https://springtail-okra-de6s.squarespace.com/ PW: nolan Sorry I thought it added the url, apparently didn't! Link to comment
tuanphan Posted March 25, 2023 Share Posted March 25, 2023 On 3/20/2023 at 10:15 PM, CFlo1 said: Hi Tuan! I tried a different code which is working better, but i'm struggling with cursors now. The cursor for the first line is staying visible after it finishes typing. URL: https://springtail-okra-de6s.squarespace.com/ PW: nolan Sorry I thought it added the url, apparently didn't! You mean this cursor? 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
CFlo1 Posted March 25, 2023 Author Share Posted March 25, 2023 No the top cursor at the end of the word 'party' Link to comment
tuanphan Posted March 29, 2023 Share Posted March 29, 2023 On 3/18/2023 at 1:23 AM, CFlo1 said: Hello! I've added in a code block and custom css for the typewriter effect on a 2 line statement. However i'm running into the issue where the second line stays visible in the beginning, the text types out for line 1 and then it will type it out for line 2. I'd like line 2 to remain hidden and actually flow like it is being typed out after line 1 has been typed. PW is Nolan. Here is the CSS code I used: .typewriter p { white-space: nowrap; overflow: hidden; } .typewriter p:nth-child(1) { /*If you are having problems with text clipping change the width from 16em to a higher value*/ width: 23em; -webkit-animation: type 5s steps(40, end); animation: type 5s steps(40, end); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .typewriter p:nth-child(2) { /*If you are having problems with text clipping change the width from 13.5em to a higher value*/ width: 23em; opacity: 0; -webkit-animation: type2 5s steps(40, end); animation: type2 5s steps(40, end); -webkit-animation-delay: 3s; animation-delay: 5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @keyframes type { 0% { width: 0; } 100% { border: none; } } @-webkit-keyframes type { 0% { width: 0; } 100% { border: none; } } @keyframes type2 { 0% { width: 0; } 1% { opacity: 0; } 100% { opacity: 0; border: none; } } @-webkit-keyframes type2 { 0% { width: 0; } 1% { opacity: 0; } 100% { opacity: 0; border: none; } } .typewriter {color:#2b2b2b; font-size: 18px; line-height: 18px; padding-top: 20px } This is all code? Do you use any custom <script> code? 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