developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee
: The Marquee element - HTML: HyperText Markup Language | MDN
The HTML element is used to insert a scrolling area of text. You can control what happens when the text reaches the edges of its content area using its attributes.
developer.mozilla.org
옛날옛적 끊임없이 텍스트가 흐르던 효과 marquee
이젠 웹표준이 아니어서 제공하지 않는 브라우저들도 있다.
그렇다면 CSS로 이를 다시 구현해줘야하는데 생각보다 훨씬 간단하다.
HTML, CSS
핵심은 transform:translateX(-100%); 이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <mata name="viewport" content="width=device-width,initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title>마퀴 테스트</title> <style type="text/css"> *{margin:0;padding:0;box-sizing:border-box;} html,body{ width:100%;height:100vh;overflow:hidden;background:#eee;} #cont{ position:relative; overflow:hidden; width:90%;height:3.5em; margin:30vh auto; /* background:#000; */ border:1px solid #000; } #cont li{ display:flex; align-items:flex-start; position:absolute; width:100%;height:100%; top:0;left:0; background:#fff; animation: moveLeft 10s linear infinite;} #cont li:nth-child(2){left:100%;} #cont li span{ display:inline-block; position:relative; padding:1em 2em;} #cont li span:first-child{color:red;} @keyframes moveLeft { from{transform:translateX(0);} to{transform:translateX(-100%);} } </style> <script src="marquee.js" defer></script> </head> <body> <ul id="cont"> <li> <span>START</span><span>Lorem Ipsum</span><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, quos.</span> <span>TEXT</span><span>Lorem Ipsum</span><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, quos.</span> <span>TEXTdfdd</span> </li> </ul> </body> </html> | cs |
JS - 하드코딩으로 일일히 복사붙여넣기 하기 귗낳으니까
1 2 3 | const cont = document.getElementById('cont'); const fstLI = cont.children[0].cloneNode(true); cont.appendChild(fstLI); | cs |
'CSS&JS > ⚡Thinkers' 카테고리의 다른 글
| vanilla JS Slider 1.2 (바닐라 자바스크립트 슬라이드 1.2) (0) | 2021.06.18 |
|---|---|
| twitter app header처럼 vanilla JS로 스크롤에 따라 내려오고 올라가는 헤더 만들기(2) (0) | 2021.06.10 |
| custom Select - 이벤트 위임으로 좀 더 깔끔하게 (0) | 2021.04.30 |
| fixed thead(스크롤 할 때 부모 엘리먼트에 fix되는 thead를 만들고싶다면) (0) | 2021.04.14 |
| twitter app header처럼 vanilla JS로 스크롤에 따라 내려오고 올라가는 헤더 만들기 (0) | 2021.04.09 |