HomeОбразованиеRelated VideosMore From: Codecourse

Pure CSS Scrolling Marquee

165 ratings | 23210 views
Want more? Explore the library at https://www.codecourse.com/lessons Official site https://www.codecourse.com Twitter https://twitter.com/teamcodecourse
Html code for embedding videos on your blog
Text Comments (34)
Justin Rister (7 months ago)
Any idea why the white-space:nowrap; isn't working?
Justin Rister (7 months ago)
Great video but I think I have one part messed up: <link rel=stylesheet" href="css/main.css"> is this suppose to be the path to the main.css? For example, if I saved my main.css in my documents folder on my PC would I change this? I'm using windows 10.
Justin Rister (7 months ago)
Go it. Needed to keep it all in the same folder and put: <link rel="stylesheet" href="main.CSS" type="text/CSS">
Godwin Cornelius (8 months ago)
https://youtu.be/d_YR-Izx3V0
Freakow (9 months ago)
Thank You! I was struggling for way too long on such a simple feature for the footer on my WebApp Shell!
Md. Mehmud Hasan (1 year ago)
how it put on up to bottom?
Rakhu Mondol (1 year ago)
all.
Haithem Othmen (2 years ago)
Thank you
Lorraine Wheat (2 years ago)
Really helpful. Thanks.
berto molina (2 years ago)
esta dificil!!!
dido wong (3 years ago)
i find it  work on bowser chrome . but it can not work in ie 11. can i add any script to make it work?
dido wong (3 years ago)
+dido wong i find that css marquee works now, because of missing some words. thanks for your video. it is so useful. ^^
Celtics fan since 03' (3 years ago)
Thanks!
Abdul Khader (4 years ago)
Hi.. Great tuitoreial.. Its working perfectly. But  I am trying to move marquee in Y axis.. ie bottom to top .. Can any one guide me how can i achieve it... It would be a great help
Goo2Plex (4 years ago)
i really miss the Marquee. that said I think you forgot to mention that you need to also consider the amount of space that the text would consume. because if the original text you are already working with is over-flowing to begin with you might need to translate it beyond -100% like -120% or more.
Rana Faiz Ahmad (4 years ago)
Hey Alex! How about angularJS series?  BTW love all of your tuts.. They are the best!
Codecourse (4 years ago)
No Angular, but Backbone being planned.
Louis Feather (4 years ago)
Marquee was the first thing I ever learnt to do with HTML xD
Codecourse (4 years ago)
:)
Codecourse (4 years ago)
Pure CSS Scrolling Marquee
CoY (1 year ago)
Codecourse o
Ben Wilburn (2 years ago)
is there a way to make the text start again the moment the last word fully shows on the screen?
Jesus Rodriguez (4 years ago)
I want to request a tut
Loke15 (4 years ago)
thanks been looking for this!
Noah Nobody (4 years ago)
I've seen some loaders using this effect.
sdhpCH (4 years ago)
Maybe a nice addition for some: Add .marquee :hover{ -webkit-animation-play-state: paused; } and the marquee will stop on hover.
Codecourse (4 years ago)
+sdhpCH Thanks for this, very kind of you to post that on here.
sdhpCH (4 years ago)
Is it only on mine or is this animation really a bit choppy? It got better after having the animation to 20 seconds, but at some point it is there still choppy. Nice tut again, Alex. The padding-left: 100% thing for sure can be used in other ways to, maybe hiding a navigation bar, etc. So thx for the inspiration... 
Codecourse (4 years ago)
Not sure. What browser/version are you using?
davidxd33 (4 years ago)
Thanks for sharing this, it sparked some ideas.
Codecourse (4 years ago)
That's great, feel free to share anything you create with us and with your permission we could expand this into a series.
Yaron Rosen (4 years ago)
cool:) i love your css video :) do you plan doing some jquery videos later in the future ?
Codecourse (4 years ago)
We're planning a jQuery series, it'll be quite big, cover all the useful parts of jQuery and will be up-to-date.
sdhpCH (4 years ago)
he has got a series of 200+ jquery vids already, give search a try in his channel, yaron.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.