Marquee-like Content Scrolling (HTML & CSS)

[@rishabapriyan7138]

In all the years to come, I will not forget your accent and your pleasant way of teaching.Thanks.

[@CodingJourney]

Nooooo don't do this to yourseeeeelf 😁 Heheh thanks man, really appreciate the encouraging comments! All the best, keep it up!!💙

[@bojanpavlovic5038]

I totally agree!!!! Thank you!

[@טוהרשוקרון-ט4י]

Stil?

[@farukweb]

Nice scrolling animation. Great..............

[@darinashvydiuk1465]

Thank you very much, I have been looking for a good video for a long time to make a carousel. Everything is very clear and accessible.

[@CodingJourney]

My pleasure, very glad it was helpful! Good luck, keep coding 😉💙

[@barkaleamol9394]

this is the most knowledgeable video on CSS i have ever seen. thank you so much I love from INDIA, you deserve 5million subs. instead of 5k! great work

[@CodingJourney]

Oh thank you for the lovely comment 🙏🙂 Warm greetings to India!! 💙

[@DoctorWarlock_]

Excellent tutorial! You are a great teacher! Thanks for taking time to make this!

[@CodingJourney]

Oh thanks for the lovely comment 🙂 My pleasure, very glad you liked it!!

[@npmjazz]

Perfection! Thank you so much!

[@RaphaelKONG]

Yes amazing. Best tutorial I ever seen on this scrolling stuff effect

[@CodingJourney]

Thank youuuuu 🙂 Very glad you liked it!!

[@nurinhanishabintiharrisfad4688]

@@CodingJourney pp

[@piusvictor8780]

Brilliant Tutorial, thanks so much for sharing, it's amazing job, recommended to every one.

[@CodingJourney]

Oh thank you 🙂 Very glad you liked it! 💙

[@Sunnyside--Up]

I love this marquee, especially because it is adjusted to the newer css properties. I remain to figure the calculation yet, so how to reduce the items to show. That is in a perfect world, to adjust to @media properties for smaller screens. I hadn't had enough time to think about it but it could be a video on your end. Thank you very much for your video!

[@CodingJourney]

Hey, thank you! To set the displayed elements, I'm using the CSS custom property: --marquee-elements-displayed, setting it to 5 and for smaller screens to 3 (using the @media query). There's a link to the final project in the description, in case you want to have a closer look! Thanks again, keep coding 😉🙂

[@kanhaiyavarshney9595]

Hey There!! Thanks for explaining the things so amazingly. Wishing you the best!

[@CodingJourney]

Hey mate! Thanks for the lovely comment 🙂 You too, all the best!!

[@attilaguba856]

That's what I've been looking for! Great!!! I can use it for my asp net core mvc project! Thanks !

[@CodingJourney]

Super! My pleasure 🙂💙

[@cristit9758]

Nice and clean explanation/work! Thanks!

[@CodingJourney]

Oh thank you, my pleasure 🙂 Very glad you liked it! Keep coding 😉💙

[@nick_at_night]

Legend. thanks for the tutorial!

[@diegommagno]

Great content, this is exactly what I needed to learn! Thank you 👏🏻👏🏻

[@CodingJourney]

Amazing! Very glad you found this useful. All the best, keep coding!! 😉

[@Manisha-vt8hm]

Amazing, I was looking for this type layout , and now i found it, thanks for this video.

[@CodingJourney]

Super! Very glad you found this useful 🙂 All the best, keep coding!!

[@APHCentralProvince]

what a great tutorial... thanks bro..

[@ou812927]

You are a great teacher!

[@CodingJourney]

🙏💙💙🙂

[@danielChibuogwu]

Thanks for the tutorial, I'm so so very much grateful

[@cetincakiroglu21]

You're a legend. Thank you very much !

[@CodingJourney]

You are!! 😉 My pleasure, glad you liked it!!

[@hikesbikeswithivy3880]

GREAT! Thank you so much for this!

[@CodingJourney]

Totally my pleasure 🙂 Very glad you liked it! 💙

[@dlongodesign7026]

thank you so much for this tutorial! I wanted to make a marquee bar that animates with GSAP scroll trigger and this helped me so much! Thank you!

[@CodingJourney]

Amazing!! Keep it up 💙

[@08JuHan]

Incredible material. Thanks a lot and subbed.

[@CodingJourney]

🙏💙💙

[@akashlaskaria]

Can you please help me in how to cover the blank space while the text fully disappears. Like i want when the text starts disappearing, then immediately or after 2 seconds the first line reappears again scrolling to left.

[@annashalbuzova8124]

Thanks, great tutorial🤩

[@GamingWithEryx]

It WORKED YOU ARE THE BEST

[@indianlongboarder2844]

where did you get that two black and white birds image its on my lock screen by bing

[@CodingJourney]

Hey 🙂 Got the images from the Unsplash website! I don't exactly remember the search term I used, but I think these birds are called puffins!

[@James-dh6gt]

This was really useful! Thanks mate!!!

[@ahmadcreators8906]

Wow amazing video ❤️

[@CodingJourney]

Oh thank you! Glad you liked it 💙

[@officialsatisfyingvids8296]

How can I do this in form of random elements and graphics moving in a particular box scrolling up without stopping

[@eliaschen]

great video!!!

[@CodingJourney]

Thaaaanks 🙂🍻

[@daniillomovitskiy978]

Thank you! That is a great tutorial

[@CodingJourney]

My pleasure 🙂 Glad you liked it! 💙

[@nickjablonka5074]

How would this work for vertical scroll?

[@kirangire1352]

instead of 9 elements we took 100 elements or nth number of element then will it reflect?

[@lichaytiram9246]

Ohh, after I use it on my website I had a big problem with optimize to iPhone it work very good on desktop and android but on IOS it do some problem Can I fix it? because like that it useless with bugs :-( The bug when it get to end and I change my screen from height to width elements isn't add as should (I show 1 element on height and two on width)

[@CodingJourney]

Hey man! From what I understand this is not an IOS problem, it has to do with window resizing...you should have the same problem with Android when rotating from vertical to horizontal and even on desktop when starting from a very small window width and expanding. Starting from larger window and resizing to smaller wouldn't cause any problem but the other way around it does (if the --marquee-elements-displayed value decreases for smaller screens). And that's because we set: const marqueeElementsDisplayed = getComputedStyle(root).getPropertyValue("--marquee-elements-displayed"); so that value depends on the --marquee-elements-displayed value for the current screen size when the script initially runs. In order to avoid listening for the window resize event and adding unnecessary complexity, you could simply set marqueeElementsDisplayed to the max number of elements displayed in the largest screen size (so it will actually be maxMarqueeElementsDisplayed)...you could even set it to the total number of marquee elements, in that case this is the JavaScript part: const root = document.documentElement; const marqueeContent = document.querySelector(".marquee-content"); const marqueeElementsDisplayed = marqueeContent.children.length; // or you could just use your max number of displayed elements here (for the largest screen size) root.style.setProperty("--marquee-elements", marqueeContent.children.length); for (let i=0; i

[@lichaytiram9246]

@@CodingJourney I already separate it in my way on mobile screen show 2 and on desktop screen show 4 elements but still when I use mobile it to this problem on desktop (chrome v8) it work perfectly but on my iPhone it isn't (12 max) and on my mom phone (s21+) work well. for mobile I give him Width and height screens -> two elements to show but on my iPhone when I change from height for example to width screen it do some space on my marquee-elements and because that space it keep run it after have no elements edit: after hard work I see that when I use on width screen and height screen --width-box-element difference value (it specify width for any box inside marquee wrapper) that what I want to achieve (only for IOS this way isn't work)

[@GiantSquid13]

Hi. Nice tutorial. It's the most well explained tutorial I've seen so far. I however wish to have at least two marquee elements say some words on the top side and images below just like the one you have before you started the tutorial. I really need your help on that. Thank you

[@marksandoval8839]

Great tutorial, how can i move to the top of screen? or couple line because menu space?

[@scorchedwaver4706]

does this work with images as well?

[@CodingJourney]

Yeap! Towards the end of the video I'm using images. Good luck 💙

[@vipulvarshney6959]

Hey there! Nice tutorial, explaining everything exactly to the point. You earned my sub!!! I wanted to ask if you can make a course on CSS

[@CodingJourney]

Hey, thanks mate welcome aboard!! 🙂 For the near future I plan on creating and presenting various projects/components instead of a full course on CSS...maybe in the future but this is not in my short term plans tbh! You can find high quality CSS courses in YT from amazing instructors!!! All the best, keep coding 😉💙

[@ayushgupta2537]

what if the user wants to slide left or right?

[@robl417]

Very helpful. Thank you.

[@CodingJourney]

My pleasure 🙂 Glad it was helpful!

[@shwetaa1845]

hi, i was very good video, thanks for it. but then i felt it bit difficult, it took 3 days for me to understand the code. but then finally i was able to code it.

[@CodingJourney]

Excellent! That's the spirit 👍 All the best, keep coding!! 💙

[@shynkwanchi]

Can you do this with JavaScript?

[@08JuHan]

I actually have a question. For some reason in the JavaScript file, marqueeElementsDisplayed is empty instead of a number. I can't figure out why that is. It seems that getComputedStyle(root) doesn't have the "--marquee-elements-displayed" property to it.

[@CodingJourney]

Hey man! This should work...obviously can't debug without looking at the code but the first thing I would check is for typing errors! There is also a link to the final working project in the description, so that your can compare with your code!! Welcome aboard, all the best and keep coding 🙂 ...and rocking 😉🎸💙

[@aasifnasim]

good tutorial, thanks

[@jonhanlan]

Can it work with video?

[@nizar4294]

OMG i learned a lot today thank you bro

[@CodingJourney]

Very glad to hear that bro!! My pleasure 🙂 Keep coding 😉

[@zubairriaz5099]

What if we don't want to repeat content ? is it possible for repeat content without repeating content?

[@adhithespeedster]

Thank you so much bro!

[@CodingJourney]

My pleasure 🙂 Glad you liked it!

[@rusjanga]

Hi Coding Journey, I want to ask if what can I do to make the marquee centered because I have a header and I can't create two body tags, pleaseee helppp I'm an ICT student :'

[@CodingJourney]

Hey man! I just used the body as the main container in order to avoid extra markup. You could include your marquee element within a container and define dimensions and alignment in a similar way. e.g. HTML ... CSS .marquee-container { height: ...; /* should be >= --marquee-height */ width: 100%; display: flex; justify-content: center; align-items: center; } Hope this helps. All the best, keep coding!

[@srirams8909]

Thanks for this video, you earned my sub :) Can you say how to give some blank distance between two images in image scroller.(not more gap)

[@CodingJourney]

Amazing, welcome aboard 🙂 Well, there are always many ways to achieve something, one way would be by reducing images' width to less than 100% (e.g. 90% or 80%...). So: .marquee-content li img { width: 90%; /* instead of 100% */ ... } Hope this works! All the best 🙂

[@chiratnachakraborty1119]

I love this marquee, and its a bit out of context comment. But does anyone know how to create this in flutter web. Thank You

[@abdalkhalekchamkha3622]

Excellent

[@lopezbonillacesar8082]

Excellent video How can I declare so that it goes to the right

[@CodingJourney]

Hey thanks man! There are always countless variations. The purpose of these videos is to get you started so that you can go ahead and modify according to your needs. If for example you reverse the scrolling animation, so instead of: @keyframes scrolling { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); } } you set it to: @keyframes scrolling { 0% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); } 100% { transform: translateX(0); } } then it goes from left to right, but it may still not be exactly what you want. So it is totally up to you to make the necessary adjustments according to your requirements. All the best, keep coding!! 😉

[@subhashgn1775]

Thank you.(Marquee-like Content Scrolling (HTML & CSS))

[@mariadelcarmenperez3432]

Thank you so much!

[@CodingJourney]

Totally my pleasure 🙂 Glad you found this useful!

[@mvdAmine]

Deserve oscar!

[@CodingJourney]

🙏💙

[@seychelles44]

WOW...That was wicked. How do I add this to wordpress? Where do I get the code for my images I want to add? Better still, how much you want to code this for me?

[@eastside338]

Need help please, I added everything (besides JavaScript and uncommented the ‘-marquee-elements’) and it’s not working, all the list items are close to each other 💔

[@CodingJourney]

Hey 🙂 I can't debug without looking at your code, but in the description you can find a link to the final working project, so that your can compare with your code...All the best! Keep coding!! 💙🙂

[@richardtbohnen5070]

I know this video is almost 3-years-old at this point, but I wanted to point out that this does not completely work on chrome. For some reason it will work with live-server, but when the website is actually launched it wont work on chrome anymore (tested on multiple devices). works perfectly with firefox.

[@CodingJourney]

It's already been almost 3 years, omg 🙂 Time goes by really fast! I just opened the finished project link in the description (in CodePen) with Chrome and seems to work fine. One issue I've encountered (not with the specific project but in general) is that sometimes the script with the "defer" attribute doesn't behave exactly as I thought it would, so maybe try placing the script at the end of the body (right above the closing tag, in this case the "defer" attribute is not needed) and moreover in the JavaScript file you can include the marquee-related code, within the "load" event: window.addEventListener('load', (event) => { // Include the code here }); Hope this helps! In any case, thanks for watching and keep coding 😉 All the best 💙

[@paki857]

Thanks for the tutorial! Extremely helpful. I have a question though, what if you wanted the scroll speed to be defined by the users dragging of a scroll bar on the page? Could you point me in the right direction or provide an example code to make this possible?

[@rashidthamidur]

try gsap

[@prathameshjadhav1963]

Bro, I want to make a clone of the marquee and align it below the previous one, also reduce the speed of the marquee for my project, what should I do ?, Please help as soon as possible!!!

[@Sunnyside--Up]

Give each section a container with a class that is 100% wide. So 2 boxes on top of each other can never be less than 100% and therefore will stay on top of each other (It's basic css!). To reduce the speed by, let's say Coding Journey used 10s (10 seconds is the speed), change to 50s or whatever speed you like.

[@padamthapa9877]

i want stop when mouse hover the marquee text, images .. please how to do that?

[@CodingJourney]

Hello! I think what you want to do is covered at 14:58. Hope this works, good luck!!

[@MizanurRahmannickty]

How can i put indicator anywhere?

[@rajusam5]

Helpful ! Thanks ✌

[@bm_pug]

Times like this where I wonder... Why not just give the marquee tag proper support, then we won't have to write an insane amount of code for a very simple purpose.

[@smooth9231]

Hello, the :root don't work with me, i do all of what you explain and don't work..

[@CodingJourney]

Hiii 🙂 The :root is just a selector (which matches the document's root element). I don't think it is the root of your problems 😉 In HTML, the root element is always the html element, so if you feel uncomfortable using the :root selector you can as well use the html selector. In the description, you can find a link to the working final project in case you want to compare to your code...All the best, keep coding 😉🙂

[@lichaytiram9246]

use :host

[@jonatanr.1759]

Hi! Thx for a good tutorial! How about if you wanted it to be scrollable? So that you you could scroll up and down withing the marquee div and then it would move correspondingly back and forth? :)

[@CodingJourney]

Hey, thanks man! Not sure if I quite get what you mean but if I understand correctly, doesn't sound like good user experience, especially for touch screens. But I could be wrong 🙂 In any case, it could be a nice exercise so feel free to implement the feature and share a link with the result here! All the best!! 🙂

[@lovebandx]

the link for the code in the bio is broken. dont bother

[@CodingJourney]

Just checked, still works fine...

[@lovebandx]

yeah the link "code for this project" didn't work, but the video explained thoroughly how to accomplish this. Great video!

[@CodingJourney]

Thanks mate! But the link "code for this project" does work...maybe there was some issue at the specific time when you clicked the link. All the best, keep coding 💙

[@lovebandx]

@@CodingJourney you’re probably right. Thank you again

[@Snehaltandelit]

hay i am trying this code but javascript not working in my code

[@CodingJourney]

Hey! I think if you follow closely you should be fine. I've also included a link to the code for this project in the description. Feel free to check it out! Good luck, keep it up!!

[@Snehaltandelit]

@@CodingJourney I will check but no duplication only scroll right to left no view on continues.

[@saltech2024]

Great

[@cookingsupport1038]

Awsome

[@CodingJourney]

Amazing! Very glad you liked it 🙂

[@makulanitinkrishna7501]

thank u really useful

[@CodingJourney]

My pleasure 🙂 Very glad you liked it!!

[@himelchakma5746]

appendchild function does not work

[@CodingJourney]

Hey man! It should work, appendChild method is supported by all browsers...I've also included a link to the code for this project in the description. Try opening it and if it works properly then it is not a browser thing. Feel free to check it out and compare with your code! All the best, keep it up!!

[@ob5804]

I didn't get it 100% { transform: translateX(calc(-1 * 80px *9)); } what is -1, where we took 9 ???? I want to understand .running-line { width: 100%; height: 80px; } &__text{} - I didn't know the width of text Running line run, faster and faster Support our Armed Forces of Ukraine Running line run, faster and faster Support our Armed Forces of Ukraine

[@devve7]

:clap: :clap: :clap: :clap: :clap: :clap: :clap: GREAT JOB!! ... THX!!

[@CodingJourney]

Thanks mate, glad you liked it!! 💙🙂

[@techomoko6468]

thnks

[@BloodyClash]

😁last time i used marquee it was 1998 in a programm called microsoft frontpage

[@CodingJourney]

🙂 Yeap, there is something nostalgic with marquee elements 😉 Microsoft FrontPage...interesting, I had to google that! 🙂

[@BloodyClash]

@@CodingJourney 😁Frontpage was state of the art back in the 90s...where top of our creativity was to pack as much animated gifs on a site as possible

[@CodingJourney]

Heheh 😁 Those were the days 😉

[@easyoutplayed2039]

ily

[@CodingJourney]

💙💙💙🙂

[@neddykay8281]

the codes please...........................

[@CodingJourney]

Hey! Link is in the description!!

[@payaljaiswal3305]

1st comment

[@waheedamajeed6770]

give me microscope🧐😇

[@CodingJourney]

Heh! Still trying to find the sweet spot between large enough letters but still being able to see surrounding lines of code 🙂 Thanks for the feedback!

[@thankyou609]

hi

[@CodingJourney]

Hiiii 🙂💙