▶️ If you want to combine this with IMAGES as well, you can follow the steps outlined in this video: th-cam.com/video/GvtwcylLw2M/w-d-xo.html HTML and JavaScript 👇
Make sure you subscribe ✦ document.querySelectorAll('.outer').forEach(el => { let content = el.querySelector('.content'); repeatContent(content, el.offsetWidth); let slider = el.querySelector('.loop'); slider.innerHTML = slider.innerHTML + slider.innerHTML; }); function repeatContent(el, till) { let html = el.innerHTML; let counter = 0; // prevents infinite loop while (el.offsetWidth < till && counter < 100) { el.innerHTML += html; counter += 1; } } CSS 👇 /* Using em for your padding-left is going to ensure the padding scales in proportion to the font-size. */ .content { font-family: "Inter", sans-serif; font-size: 2.5rem; font-weight: 700; color: #111111; padding-left: 0.25em; } @media only screen and (max-width: 767px) { .content { font-size: 2rem !important; padding-left: 0.25em; } } .outer { overflow: hidden; !important; } .outer div { display: inline-block; } .loop { white-space: nowrap; animation: loop-anim 15s linear infinite; } @media only screen and (max-width: 767px) { .loop { animation: loop-anim 3.5s linear infinite; } } @keyframes loop-anim { 0% { margin-left: 0; } 100% { margin-left: -50% /* This works because of the div between "outer" and "loop" */ } } -------------------------------------- Adjustments and additional code 👇 /* An example of a media query for devices between 767 and 1024 pixels (tablets). Change out the pixel values to control the breakpoints. Target the correct class and make your changes. */ @media only screen and (min-width: 767px) and (max-width: 1024px) { .content { font-size: 2.25rem !important; padding-left: 0.25em; } } /* What your ''loop'' class should look like if you decide to reverse the direction. */ .loop { white-space: nowrap; animation: loop-anim 15s linear infinite; animation-direction: reverse; } @media only screen and (max-width: 767px) { .loop { animation: loop-anim 3.5s linear infinite; animation-direction: reverse; } } /* How to rotate the sliding text. Just add the transform property to your ''outer'' class and change the degrees to whatever you need. When rotated, the text doesn't go perfectly from the left edge of the screen to the right edge of the screen, but if you're just using text without a background, it's pretty much unnoticeable. If you want to fix it, however, the process is the same as for the banner. Add in width, a negative margin and hide the overflow - an example is available a little further down and the process is explained in the video. */ .outer { overflow: hidden; !important; transform: rotate(-3deg); } /* An example of two ''outer'' classes, styled to look like banners. The margin-top, the z-index and the position: relative are there to make them overlap. Don't forget to fix the overflow if you use this. */ .outer-top { overflow: hidden; !important; background-color: #111111; padding: 1% 0; transform: rotate(-3deg); width: 110%; margin-left: -5%; z-index: 2; position: relative; } .outer-bottom { overflow: hidden; !important; background-color: #635bff; padding: 1% 0; transform: rotate(3deg); width: 110%; margin-left: -5%; z-index: 1; margin-top: -3%; position: relative; border: solid 4px #111111; } /* How to hide the horizontal overflow for a specific container. */ .container { overflow-x: hidden; } /* How to hide the horizontal overflow for the entire website (add this under your admin bar - ''Customize'' - ''Additional CSS''. */ body { overflow-x: hidden; } /* Non-breaking space. Copy and paste this as many times as needed whenever you want to use multiple spaces. */
/* Don't forget to like the video and subscribe to the channel! ;) */
Awesome, I'm happy to hear that! For such a simple effect, it really can be quite difficult to get right. Thank you very much for your support, I appreciate it! 🙏
Awesome! I know just what you mean, because this was inspired by my own search for a simpler, better solution for sliding text. Thank you for your continued support! 🙌
Thank you very much, I appreciate it! And thank you for your suggestion as well, I can't promise anything but I can say I've been seriously considering creating some more JavaScript tutorials 😉 If there's anything specific you had in mind, I would love to see it!
Is it crazy fast just in the preview, in Elementor, or on the actual live website? I'm asking because the preview can act a bit odd and it isn't always entirely reliable as a true indicator of what the effect looks like on the actual website. If you're having issues on the actual live website, simply adjust the speed of the animation in the media query. You'll find it in this part of the CSS: @media only screen and (max-width: 767px) { .loop { animation: loop-anim 3.5s linear infinite; } } All you need to do is change the time from 3.5s to whatever you want. The animation speed should adjust accordingly. Let me know how it goes! 💪
Hello! Nice tutorial! But how can i make this sliding effect start only if the text is larger than the container? If the text reach the width of container, then start scrolling.
This is absolutely fantastic! Exactly what I was looking for. When I'm building this, my text doesn't repeat (and it resets to the original position before the full text has appeared). What am I missing?
What if I'd like to include multiple words like this: Word 1 (icon) Word 2 (icon) Word 3 (icon)... how would I change the code ?.... meaning I want to include an actual icon I made for my site, not a glyph that you can type
Thank you! I,ve tryied other tutorials and none works propperly. I have a couple of questions: (1) Is it possible to change the color of the star icon? (2) How could we change the icon for another icon or image we would like to use (like the logo of the brand)? Hope you can answer this. ♥😄
Thank you for this nice tutorial 👌 ! I tried to adapt it for vertically sliding text, without success: the text is not repeated, and... suddenly disappears. Do you have any suggestion for me ? Thanks !
That's a great idea, I can't make any promises but I've been planning on making a new beginner tutorial for a full website build ever since the new containers came out. Hopefully, I'll be able to get to it in the near future. Thank you for your comment!
Hello! Of course. You can also find it in the pinned 📌 comment. Here it is: HTML and JavaScript 👇
Make sure you subscribe ✦ document.querySelectorAll('.outer').forEach(el => { let content = el.querySelector('.content'); repeatContent(content, el.offsetWidth); let slider = el.querySelector('.loop'); slider.innerHTML = slider.innerHTML + slider.innerHTML; }); function repeatContent(el, till) { let html = el.innerHTML; let counter = 0; // prevents infinite loop while (el.offsetWidth < till && counter < 100) { el.innerHTML += html; counter += 1; } } CSS 👇 /* Using em for your font-size is going to ensure the padding scales in proportion to the font-size. */ .content { font-family: "Inter", sans-serif; font-size: 2.5rem; font-weight: 700; color: #111111; padding-left: 0.25em; } @media only screen and (max-width: 767px) { .content { font-size: 2rem !important; padding-left: 0.25em; } } .outer { overflow: hidden; !important; } .outer div { display: inline-block; } .loop { white-space: nowrap; animation: loop-anim 15s linear infinite; } @media only screen and (max-width: 767px) { .loop { animation: loop-anim 3.5s linear infinite; } } @keyframes loop-anim { 0% { margin-left: 0; } 100% { margin-left: -50% /* This works because of the div between "outer" and "loop" */ } } -------------------------------------- Adjustments and additional code 👇 /* An example of a media query for devices between 767 and 1024 pixels (tablets). Change out the pixel values to control the breakpoints. Target the correct class and make your changes. */ @media only screen and (min-width: 767px) and (max-width: 1024px) { .content { font-size: 2.25rem !important; padding-left: 0.25em; } } /* What your ''loop'' class should look like if you decide to reverse the direction. */ .loop { white-space: nowrap; animation: loop-anim 15s linear infinite; animation-direction: reverse; } @media only screen and (max-width: 767px) { .loop { animation: loop-anim 3.5s linear infinite; animation-direction: reverse; } } /* How to rotate the sliding text. Just add the transform property to your ''outer'' class and change the degrees to whatever you need. When rotated, the text doesn't go perfectly from the left edge of the screen to the right edge of the screen, but if you're just using text without a background, it's pretty much unnoticeable. If you want to fix it, however, the process is the same as for the banner. Add in width, a negative margin and hide the overflow - an example is available a little further down and the process is explained in the video. */ .outer { overflow: hidden; !important; transform: rotate(-3deg); } /* An example of two ''outer'' classes, styled to look like banners. The margin-top, the z-index and the position: relative are there to make them overlap. Don't forget to fix the overflow if you use this. */ .outer-top { overflow: hidden; !important; background-color: #111111; padding: 1% 0; transform: rotate(-3deg); width: 110%; margin-left: -5%; z-index: 2; position: relative; } .outer-bottom { overflow: hidden; !important; background-color: #635bff; padding: 1% 0; transform: rotate(3deg); width: 110%; margin-left: -5%; z-index: 1; margin-top: -3%; position: relative; border: solid 4px #111111; } /* How to hide the horizontal overflow for a specific container. */ .container { overflow-x: hidden; } /* How to hide the horizontal overflow for the entire website (add this under your admin bar - ''Customize'' - ''Additional CSS''. */ body { overflow-x: hidden; } /* Non-breaking space. Copy and paste this as many times as needed whenever you want to use multiple spaces. */
/* Don't forget to like the video and subscribe to the channel! ;) */
@@Reialesa i tried adding the css code to woocommerce additional CSS. and it does not work for me. no idea what i am doing wrong. just trying to get running text in my store notice!! please help!
Thank you! Did you try reloading the page and clearing out the cache? Those are the first things I recommend you try. If all else fails, try double checking that the code was copied correctly and that the classes fit.
Hello, great video! However, I have an issue because I have a custom font (Confine) installed, and it's not being recognized in the HTML, so it's not applied. Is there a solution?
Hello, question concerning reversing the animation with animation-direction: reverse; when I do this when I reload the page the text right end starts from the middle of the page, while if I do not use animation-direction: reverse; it starts full width. Could not find what is the problem, help? :D
TH-cam sometimes doesn't display the pinned comments correctly, I'm not sure why. Here's the code: HTML and JavaScript 👇
Make sure you subscribe ✦ document.querySelectorAll('.outer').forEach(el => { let content = el.querySelector('.content'); repeatContent(content, el.offsetWidth); let slider = el.querySelector('.loop'); slider.innerHTML = slider.innerHTML + slider.innerHTML; }); function repeatContent(el, till) { let html = el.innerHTML; let counter = 0; // prevents infinite loop while (el.offsetWidth < till && counter < 100) { el.innerHTML += html; counter += 1; } } CSS 👇 /* Using em for your padding-left is going to ensure the padding scales in proportion to the font-size. */ .content { font-family: "Inter", sans-serif; font-size: 2.5rem; font-weight: 700; color: #111111; padding-left: 0.25em; } @media only screen and (max-width: 767px) { .content { font-size: 2rem !important; padding-left: 0.25em; } } .outer { overflow: hidden; !important; } .outer div { display: inline-block; } .loop { white-space: nowrap; animation: loop-anim 15s linear infinite; } @media only screen and (max-width: 767px) { .loop { animation: loop-anim 3.5s linear infinite; } } @keyframes loop-anim { 0% { margin-left: 0; } 100% { margin-left: -50% /* This works because of the div between "outer" and "loop" */ } } -------------------------------------- Adjustments and additional code 👇 /* An example of a media query for devices between 767 and 1024 pixels (tablets). Change out the pixel values to control the breakpoints. Target the correct class and make your changes. */ @media only screen and (min-width: 767px) and (max-width: 1024px) { .content { font-size: 2.25rem !important; padding-left: 0.25em; } } /* What your ''loop'' class should look like if you decide to reverse the direction. */ .loop { white-space: nowrap; animation: loop-anim 15s linear infinite; animation-direction: reverse; } @media only screen and (max-width: 767px) { .loop { animation: loop-anim 3.5s linear infinite; animation-direction: reverse; } } /* How to rotate the sliding text. Just add the transform property to your ''outer'' class and change the degrees to whatever you need. When rotated, the text doesn't go perfectly from the left edge of the screen to the right edge of the screen, but if you're just using text without a background, it's pretty much unnoticeable. If you want to fix it, however, the process is the same as for the banner. Add in width, a negative margin and hide the overflow - an example is available a little further down and the process is explained in the video. */ .outer { overflow: hidden; !important; transform: rotate(-3deg); } /* An example of two ''outer'' classes, styled to look like banners. The margin-top, the z-index and the position: relative are there to make them overlap. Don't forget to fix the overflow if you use this. */ .outer-top { overflow: hidden; !important; background-color: #111111; padding: 1% 0; transform: rotate(-3deg); width: 110%; margin-left: -5%; z-index: 2; position: relative; } .outer-bottom { overflow: hidden; !important; background-color: #635bff; padding: 1% 0; transform: rotate(3deg); width: 110%; margin-left: -5%; z-index: 1; margin-top: -3%; position: relative; border: solid 4px #111111; } /* How to hide the horizontal overflow for a specific container. */ .container { overflow-x: hidden; } /* How to hide the horizontal overflow for the entire website (add this under your admin bar - ''Customize'' - ''Additional CSS''. */ body { overflow-x: hidden; } /* Non-breaking space. Copy and paste this as many times as needed whenever you want to use multiple spaces. */
/* Don't forget to like the video and subscribe to the channel! ;) */
That's very likely a padding or margin issue. Check if your container has any padding applied to it. It should be set to zero for the sliding text to be full screen. 😁
You're not! I place things in a pinned comment but TH-cam sometimes doesn't display that pinned comment correctly. So it's very easy to get lost in the comments. Here's the code from the video: HTML and JavaScript 👇
Make sure you subscribe ✦ document.querySelectorAll('.outer').forEach(el => { let content = el.querySelector('.content'); repeatContent(content, el.offsetWidth); let slider = el.querySelector('.loop'); slider.innerHTML = slider.innerHTML + slider.innerHTML; }); function repeatContent(el, till) { let html = el.innerHTML; let counter = 0; // prevents infinite loop while (el.offsetWidth < till && counter < 100) { el.innerHTML += html; counter += 1; } } CSS 👇 /* Using em for your padding-left is going to ensure the padding scales in proportion to the font-size. */ .content { font-family: "Inter", sans-serif; font-size: 2.5rem; font-weight: 700; color: #111111; padding-left: 0.25em; } @media only screen and (max-width: 767px) { .content { font-size: 2rem !important; padding-left: 0.25em; } } .outer { overflow: hidden; !important; } .outer div { display: inline-block; } .loop { white-space: nowrap; animation: loop-anim 15s linear infinite; } @media only screen and (max-width: 767px) { .loop { animation: loop-anim 3.5s linear infinite; } } @keyframes loop-anim { 0% { margin-left: 0; } 100% { margin-left: -50% /* This works because of the div between "outer" and "loop" */ } } -------------------------------------- Adjustments and additional code 👇 /* An example of a media query for devices between 767 and 1024 pixels (tablets). Change out the pixel values to control the breakpoints. Target the correct class and make your changes. */ @media only screen and (min-width: 767px) and (max-width: 1024px) { .content { font-size: 2.25rem !important; padding-left: 0.25em; } } /* What your ''loop'' class should look like if you decide to reverse the direction. */ .loop { white-space: nowrap; animation: loop-anim 15s linear infinite; animation-direction: reverse; } @media only screen and (max-width: 767px) { .loop { animation: loop-anim 3.5s linear infinite; animation-direction: reverse; } } /* How to rotate the sliding text. Just add the transform property to your ''outer'' class and change the degrees to whatever you need. When rotated, the text doesn't go perfectly from the left edge of the screen to the right edge of the screen, but if you're just using text without a background, it's pretty much unnoticeable. If you want to fix it, however, the process is the same as for the banner. Add in width, a negative margin and hide the overflow - an example is available a little further down and the process is explained in the video. */ .outer { overflow: hidden; !important; transform: rotate(-3deg); } /* An example of two ''outer'' classes, styled to look like banners. The margin-top, the z-index and the position: relative are there to make them overlap. Don't forget to fix the overflow if you use this. */ .outer-top { overflow: hidden; !important; background-color: #111111; padding: 1% 0; transform: rotate(-3deg); width: 110%; margin-left: -5%; z-index: 2; position: relative; } .outer-bottom { overflow: hidden; !important; background-color: #635bff; padding: 1% 0; transform: rotate(3deg); width: 110%; margin-left: -5%; z-index: 1; margin-top: -3%; position: relative; border: solid 4px #111111; } /* How to hide the horizontal overflow for a specific container. */ .container { overflow-x: hidden; } /* How to hide the horizontal overflow for the entire website (add this under your admin bar - ''Customize'' - ''Additional CSS''. */ body { overflow-x: hidden; } /* Non-breaking space. Copy and paste this as many times as needed whenever you want to use multiple spaces. */
/* Don't forget to like the video and subscribe to the channel! ;) */
I'm happy to help! If it's crooked, it might be because you added in the part of the CSS that rotates the whole banner. If it's not that, try viewing it on the live page. Sometimes it looks wrong in the editor but it displays as it should on the actual live website. If that isn't it, the third thing you should try is clearing out every cache you have and regenerating CSS ('Elementor' - 'Tools' - 'Regenerate Files & Data'). And make sure your containers don't have any effects applied to them (under 'Advanced' - 'Transform'). That should pretty much cover every possible issue. 😁
@@Reialesa I ended up fixing it manually by "skewing" it in elementor until it was straight (for me -3 on both parameters). Probably not the coding-way of doing it, but it worked! Sharing here in case anyone else ends up with the same issue!
Interesting. Thank you for sharing! Since you mentioned that you fixed it by rotating it by 3 degrees, I think it might have to do something with the CSS you used. If you see this in your CSS, just go ahead and remove it: .outer { overflow: hidden; !important; transform: rotate(-3deg); } But, in the end, the most important thing is that it works the way you want it to! 💪
Good idea! I try to put it in the pinned comments so viewers don't have to go off of TH-cam to get the information they need. But I've been having issues with the pinned comments, so I'm considering making the codes available on my website. I appreciate your suggestion! In the meanwhile, if you still can't copy it, I put it in a Google Docs file: docs.google.com/document/d/1korwDFWMripIx09UJERzK3absibHbSgSSpI9ZLWGKbQ/edit?usp=sharing
Hey ! I want to add different icon between 2 texts how to add i want to add different icon between that text as you added that star.. i have star but different star.. how yo do that. I didn't find anything same like text which i can copy paste there as text .. i have vector.
Good question! The process of adding in an image is identical to the one outlined in this video: th-cam.com/video/GvtwcylLw2M/w-d-xo.html Add your image to the text by following the steps described in the video. Then, target it and adjust it with CSS (which you'll also find in the video). Very simple. Let me know how it goes! 💪
Amazing video!! I feel like a dummy. I’ve tried 10 plugins and nothing. I don’t use elementor because it slowed down my site. I can still use the css code and it will create m sliding text store notice? That’s what I am in search of!! Please help 🙏
Hello! It's available in the pinned comment. TH-cam doesn't always show that comment correctly, though. Here it is 👇 HTML and JavaScript 👇
Make sure you subscribe ✦ document.querySelectorAll('.outer').forEach(el => { let content = el.querySelector('.content'); repeatContent(content, el.offsetWidth); let slider = el.querySelector('.loop'); slider.innerHTML = slider.innerHTML + slider.innerHTML; }); function repeatContent(el, till) { let html = el.innerHTML; let counter = 0; // prevents infinite loop while (el.offsetWidth < till && counter < 100) { el.innerHTML += html; counter += 1; } } CSS 👇 /* Using em for your padding-left is going to ensure the padding scales in proportion to the font-size. */ .content { font-family: "Inter", sans-serif; font-size: 2.5rem; font-weight: 700; color: #111111; padding-left: 0.25em; } @media only screen and (max-width: 767px) { .content { font-size: 2rem !important; padding-left: 0.25em; } } .outer { overflow: hidden; !important; } .outer div { display: inline-block; } .loop { white-space: nowrap; animation: loop-anim 15s linear infinite; } @media only screen and (max-width: 767px) { .loop { animation: loop-anim 3.5s linear infinite; } } @keyframes loop-anim { 0% { margin-left: 0; } 100% { margin-left: -50% /* This works because of the div between "outer" and "loop" */ } } -------------------------------------- Adjustments and additional code 👇 /* An example of a media query for devices between 767 and 1024 pixels (tablets). Change out the pixel values to control the breakpoints. Target the correct class and make your changes. */ @media only screen and (min-width: 767px) and (max-width: 1024px) { .content { font-size: 2.25rem !important; padding-left: 0.25em; } } /* What your ''loop'' class should look like if you decide to reverse the direction. */ .loop { white-space: nowrap; animation: loop-anim 15s linear infinite; animation-direction: reverse; } @media only screen and (max-width: 767px) { .loop { animation: loop-anim 3.5s linear infinite; animation-direction: reverse; } } /* How to rotate the sliding text. Just add the transform property to your ''outer'' class and change the degrees to whatever you need. When rotated, the text doesn't go perfectly from the left edge of the screen to the right edge of the screen, but if you're just using text without a background, it's pretty much unnoticeable. If you want to fix it, however, the process is the same as for the banner. Add in width, a negative margin and hide the overflow - an example is available a little further down and the process is explained in the video. */ .outer { overflow: hidden; !important; transform: rotate(-3deg); } /* An example of two ''outer'' classes, styled to look like banners. The margin-top, the z-index and the position: relative are there to make them overlap. Don't forget to fix the overflow if you use this. */ .outer-top { overflow: hidden; !important; background-color: #111111; padding: 1% 0; transform: rotate(-3deg); width: 110%; margin-left: -5%; z-index: 2; position: relative; } .outer-bottom { overflow: hidden; !important; background-color: #635bff; padding: 1% 0; transform: rotate(3deg); width: 110%; margin-left: -5%; z-index: 1; margin-top: -3%; position: relative; border: solid 4px #111111; } /* How to hide the horizontal overflow for a specific container. */ .container { overflow-x: hidden; } /* How to hide the horizontal overflow for the entire website (add this under your admin bar - ''Customize'' - ''Additional CSS''. */ body { overflow-x: hidden; } /* Non-breaking space. Copy and paste this as many times as needed whenever you want to use multiple spaces. */
/* Don't forget to like the video and subscribe to the channel! ;) */
Of course, here it is (you can also find it in the pinned comment): HTML and JavaScript 👇
Make sure you subscribe ✦ document.querySelectorAll('.outer').forEach(el => { let content = el.querySelector('.content'); repeatContent(content, el.offsetWidth); let slider = el.querySelector('.loop'); slider.innerHTML = slider.innerHTML + slider.innerHTML; }); function repeatContent(el, till) { let html = el.innerHTML; let counter = 0; // prevents infinite loop while (el.offsetWidth < till && counter < 100) { el.innerHTML += html; counter += 1; } } CSS 👇 /* Using em for your padding-left is going to ensure the padding scales in proportion to the font-size. */ .content { font-family: "Inter", sans-serif; font-size: 2.5rem; font-weight: 700; color: #111111; padding-left: 0.25em; } @media only screen and (max-width: 767px) { .content { font-size: 2rem !important; padding-left: 0.25em; } } .outer { overflow: hidden; !important; } .outer div { display: inline-block; } .loop { white-space: nowrap; animation: loop-anim 15s linear infinite; } @media only screen and (max-width: 767px) { .loop { animation: loop-anim 3.5s linear infinite; } } @keyframes loop-anim { 0% { margin-left: 0; } 100% { margin-left: -50% /* This works because of the div between "outer" and "loop" */ } } -------------------------------------- Adjustments and additional code 👇 /* An example of a media query for devices between 767 and 1024 pixels (tablets). Change out the pixel values to control the breakpoints. Target the correct class and make your changes. */ @media only screen and (min-width: 767px) and (max-width: 1024px) { .content { font-size: 2.25rem !important; padding-left: 0.25em; } } /* What your ''loop'' class should look like if you decide to reverse the direction. */ .loop { white-space: nowrap; animation: loop-anim 15s linear infinite; animation-direction: reverse; } @media only screen and (max-width: 767px) { .loop { animation: loop-anim 3.5s linear infinite; animation-direction: reverse; } } /* How to rotate the sliding text. Just add the transform property to your ''outer'' class and change the degrees to whatever you need. When rotated, the text doesn't go perfectly from the left edge of the screen to the right edge of the screen, but if you're just using text without a background, it's pretty much unnoticeable. If you want to fix it, however, the process is the same as for the banner. Add in width, a negative margin and hide the overflow - an example is available a little further down and the process is explained in the video. */ .outer { overflow: hidden; !important; transform: rotate(-3deg); } /* An example of two ''outer'' classes, styled to look like banners. The margin-top, the z-index and the position: relative are there to make them overlap. Don't forget to fix the overflow if you use this. */ .outer-top { overflow: hidden; !important; background-color: #111111; padding: 1% 0; transform: rotate(-3deg); width: 110%; margin-left: -5%; z-index: 2; position: relative; } .outer-bottom { overflow: hidden; !important; background-color: #635bff; padding: 1% 0; transform: rotate(3deg); width: 110%; margin-left: -5%; z-index: 1; margin-top: -3%; position: relative; border: solid 4px #111111; } /* How to hide the horizontal overflow for a specific container. */ .container { overflow-x: hidden; } /* How to hide the horizontal overflow for the entire website (add this under your admin bar - ''Customize'' - ''Additional CSS''. */ body { overflow-x: hidden; } /* Non-breaking space. Copy and paste this as many times as needed whenever you want to use multiple spaces. */
/* Don't forget to like the video and subscribe to the channel! ;) */
I have said Hi, but you didn't talk back. Though I felt like you are someone who ignores your fans, It didn't stop me from still reaching out, hopig that someday you would see me. Regards.
Hello! I apologize if you felt ignored. It wasn't intentional, I've just been insanely busy with client work, so, unfortunately, I've not been very active on TH-cam lately. And since a lot of comments are technical questions, it often takes me a lot of time to get through everything and provide sufficient answers to those comments/problems. Still, I do my best to answer everyone and I try to make sure no comment gets left out because I appreciate it when someone takes the time to comment on my videos. So thank you very much for reaching out and for your support, I appreciate it and it does not go unnoticed! 🙌
I'm sorry you're experiencing issues, that shouldn't be happening. If I understood correctly, when you hide the overflow on your parent container, the entire sliding text disappears? Is the issue only happening in the editor or on the front-end as well? The first thing I recommend you do is clear any cache you might have enabled - any plugin cache, any server cache and any CDN cache. Also, try viewing the website in a private browser window. Let me know how it goes! 💪
▶️ If you want to combine this with IMAGES as well, you can follow the steps outlined in this video: th-cam.com/video/GvtwcylLw2M/w-d-xo.html
HTML and JavaScript 👇
Make sure you subscribe ✦
document.querySelectorAll('.outer').forEach(el => {
let content = el.querySelector('.content');
repeatContent(content, el.offsetWidth);
let slider = el.querySelector('.loop');
slider.innerHTML = slider.innerHTML + slider.innerHTML;
});
function repeatContent(el, till) {
let html = el.innerHTML;
let counter = 0; // prevents infinite loop
while (el.offsetWidth < till && counter < 100) {
el.innerHTML += html;
counter += 1;
}
}
CSS 👇
/* Using em for your padding-left is going to ensure the padding scales in proportion to the font-size. */
.content {
font-family: "Inter", sans-serif;
font-size: 2.5rem;
font-weight: 700;
color: #111111;
padding-left: 0.25em;
}
@media only screen and (max-width: 767px) {
.content {
font-size: 2rem !important;
padding-left: 0.25em;
}
}
.outer {
overflow: hidden; !important;
}
.outer div {
display: inline-block;
}
.loop {
white-space: nowrap;
animation: loop-anim 15s linear infinite;
}
@media only screen and (max-width: 767px) {
.loop {
animation: loop-anim 3.5s linear infinite;
}
}
@keyframes loop-anim {
0% {
margin-left: 0;
}
100% {
margin-left: -50% /* This works because of the div between "outer" and "loop" */
}
}
--------------------------------------
Adjustments and additional code 👇
/* An example of a media query for devices between 767 and 1024 pixels (tablets). Change out the pixel values to control the breakpoints. Target the correct class and make your changes. */
@media only screen and (min-width: 767px) and (max-width: 1024px) {
.content {
font-size: 2.25rem !important;
padding-left: 0.25em;
}
}
/* What your ''loop'' class should look like if you decide to reverse the direction. */
.loop {
white-space: nowrap;
animation: loop-anim 15s linear infinite;
animation-direction: reverse;
}
@media only screen and (max-width: 767px) {
.loop {
animation: loop-anim 3.5s linear infinite;
animation-direction: reverse;
}
}
/* How to rotate the sliding text. Just add the transform property to your ''outer'' class and change the degrees to whatever you need. When rotated, the text doesn't go perfectly from the left edge of the screen to the right edge of the screen, but if you're just using text without a background, it's pretty much unnoticeable. If you want to fix it, however, the process is the same as for the banner. Add in width, a negative margin and hide the overflow - an example is available a little further down and the process is explained in the video. */
.outer {
overflow: hidden; !important;
transform: rotate(-3deg);
}
/* An example of two ''outer'' classes, styled to look like banners. The margin-top, the z-index and the position: relative are there to make them overlap. Don't forget to fix the overflow if you use this. */
.outer-top {
overflow: hidden; !important;
background-color: #111111;
padding: 1% 0;
transform: rotate(-3deg);
width: 110%;
margin-left: -5%;
z-index: 2;
position: relative;
}
.outer-bottom {
overflow: hidden; !important;
background-color: #635bff;
padding: 1% 0;
transform: rotate(3deg);
width: 110%;
margin-left: -5%;
z-index: 1;
margin-top: -3%;
position: relative;
border: solid 4px #111111;
}
/* How to hide the horizontal overflow for a specific container. */
.container {
overflow-x: hidden;
}
/* How to hide the horizontal overflow for the entire website (add this under your admin bar - ''Customize'' - ''Additional CSS''. */
body {
overflow-x: hidden;
}
/* Non-breaking space. Copy and paste this as many times as needed whenever you want to use multiple spaces. */
/* Don't forget to like the video and subscribe to the channel! ;) */
Ah man, big thank you! 🙏🏼
this is how people need to be make tutorials man, appreciated
Thank you! I've watched quite a few of these, but your code was the only one that worked perfectly for screen sizes.
Awesome, I'm happy to hear that! For such a simple effect, it really can be quite difficult to get right. Thank you very much for your support, I appreciate it! 🙏
Ah man, exactly what I was looking for 👍
Awesome! I know just what you mean, because this was inspired by my own search for a simpler, better solution for sliding text. Thank you for your continued support! 🙌
So detailed, thank you
I'm glad you found it useful. Thank you for your support! 🙌🙏
Thanks but...i fail to see where is the code exactly??
Sir, thank you so much.
I'm happy to help, thank you for watching! 🙏
Your great 🎉👍🏻
great video boss
Thank you, I appreciate it! 🙌
Nice video 🎉 Can you make tutorial on some advanced scrolling effects with JavaScript or GSAP?
Thank you very much, I appreciate it! And thank you for your suggestion as well, I can't promise anything but I can say I've been seriously considering creating some more JavaScript tutorials 😉 If there's anything specific you had in mind, I would love to see it!
Great video.
Thank you, I appreciate it! 🙏
thanks a lot!
I'm happy to help, thank you for your support! 🙌
How do I slow it down on mobile view? Its crazy fast only on that one
Did anyone figure this out?
Is it crazy fast just in the preview, in Elementor, or on the actual live website? I'm asking because the preview can act a bit odd and it isn't always entirely reliable as a true indicator of what the effect looks like on the actual website.
If you're having issues on the actual live website, simply adjust the speed of the animation in the media query. You'll find it in this part of the CSS:
@media only screen and (max-width: 767px) {
.loop {
animation: loop-anim 3.5s linear infinite;
}
}
All you need to do is change the time from 3.5s to whatever you want. The animation speed should adjust accordingly.
Let me know how it goes! 💪
Thats amazing! I did it. Now the problem is my final page doesnt show the font-family from css. Thank you
Hello! Nice tutorial! But how can i make this sliding effect start only if the text is larger than the container? If the text reach the width of container, then start scrolling.
This is absolutely fantastic! Exactly what I was looking for.
When I'm building this, my text doesn't repeat (and it resets to the original position before the full text has appeared). What am I missing?
I solved it! The solution was to copy the text in the HTML section, so it was double what I had previously. Now it loops smoothly.
It's great to hear that you managed to get everything working. Thank you very much for your support, I really appreciate it! 🙌🙏
What if I'd like to include multiple words like this: Word 1 (icon) Word 2 (icon) Word 3 (icon)... how would I change the code ?.... meaning I want to include an actual icon I made for my site, not a glyph that you can type
Thank you! I,ve tryied other tutorials and none works propperly. I have a couple of questions: (1) Is it possible to change the color of the star icon? (2) How could we change the icon for another icon or image we would like to use (like the logo of the brand)? Hope you can answer this.
♥😄
Thank you for this nice tutorial 👌 ! I tried to adapt it for vertically sliding text, without success: the text is not repeated, and... suddenly disappears. Do you have any suggestion for me ? Thanks !
Is it possible to make copy slide vertically/stacked?
Hi, Great video. I followed all the steps in wordpress Gutenberg but somehow the text stays in lower case. Any idea what i'm doing wrong? 🙂
can u make detailed video on elementor for begineers
That's a great idea, I can't make any promises but I've been planning on making a new beginner tutorial for a full website build ever since the new containers came out. Hopefully, I'll be able to get to it in the near future. Thank you for your comment!
How to make the testimonials to auto sroll same as the text? Can you please help here?
This worked well on desktop but it slides incredibly fast on mobile. Is there any way to slow it down for mobile? Thank you!
Can you send the link to download (copy / paste) the code? Thx
Hello! Of course. You can also find it in the pinned 📌 comment. Here it is:
HTML and JavaScript 👇
Make sure you subscribe ✦
document.querySelectorAll('.outer').forEach(el => {
let content = el.querySelector('.content');
repeatContent(content, el.offsetWidth);
let slider = el.querySelector('.loop');
slider.innerHTML = slider.innerHTML + slider.innerHTML;
});
function repeatContent(el, till) {
let html = el.innerHTML;
let counter = 0; // prevents infinite loop
while (el.offsetWidth < till && counter < 100) {
el.innerHTML += html;
counter += 1;
}
}
CSS 👇
/* Using em for your font-size is going to ensure the padding scales in proportion to the font-size. */
.content {
font-family: "Inter", sans-serif;
font-size: 2.5rem;
font-weight: 700;
color: #111111;
padding-left: 0.25em;
}
@media only screen and (max-width: 767px) {
.content {
font-size: 2rem !important;
padding-left: 0.25em;
}
}
.outer {
overflow: hidden; !important;
}
.outer div {
display: inline-block;
}
.loop {
white-space: nowrap;
animation: loop-anim 15s linear infinite;
}
@media only screen and (max-width: 767px) {
.loop {
animation: loop-anim 3.5s linear infinite;
}
}
@keyframes loop-anim {
0% {
margin-left: 0;
}
100% {
margin-left: -50% /* This works because of the div between "outer" and "loop" */
}
}
--------------------------------------
Adjustments and additional code 👇
/* An example of a media query for devices between 767 and 1024 pixels (tablets). Change out the pixel values to control the breakpoints. Target the correct class and make your changes. */
@media only screen and (min-width: 767px) and (max-width: 1024px) {
.content {
font-size: 2.25rem !important;
padding-left: 0.25em;
}
}
/* What your ''loop'' class should look like if you decide to reverse the direction. */
.loop {
white-space: nowrap;
animation: loop-anim 15s linear infinite;
animation-direction: reverse;
}
@media only screen and (max-width: 767px) {
.loop {
animation: loop-anim 3.5s linear infinite;
animation-direction: reverse;
}
}
/* How to rotate the sliding text. Just add the transform property to your ''outer'' class and change the degrees to whatever you need. When rotated, the text doesn't go perfectly from the left edge of the screen to the right edge of the screen, but if you're just using text without a background, it's pretty much unnoticeable. If you want to fix it, however, the process is the same as for the banner. Add in width, a negative margin and hide the overflow - an example is available a little further down and the process is explained in the video. */
.outer {
overflow: hidden; !important;
transform: rotate(-3deg);
}
/* An example of two ''outer'' classes, styled to look like banners. The margin-top, the z-index and the position: relative are there to make them overlap. Don't forget to fix the overflow if you use this. */
.outer-top {
overflow: hidden; !important;
background-color: #111111;
padding: 1% 0;
transform: rotate(-3deg);
width: 110%;
margin-left: -5%;
z-index: 2;
position: relative;
}
.outer-bottom {
overflow: hidden; !important;
background-color: #635bff;
padding: 1% 0;
transform: rotate(3deg);
width: 110%;
margin-left: -5%;
z-index: 1;
margin-top: -3%;
position: relative;
border: solid 4px #111111;
}
/* How to hide the horizontal overflow for a specific container. */
.container {
overflow-x: hidden;
}
/* How to hide the horizontal overflow for the entire website (add this under your admin bar - ''Customize'' - ''Additional CSS''. */
body {
overflow-x: hidden;
}
/* Non-breaking space. Copy and paste this as many times as needed whenever you want to use multiple spaces. */
/* Don't forget to like the video and subscribe to the channel! ;) */
@@Reialesa i tried adding the css code to woocommerce additional CSS. and it does not work for me. no idea what i am doing wrong. just trying to get running text in my store notice!! please help!
Hi, great tutorial. But the text doesn't move for me, what am I missing?
Thank you! Did you try reloading the page and clearing out the cache? Those are the first things I recommend you try. If all else fails, try double checking that the code was copied correctly and that the classes fit.
Hello, great video! However, I have an issue because I have a custom font (Confine) installed, and it's not being recognized in the HTML, so it's not applied. Is there a solution?
Hello, question concerning reversing the animation with animation-direction: reverse; when I do this when I reload the page the text right end starts from the middle of the page, while if I do not use animation-direction: reverse; it starts full width.
Could not find what is the problem, help? :D
Where's the code to copy and paste?
did you ever get the code? I'm looking for it as well
TH-cam sometimes doesn't display the pinned comments correctly, I'm not sure why. Here's the code:
HTML and JavaScript 👇
Make sure you subscribe ✦
document.querySelectorAll('.outer').forEach(el => {
let content = el.querySelector('.content');
repeatContent(content, el.offsetWidth);
let slider = el.querySelector('.loop');
slider.innerHTML = slider.innerHTML + slider.innerHTML;
});
function repeatContent(el, till) {
let html = el.innerHTML;
let counter = 0; // prevents infinite loop
while (el.offsetWidth < till && counter < 100) {
el.innerHTML += html;
counter += 1;
}
}
CSS 👇
/* Using em for your padding-left is going to ensure the padding scales in proportion to the font-size. */
.content {
font-family: "Inter", sans-serif;
font-size: 2.5rem;
font-weight: 700;
color: #111111;
padding-left: 0.25em;
}
@media only screen and (max-width: 767px) {
.content {
font-size: 2rem !important;
padding-left: 0.25em;
}
}
.outer {
overflow: hidden; !important;
}
.outer div {
display: inline-block;
}
.loop {
white-space: nowrap;
animation: loop-anim 15s linear infinite;
}
@media only screen and (max-width: 767px) {
.loop {
animation: loop-anim 3.5s linear infinite;
}
}
@keyframes loop-anim {
0% {
margin-left: 0;
}
100% {
margin-left: -50% /* This works because of the div between "outer" and "loop" */
}
}
--------------------------------------
Adjustments and additional code 👇
/* An example of a media query for devices between 767 and 1024 pixels (tablets). Change out the pixel values to control the breakpoints. Target the correct class and make your changes. */
@media only screen and (min-width: 767px) and (max-width: 1024px) {
.content {
font-size: 2.25rem !important;
padding-left: 0.25em;
}
}
/* What your ''loop'' class should look like if you decide to reverse the direction. */
.loop {
white-space: nowrap;
animation: loop-anim 15s linear infinite;
animation-direction: reverse;
}
@media only screen and (max-width: 767px) {
.loop {
animation: loop-anim 3.5s linear infinite;
animation-direction: reverse;
}
}
/* How to rotate the sliding text. Just add the transform property to your ''outer'' class and change the degrees to whatever you need. When rotated, the text doesn't go perfectly from the left edge of the screen to the right edge of the screen, but if you're just using text without a background, it's pretty much unnoticeable. If you want to fix it, however, the process is the same as for the banner. Add in width, a negative margin and hide the overflow - an example is available a little further down and the process is explained in the video. */
.outer {
overflow: hidden; !important;
transform: rotate(-3deg);
}
/* An example of two ''outer'' classes, styled to look like banners. The margin-top, the z-index and the position: relative are there to make them overlap. Don't forget to fix the overflow if you use this. */
.outer-top {
overflow: hidden; !important;
background-color: #111111;
padding: 1% 0;
transform: rotate(-3deg);
width: 110%;
margin-left: -5%;
z-index: 2;
position: relative;
}
.outer-bottom {
overflow: hidden; !important;
background-color: #635bff;
padding: 1% 0;
transform: rotate(3deg);
width: 110%;
margin-left: -5%;
z-index: 1;
margin-top: -3%;
position: relative;
border: solid 4px #111111;
}
/* How to hide the horizontal overflow for a specific container. */
.container {
overflow-x: hidden;
}
/* How to hide the horizontal overflow for the entire website (add this under your admin bar - ''Customize'' - ''Additional CSS''. */
body {
overflow-x: hidden;
}
/* Non-breaking space. Copy and paste this as many times as needed whenever you want to use multiple spaces. */
/* Don't forget to like the video and subscribe to the channel! ;) */
Why I have still space (even if I put full width on section) between the HTML code and end of left and right side?
That's very likely a padding or margin issue. Check if your container has any padding applied to it. It should be set to zero for the sliding text to be full screen. 😁
NO additional File bro?
I might be an idiot, but where can I find your code snippets? 😀
You're not! I place things in a pinned comment but TH-cam sometimes doesn't display that pinned comment correctly. So it's very easy to get lost in the comments. Here's the code from the video:
HTML and JavaScript 👇
Make sure you subscribe ✦
document.querySelectorAll('.outer').forEach(el => {
let content = el.querySelector('.content');
repeatContent(content, el.offsetWidth);
let slider = el.querySelector('.loop');
slider.innerHTML = slider.innerHTML + slider.innerHTML;
});
function repeatContent(el, till) {
let html = el.innerHTML;
let counter = 0; // prevents infinite loop
while (el.offsetWidth < till && counter < 100) {
el.innerHTML += html;
counter += 1;
}
}
CSS 👇
/* Using em for your padding-left is going to ensure the padding scales in proportion to the font-size. */
.content {
font-family: "Inter", sans-serif;
font-size: 2.5rem;
font-weight: 700;
color: #111111;
padding-left: 0.25em;
}
@media only screen and (max-width: 767px) {
.content {
font-size: 2rem !important;
padding-left: 0.25em;
}
}
.outer {
overflow: hidden; !important;
}
.outer div {
display: inline-block;
}
.loop {
white-space: nowrap;
animation: loop-anim 15s linear infinite;
}
@media only screen and (max-width: 767px) {
.loop {
animation: loop-anim 3.5s linear infinite;
}
}
@keyframes loop-anim {
0% {
margin-left: 0;
}
100% {
margin-left: -50% /* This works because of the div between "outer" and "loop" */
}
}
--------------------------------------
Adjustments and additional code 👇
/* An example of a media query for devices between 767 and 1024 pixels (tablets). Change out the pixel values to control the breakpoints. Target the correct class and make your changes. */
@media only screen and (min-width: 767px) and (max-width: 1024px) {
.content {
font-size: 2.25rem !important;
padding-left: 0.25em;
}
}
/* What your ''loop'' class should look like if you decide to reverse the direction. */
.loop {
white-space: nowrap;
animation: loop-anim 15s linear infinite;
animation-direction: reverse;
}
@media only screen and (max-width: 767px) {
.loop {
animation: loop-anim 3.5s linear infinite;
animation-direction: reverse;
}
}
/* How to rotate the sliding text. Just add the transform property to your ''outer'' class and change the degrees to whatever you need. When rotated, the text doesn't go perfectly from the left edge of the screen to the right edge of the screen, but if you're just using text without a background, it's pretty much unnoticeable. If you want to fix it, however, the process is the same as for the banner. Add in width, a negative margin and hide the overflow - an example is available a little further down and the process is explained in the video. */
.outer {
overflow: hidden; !important;
transform: rotate(-3deg);
}
/* An example of two ''outer'' classes, styled to look like banners. The margin-top, the z-index and the position: relative are there to make them overlap. Don't forget to fix the overflow if you use this. */
.outer-top {
overflow: hidden; !important;
background-color: #111111;
padding: 1% 0;
transform: rotate(-3deg);
width: 110%;
margin-left: -5%;
z-index: 2;
position: relative;
}
.outer-bottom {
overflow: hidden; !important;
background-color: #635bff;
padding: 1% 0;
transform: rotate(3deg);
width: 110%;
margin-left: -5%;
z-index: 1;
margin-top: -3%;
position: relative;
border: solid 4px #111111;
}
/* How to hide the horizontal overflow for a specific container. */
.container {
overflow-x: hidden;
}
/* How to hide the horizontal overflow for the entire website (add this under your admin bar - ''Customize'' - ''Additional CSS''. */
body {
overflow-x: hidden;
}
/* Non-breaking space. Copy and paste this as many times as needed whenever you want to use multiple spaces. */
/* Don't forget to like the video and subscribe to the channel! ;) */
@@Reialesa THANK YOU!!
I'm happy to help! If it's crooked, it might be because you added in the part of the CSS that rotates the whole banner. If it's not that, try viewing it on the live page. Sometimes it looks wrong in the editor but it displays as it should on the actual live website. If that isn't it, the third thing you should try is clearing out every cache you have and regenerating CSS ('Elementor' - 'Tools' - 'Regenerate Files & Data'). And make sure your containers don't have any effects applied to them (under 'Advanced' - 'Transform'). That should pretty much cover every possible issue. 😁
@@Reialesa I ended up fixing it manually by "skewing" it in elementor until it was straight (for me -3 on both parameters). Probably not the coding-way of doing it, but it worked! Sharing here in case anyone else ends up with the same issue!
Interesting. Thank you for sharing! Since you mentioned that you fixed it by rotating it by 3 degrees, I think it might have to do something with the CSS you used. If you see this in your CSS, just go ahead and remove it:
.outer {
overflow: hidden; !important;
transform: rotate(-3deg);
}
But, in the end, the most important thing is that it works the way you want it to! 💪
Thank you for this. But i can't copy the code. I'd suggest you put it in a txt or doc file ❤❤
Good idea! I try to put it in the pinned comments so viewers don't have to go off of TH-cam to get the information they need. But I've been having issues with the pinned comments, so I'm considering making the codes available on my website. I appreciate your suggestion!
In the meanwhile, if you still can't copy it, I put it in a Google Docs file: docs.google.com/document/d/1korwDFWMripIx09UJERzK3absibHbSgSSpI9ZLWGKbQ/edit?usp=sharing
@@Reialesa thank you so much 💕
I'm happy to help! Thank you for your support. 🙌
Hey ! I want to add different icon between 2 texts how to add i want to add different icon between that text as you added that star.. i have star but different star.. how yo do that. I didn't find anything same like text which i can copy paste there as text .. i have vector.
Good question! The process of adding in an image is identical to the one outlined in this video: th-cam.com/video/GvtwcylLw2M/w-d-xo.html
Add your image to the text by following the steps described in the video. Then, target it and adjust it with CSS (which you'll also find in the video). Very simple. Let me know how it goes! 💪
@@Reialesa thank you so much ❤️
No problem, thank you for your support! 😁🙌
Amazing video!! I feel like a dummy. I’ve tried 10 plugins and nothing. I don’t use elementor because it slowed down my site. I can still use the css code and it will create m sliding text store notice? That’s what I am in search of!! Please help 🙏
how to loop this from top to bottom?
Hey boss! can you send the code source?
Hello! It's available in the pinned comment. TH-cam doesn't always show that comment correctly, though. Here it is 👇
HTML and JavaScript 👇
Make sure you subscribe ✦
document.querySelectorAll('.outer').forEach(el => {
let content = el.querySelector('.content');
repeatContent(content, el.offsetWidth);
let slider = el.querySelector('.loop');
slider.innerHTML = slider.innerHTML + slider.innerHTML;
});
function repeatContent(el, till) {
let html = el.innerHTML;
let counter = 0; // prevents infinite loop
while (el.offsetWidth < till && counter < 100) {
el.innerHTML += html;
counter += 1;
}
}
CSS 👇
/* Using em for your padding-left is going to ensure the padding scales in proportion to the font-size. */
.content {
font-family: "Inter", sans-serif;
font-size: 2.5rem;
font-weight: 700;
color: #111111;
padding-left: 0.25em;
}
@media only screen and (max-width: 767px) {
.content {
font-size: 2rem !important;
padding-left: 0.25em;
}
}
.outer {
overflow: hidden; !important;
}
.outer div {
display: inline-block;
}
.loop {
white-space: nowrap;
animation: loop-anim 15s linear infinite;
}
@media only screen and (max-width: 767px) {
.loop {
animation: loop-anim 3.5s linear infinite;
}
}
@keyframes loop-anim {
0% {
margin-left: 0;
}
100% {
margin-left: -50% /* This works because of the div between "outer" and "loop" */
}
}
--------------------------------------
Adjustments and additional code 👇
/* An example of a media query for devices between 767 and 1024 pixels (tablets). Change out the pixel values to control the breakpoints. Target the correct class and make your changes. */
@media only screen and (min-width: 767px) and (max-width: 1024px) {
.content {
font-size: 2.25rem !important;
padding-left: 0.25em;
}
}
/* What your ''loop'' class should look like if you decide to reverse the direction. */
.loop {
white-space: nowrap;
animation: loop-anim 15s linear infinite;
animation-direction: reverse;
}
@media only screen and (max-width: 767px) {
.loop {
animation: loop-anim 3.5s linear infinite;
animation-direction: reverse;
}
}
/* How to rotate the sliding text. Just add the transform property to your ''outer'' class and change the degrees to whatever you need. When rotated, the text doesn't go perfectly from the left edge of the screen to the right edge of the screen, but if you're just using text without a background, it's pretty much unnoticeable. If you want to fix it, however, the process is the same as for the banner. Add in width, a negative margin and hide the overflow - an example is available a little further down and the process is explained in the video. */
.outer {
overflow: hidden; !important;
transform: rotate(-3deg);
}
/* An example of two ''outer'' classes, styled to look like banners. The margin-top, the z-index and the position: relative are there to make them overlap. Don't forget to fix the overflow if you use this. */
.outer-top {
overflow: hidden; !important;
background-color: #111111;
padding: 1% 0;
transform: rotate(-3deg);
width: 110%;
margin-left: -5%;
z-index: 2;
position: relative;
}
.outer-bottom {
overflow: hidden; !important;
background-color: #635bff;
padding: 1% 0;
transform: rotate(3deg);
width: 110%;
margin-left: -5%;
z-index: 1;
margin-top: -3%;
position: relative;
border: solid 4px #111111;
}
/* How to hide the horizontal overflow for a specific container. */
.container {
overflow-x: hidden;
}
/* How to hide the horizontal overflow for the entire website (add this under your admin bar - ''Customize'' - ''Additional CSS''. */
body {
overflow-x: hidden;
}
/* Non-breaking space. Copy and paste this as many times as needed whenever you want to use multiple spaces. */
/* Don't forget to like the video and subscribe to the channel! ;) */
Hey, Can I get this source code. Thank you
Of course, here it is (you can also find it in the pinned comment):
HTML and JavaScript 👇
Make sure you subscribe ✦
document.querySelectorAll('.outer').forEach(el => {
let content = el.querySelector('.content');
repeatContent(content, el.offsetWidth);
let slider = el.querySelector('.loop');
slider.innerHTML = slider.innerHTML + slider.innerHTML;
});
function repeatContent(el, till) {
let html = el.innerHTML;
let counter = 0; // prevents infinite loop
while (el.offsetWidth < till && counter < 100) {
el.innerHTML += html;
counter += 1;
}
}
CSS 👇
/* Using em for your padding-left is going to ensure the padding scales in proportion to the font-size. */
.content {
font-family: "Inter", sans-serif;
font-size: 2.5rem;
font-weight: 700;
color: #111111;
padding-left: 0.25em;
}
@media only screen and (max-width: 767px) {
.content {
font-size: 2rem !important;
padding-left: 0.25em;
}
}
.outer {
overflow: hidden; !important;
}
.outer div {
display: inline-block;
}
.loop {
white-space: nowrap;
animation: loop-anim 15s linear infinite;
}
@media only screen and (max-width: 767px) {
.loop {
animation: loop-anim 3.5s linear infinite;
}
}
@keyframes loop-anim {
0% {
margin-left: 0;
}
100% {
margin-left: -50% /* This works because of the div between "outer" and "loop" */
}
}
--------------------------------------
Adjustments and additional code 👇
/* An example of a media query for devices between 767 and 1024 pixels (tablets). Change out the pixel values to control the breakpoints. Target the correct class and make your changes. */
@media only screen and (min-width: 767px) and (max-width: 1024px) {
.content {
font-size: 2.25rem !important;
padding-left: 0.25em;
}
}
/* What your ''loop'' class should look like if you decide to reverse the direction. */
.loop {
white-space: nowrap;
animation: loop-anim 15s linear infinite;
animation-direction: reverse;
}
@media only screen and (max-width: 767px) {
.loop {
animation: loop-anim 3.5s linear infinite;
animation-direction: reverse;
}
}
/* How to rotate the sliding text. Just add the transform property to your ''outer'' class and change the degrees to whatever you need. When rotated, the text doesn't go perfectly from the left edge of the screen to the right edge of the screen, but if you're just using text without a background, it's pretty much unnoticeable. If you want to fix it, however, the process is the same as for the banner. Add in width, a negative margin and hide the overflow - an example is available a little further down and the process is explained in the video. */
.outer {
overflow: hidden; !important;
transform: rotate(-3deg);
}
/* An example of two ''outer'' classes, styled to look like banners. The margin-top, the z-index and the position: relative are there to make them overlap. Don't forget to fix the overflow if you use this. */
.outer-top {
overflow: hidden; !important;
background-color: #111111;
padding: 1% 0;
transform: rotate(-3deg);
width: 110%;
margin-left: -5%;
z-index: 2;
position: relative;
}
.outer-bottom {
overflow: hidden; !important;
background-color: #635bff;
padding: 1% 0;
transform: rotate(3deg);
width: 110%;
margin-left: -5%;
z-index: 1;
margin-top: -3%;
position: relative;
border: solid 4px #111111;
}
/* How to hide the horizontal overflow for a specific container. */
.container {
overflow-x: hidden;
}
/* How to hide the horizontal overflow for the entire website (add this under your admin bar - ''Customize'' - ''Additional CSS''. */
body {
overflow-x: hidden;
}
/* Non-breaking space. Copy and paste this as many times as needed whenever you want to use multiple spaces. */
/* Don't forget to like the video and subscribe to the channel! ;) */
I have said Hi, but you didn't talk back. Though I felt like you are someone who ignores your fans, It didn't stop me from still reaching out, hopig that someday you would see me. Regards.
Hello! I apologize if you felt ignored. It wasn't intentional, I've just been insanely busy with client work, so, unfortunately, I've not been very active on TH-cam lately. And since a lot of comments are technical questions, it often takes me a lot of time to get through everything and provide sufficient answers to those comments/problems.
Still, I do my best to answer everyone and I try to make sure no comment gets left out because I appreciate it when someone takes the time to comment on my videos.
So thank you very much for reaching out and for your support, I appreciate it and it does not go unnoticed! 🙌
@@Reialesa Thanks for replying. 😇
When I set the parent container to hidden the sliding text disappears . How to fix?))
I'm sorry you're experiencing issues, that shouldn't be happening. If I understood correctly, when you hide the overflow on your parent container, the entire sliding text disappears? Is the issue only happening in the editor or on the front-end as well?
The first thing I recommend you do is clear any cache you might have enabled - any plugin cache, any server cache and any CDN cache. Also, try viewing the website in a private browser window. Let me know how it goes! 💪