Pure CSS Star Wars opening crawl

Learn how to create Pure CSS Star Wars opening crawl using html, css and/or js.

<div id="target"><div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam eos velit dolore dolor perspiciatis illum assumenda ullam sint incidunt ad officiis quidem doloremque omnis ipsa tenetur odit ipsam consectetur sapiente! Sint enim neque omnis hic sed. Voluptas ea recusandae facilis mollitia in impedit minima placeat nesciunt repellat non neque dolorum. Laborum numquam reprehenderit eum adipisci assumenda delectus id dicta perspiciatis placeat quas nobis sit vero expedita saepe veniam asperiores dignissimos aut voluptates minima doloribus esse eius deleniti! Beatae atque at voluptas delectus aliquam ducimus consequatur necessitatibus repudiandae sint possimus repellat deleniti accusamus culpa enim saepe. Ducimus sint expedita soluta incidunt et fuga odio aliquam facere natus quisquam veniam adipisci necessitatibus impedit excepturi qui dicta omnis beatae dolor atque quia cupiditate sed earum reprehenderit. Esse laudantium sed suscipit pariatur dolores obcaecati nemo eaque a totam corporis est tempora incidunt voluptate nostrum laborum natus illum nesciunt commodi harum repudiandae nihil itaque recusandae odit tempore temporibus minima illo ipsum soluta vel quidem! Magnam quidem libero quis labore voluptatibus esse pariatur et sed harum sequi ut atque dolorum possimus consequatur dolor numquam blanditiis. Porro maiores placeat debitis quos voluptatem tenetur reiciendis ipsam omnis fuga animi odio temporibus sed atque assumenda quasi! Ea ratione consequatur voluptatem asperiores numquam officia necessitatibus recusandae magni eos architecto tenetur labore odit suscipit dolores quis quod et quo eaque ipsa voluptate. Reiciendis quis maiores vero illo expedita vel corrupti odit necessitatibus quae aspernatur atque obcaecati assumenda sed dolore nulla debitis eaque. Eum culpa saepe sapiente molestias dolorum nam quasi fuga dolores omnis odit mollitia corporis. Nesciunt modi minima consequatur nobis repellendus quis voluptas. Quidem id laudantium eaque ipsam ipsum. Maxime dolorem aliquid eius molestiae natus quia consequatur error odio pariatur placeat vero inventore doloribus facere fugit dolor sint obcaecati. Pariatur ducimus quae similique reprehenderit ratione rem quasi perferendis quia animi mollitia perspiciatis ullam nisi aut ab nihil autem nulla ex ipsa hic accusamus error tenetur quod accusantium consequuntur laudantium provident exercitationem fuga. Repellat reiciendis ratione nam eos exercitationem enim sapiente ipsam perferendis fugiat vel laboriosam laudantium ab blanditiis atque reprehenderit vero delectus laborum impedit harum rerum unde dolorem voluptatibus excepturi corporis consectetur minima explicabo! Nam at accusantium quia accusamus magnam a alias perspiciatis dolorum quam ab tenetur velit dolores ipsa ut tempora numquam reiciendis sint impedit repellendus vel recusandae quidem sequi. Repudiandae perferendis temporibus eum molestias deserunt voluptas veniam ullam ab soluta debitis officia quod voluptatibus reprehenderit voluptatum rerum nostrum sed maxime vitae at molestiae eveniet atque delectus saepe magnam obcaecati quisquam esse perspiciatis a eos rem dolore doloremque natus ad optio ex quas corporis! A optio maxime accusantium provident ipsam aliquid eligendi alias perferendis consectetur ut officia harum culpa explicabo cumque consequuntur magni doloremque. Earum magnam reprehenderit fugit aut omnis quae aperiam veniam placeat nobis quasi animi ab non autem corrupti voluptates et deleniti. Ut mollitia a quod iusto! Quae magni possimus eos fugiat ea vitae repudiandae dicta alias id optio vel tempore velit! Sit dolor adipisci quod sequi vel temporibus provident optio deleniti placeat officiis nam nemo impedit accusamus consequuntur accusantium esse animi cupiditate fugit repellendus maxime! Nobis cum iure voluptate in delectus alias totam perferendis saepe temporibus quisquam! Nemo neque ratione molestiae magni nihil vel saepe eum beatae doloremque labore odio ducimus voluptates quasi totam nostrum sequi distinctio atque. Dolores magni iste qui laudantium doloremque? Aperiam quia eum ipsam at voluptas accusantium quasi mollitia repellat? Dolorem eos vel praesentium laudantium repudiandae architecto quaerat repellendus optio totam quisquam! Officia facere suscipit veniam enim eum magni beatae voluptatibus? Ducimus labore explicabo sint officiis enim cupiditate quidem tenetur incidunt exercitationem cum sequi eveniet mollitia dicta. Minima aut harum aliquid in ab maiores atque magnam ut esse totam laudantium blanditiis nostrum est praesentium suscipit! Eum perspiciatis voluptas distinctio aspernatur quam obcaecati temporibus nihil nobis quisquam laborum ad quia labore quis nam facilis. Impedit vel expedita voluptatum quaerat perspiciatis modi quidem architecto dignissimos quisquam officiis odit voluptas amet est eius corporis accusantium doloribus. Quod voluptates nihil vel. Modi labore totam necessitatibus! Perspiciatis iusto aperiam aliquam tenetur deleniti provident veniam error ab porro sunt consectetur suscipit ad laboriosam libero nobis numquam eligendi harum est voluptates nemo atque commodi quae quas magnam ut obcaecati accusantium voluptas nisi enim veritatis maxime illum tempora quo accusamus architecto odio animi sint aspernatur cumque esse pariatur dolores? Eveniet quas vero ducimus aperiam ullam accusamus soluta. Aliquam consequatur omnis recusandae libero provident illo quam repellendus placeat. Quos facere sapiente natus incidunt molestias atque consectetur nobis eaque dolorem explicabo a possimus voluptatum quaerat vero pariatur expedita dolor magnam numquam cum animi iste ex reprehenderit saepe nisi ea quae eos sed tenetur enim est commodi obcaecati sint excepturi. Unde necessitatibus aspernatur esse porro itaque blanditiis quam amet quasi quae reiciendis quidem distinctio alias optio nisi quo sunt veniam nam harum accusamus eum error quibusdam commodi. Rem qui in sapiente totam earum beatae illum quae cum itaque molestiae obcaecati aperiam consequatur asperiores? Accusantium earum quae labore neque laborum vitae magni minus quos facere quasi! Expedita facilis porro possimus ab mollitia labore odio alias doloribus obcaecati commodi. Doloremque ad dolorem quas minus ratione esse nesciunt dolore rem aspernatur itaque dolores porro velit temporibus natus harum eaque culpa! Itaque enim labore aut quibusdam dignissimos aspernatur cumque veritatis totam laborum nihil aperiam consequatur magni molestiae nostrum quis assumenda dolore illum omnis molestias ipsum culpa tempore repudiandae minima qui odio neque incidunt suscipit quia cum ea ex inventore expedita mollitia. Esse repellat libero neque ducimus magnam rerum perferendis omnis dolor itaque vero totam incidunt aspernatur praesentium aliquid pariatur unde hic! Nisi modi quae voluptatibus vel atque vitae tempore unde soluta illo laborum esse laudantium quas nostrum magni sunt earum neque doloribus itaque ipsam nesciunt! Quae autem vel assumenda porro vitae corporis voluptas eius ab libero eos officiis iste culpa aperiam similique magni quam fuga minima impedit? Cupiditate laudantium nobis at eaque numquam incidunt eveniet voluptate aspernatur impedit qui perspiciatis nemo ab! Tempore perspiciatis cumque asperiores. Iusto quo atque facere obcaecati incidunt eius est iste totam rerum ratione consectetur molestiae quis mollitia eos nam amet odio voluptate accusantium officiis dolore debitis eligendi error ut nostrum voluptatem iure alias! Voluptatem vitae natus illo dolorem beatae dolores minus. Eius sint cumque perferendis reiciendis minima libero dolorum voluptatem mollitia ad aperiam molestiae eveniet corporis ut iusto doloremque itaque atque rerum non sed eum rem tempora ratione eaque temporibus exercitationem sit facilis natus explicabo at nihil nisi totam asperiores repudiandae quo dolores ipsam ipsa quaerat magni vero accusamus dolore laudantium enim cupiditate sunt delectus porro deleniti illo soluta voluptas sapiente! Odit blanditiis fugit dolore eum enim est veniam rem saepe quisquam earum molestias sint excepturi totam quas accusamus eligendi iste architecto omnis sed incidunt fugiat asperiores aspernatur quis corporis deleniti molestiae explicabo nesciunt officia tenetur voluptatem illo corrupti expedita dolorum quam facere cumque in pariatur mollitia qui autem. Iste quos dolorum dolores delectus eum ullam autem aspernatur minima ipsum deleniti veniam culpa quod architecto maxime ab numquam excepturi? Quia quis modi velit maxime porro ipsam consequatur mollitia quae vitae obcaecati tempore repellat molestiae officia. Debitis fugiat porro aspernatur quidem deserunt quas omnis sint necessitatibus distinctio blanditiis explicabo in sequi nesciunt vitae iusto aut corporis minus ipsa quae mollitia doloremque voluptatem odio neque delectus atque molestias magni laboriosam perferendis sed. Delectus in repudiandae aperiam saepe cum sapiente fugiat at veritatis atque iusto cupiditate aut ut ipsam quaerat quo repellendus necessitatibus tempora laudantium iste consectetur aliquam quos ipsa harum sit assumenda deleniti esse nulla voluptatibus possimus doloribus eveniet animi omnis nesciunt. Velit quam modi labore distinctio aut consectetur itaque corporis atque necessitatibus officiis adipisci hic quibusdam veniam alias reprehenderit. Voluptate cum placeat nihil iste nostrum repudiandae suscipit illo quo consequuntur nulla expedita provident quidem voluptatibus qui deserunt dolore sunt eaque aliquam minus pariatur cumque excepturi inventore ea in earum officiis quia ipsam distinctio fugiat esse dolor nesciunt itaque corporis libero ab laboriosam eveniet beatae fugit harum modi obcaecati voluptas. Voluptatum eum consectetur nobis quis ab nesciunt facilis sed nihil voluptatem numquam sit voluptates aperiam laudantium architecto porro harum dolor quas id modi dolores minima beatae recusandae atque cumque vitae veritatis cum corporis eaque eos ratione tenetur deserunt nostrum inventore rerum corrupti eius ipsum perferendis. Excepturi ipsum quam itaque voluptate dolore architecto voluptas hic dicta veritatis perferendis! Pariatur asperiores vel sint illo nam animi temporibus aut accusantium error sed eaque dolor quasi obcaecati nisi laborum optio dolorum! Cupiditate quis minima corporis debitis quasi atque aspernatur a velit earum unde rerum delectus illum perspiciatis. Voluptatem dolores rerum consequatur labore impedit dolorem deleniti dicta eos aspernatur quam harum culpa facere nostrum excepturi tempore totam sapiente ut magni. Quas saepe amet laudantium sint mollitia at neque nam debitis obcaecati earum beatae doloremque fuga nihil minima iste? Itaque aperiam corrupti? Tenetur culpa doloremque alias maxime iure tempora ipsam quisquam porro voluptate asperiores maiores ea ullam magni explicabo eum corrupti inventore sapiente ex aut cupiditate saepe molestias aperiam deserunt necessitatibus beatae placeat blanditiis sit. Voluptatibus in nostrum beatae sunt assumenda delectus id exercitationem eveniet veritatis velit dolorem laudantium porro minus. Corporis possimus laboriosam illo quia quas esse soluta est ullam omnis consequuntur? Unde ut nisi laborum ex ea vero quam dignissimos velit accusamus illo rerum eum libero? Eum alias repudiandae assumenda natus unde in adipisci commodi ipsa soluta porro blanditiis optio ab laboriosam est sit quos nostrum esse vero reprehenderit quae veniam praesentium cupiditate eveniet aperiam at. Commodi eaque veritatis doloribus beatae est eius asperiores unde aliquid fugiat inventore sed quisquam delectus voluptatem minima deleniti soluta a reprehenderit. Quo saepe ab dignissimos debitis nostrum sit vitae necessitatibus harum ad distinctio nam corporis illo voluptates neque animi. Deleniti velit ducimus similique eveniet pariatur adipisci saepe distinctio veniam eum accusamus. Voluptatum eum fugit dolorum id deleniti distinctio sint et nemo quasi illo perspiciatis reiciendis vel a similique culpa suscipit eveniet repellat provident totam tenetur ipsa consequuntur facilis fugiat quibusdam porro est veritatis delectus quis corporis. Voluptatem natus tempore dolor nemo quis sint beatae minus voluptatibus sunt quidem atque quia harum quasi quae id iste nulla impedit quo quam in optio quos necessitatibus aliquid ipsa quisquam! Saepe eaque aliquid porro facilis mollitia ea repudiandae amet accusamus officia culpa. Quidem sunt veritatis magnam autem ipsa dolore rem quaerat quasi magni praesentium aliquam molestias ipsum iure ullam dignissimos. Reiciendis quos a dicta suscipit facilis cupiditate nemo impedit iste totam ut minus nisi rem facere tenetur iusto. Hic accusamus consequuntur quaerat. Et repellat assumenda nostrum voluptas repellendus temporibus ipsum voluptatem quibusdam accusantium illum expedita eligendi autem culpa minima quis officia cumque aspernatur nisi officiis inventore non nam quod sapiente excepturi quia possimus aliquid aliquam repudiandae reiciendis animi tenetur vero veritatis neque quo at ipsa asperiores itaque unde illo suscipit dolores adipisci laborum necessitatibus a dolor mollitia. Rem animi commodi explicabo ab. Nam at modi fugiat numquam sapiente repudiandae quaerat voluptates in eius perspiciatis officia impedit libero asperiores pariatur dolor harum animi labore reprehenderit unde vero cumque praesentium aspernatur deserunt reiciendis atque. Reprehenderit amet vitae in pariatur maxime numquam earum fugiat aperiam officia suscipit. Rerum vitae dolor voluptatem assumenda maxime rem repudiandae sint qui fugiat. Incidunt molestias optio ullam quaerat aliquam totam recusandae alias molestiae explicabo distinctio voluptates illum quis vitae nemo cupiditate nostrum facilis tempora dignissimos perspiciatis facere ratione cum velit dolore minima labore? Vero incidunt consequatur iure quas repellat harum quidem repudiandae rem inventore in iste molestiae adipisci neque maiores commodi dolorem corporis modi aliquid nihil optio consequuntur laboriosam sequi quis at doloribus magnam eius sed obcaecati ipsa consectetur perspiciatis qui cupiditate distinctio labore quibusdam alias pariatur. Sint consequuntur sit quas culpa nostrum alias animi blanditiis eius expedita deleniti quod earum magni ullam distinctio ex ratione et atque magnam? Officiis illo illum est aspernatur explicabo aperiam quisquam delectus obcaecati iure nobis rem quam dolorum ipsum nesciunt voluptatibus aliquam excepturi molestiae saepe eos perferendis. Ad architecto non veritatis! Voluptatibus ea magni quisquam aliquid ullam nam assumenda nisi facilis adipisci aperiam officiis incidunt sed quos beatae consectetur esse a temporibus tempore neque iste aut. Inventore nisi officiis ullam explicabo recusandae soluta ipsum animi consectetur ad aliquid obcaecati necessitatibus reprehenderit ratione nesciunt assumenda earum culpa minus eius magnam fugiat! Earum ducimus voluptate incidunt est tenetur quam consequatur aspernatur qui esse quos veritatis ipsa iusto facilis nemo voluptates voluptatem magnam doloribus repellendus facere cum culpa animi accusamus quis velit non numquam nulla vero cumque hic commodi iste odio nihil molestias tempora harum possimus similique laboriosam sed ipsum quia! Dicta repudiandae veniam eum illo nostrum repellat autem necessitatibus rerum ea incidunt eius voluptates fugiat sit asperiores nesciunt similique voluptatibus molestiae. Quia error nisi neque voluptatem rem suscipit quae assumenda explicabo alias quos distinctio natus repellendus sapiente numquam ducimus delectus voluptate illum nihil consequatur praesentium sequi magni officiis perferendis maxime id eius aut modi adipisci dolor libero molestias possimus placeat mollitia odit ut repudiandae dolorum expedita recusandae doloribus cupiditate dicta enim! Tempora omnis quaerat eos cupiditate nostrum ex natus ducimus ea tempore minus debitis repellendus laboriosam iure modi molestiae fugit distinctio voluptatum numquam laborum beatae ipsum officia iste quis esse quas velit recusandae asperiores quasi labore iusto. Odit nihil magnam? Itaque temporibus et ab ad tempora atque officiis eius nulla nemo necessitatibus maxime porro mollitia quidem suscipit dignissimos illum voluptatum voluptas possimus ducimus corporis non maiores enim voluptatibus consectetur in iure id pariatur excepturi optio voluptates cum rem fugiat vero ea amet ratione delectus! Doloremque ab dicta molestiae voluptatem autem error earum ex consequatur nulla provident commodi cum et accusantium. Nam ullam consequuntur illo aspernatur nesciunt voluptate debitis recusandae ab blanditiis iusto quia deserunt ipsa mollitia hic atque eaque ea tempore sit optio veritatis repudiandae quae quisquam quod reiciendis totam incidunt cupiditate harum magnam aperiam amet explicabo vitae voluptas necessitatibus possimus inventore ratione vel! Natus officia ad quasi quod earum! Nesciunt at omnis dolorem laboriosam deleniti rerum tempore fugiat obcaecati sapiente vero quibusdam expedita reprehenderit maxime beatae velit modi eius reiciendis quas totam et ipsum quis sit corporis minus recusandae quisquam debitis ad fugit distinctio amet nemo atque sed illo iste ab commodi quasi! A ducimus illo eveniet ullam rerum incidunt iusto possimus inventore aliquam ipsum reprehenderit officia autem suscipit quas deleniti pariatur temporibus animi doloremque excepturi accusamus consequatur at hic id dolores rem asperiores ut libero sapiente quidem earum quis commodi voluptas perferendis veniam blanditiis delectus praesentium optio molestiae provident tempora non fugiat omnis officiis beatae consectetur aspernatur ratione totam cum dolorem laboriosam! Earum soluta praesentium esse non minima similique quibusdam optio numquam est nemo rem sequi excepturi voluptatibus architecto nihil sit reiciendis consequatur. Laboriosam tenetur provident eius facilis soluta possimus deserunt unde officiis esse minus cupiditate sed consequatur illum nobis nihil voluptas obcaecati molestias nulla quos earum pariatur aperiam voluptate animi sapiente natus libero eveniet quam ratione reiciendis architecto necessitatibus ipsam rem id! Id in aspernatur quasi provident quidem adipisci ab eligendi similique accusantium cum quos nam deserunt error voluptatum eveniet soluta laborum. Sit mollitia cum vero deserunt dicta quasi placeat officia alias fugit. Perspiciatis magnam quibusdam accusantium voluptas repellat at ut inventore provident laboriosam veniam ab commodi perferendis qui atque est suscipit tempore itaque debitis ullam in saepe fugit adipisci quis vel quae. Ipsam in nulla dolorem repellendus beatae dicta distinctio culpa similique eum quas aut dolore voluptas id impedit magni. Adipisci in accusantium dolorem quam consectetur eius quidem ab asperiores incidunt rerum sit praesentium provident ut voluptatem et perferendis quo nemo nobis quas veritatis molestiae fuga eum necessitatibus quaerat esse neque doloremque voluptate repellat a! Reprehenderit consequuntur ea quo provident error sit aperiam odio dignissimos autem vel dolor officia expedita voluptate optio debitis quod eligendi. Quo repellat dolorem voluptates impedit error ex quae a provident pariatur quas quia magni incidunt quam consequuntur fugit eveniet illo iure qui laborum beatae quis sed dolore eum enim nesciunt dolorum labore ipsa tenetur odio sapiente harum deleniti ut eos. Nostrum porro quo expedita sequi repudiandae explicabo illo saepe quam animi commodi aut neque nihil et ex aspernatur accusantium eos minus consectetur voluptas reprehenderit. Harum excepturi minima dolorem vitae non fugiat deserunt nostrum et quis provident necessitatibus ratione assumenda velit consequatur cum inventore ad doloremque iusto sed ea! Odio quasi possimus cupiditate quis molestiae recusandae necessitatibus vitae fuga. Ab ipsam maiores quos perspiciatis vel similique aperiam consequatur reprehenderit quibusdam quam aliquid quidem mollitia accusamus obcaecati cumque pariatur veritatis dignissimos in error eligendi doloribus modi nulla maxime numquam exercitationem omnis rerum fugiat. Sunt quis optio hic facilis a obcaecati quod tempore praesentium porro in facere ut amet animi laborum numquam architecto quas aspernatur deleniti veniam nesciunt sed commodi rerum aperiam quos est libero dicta quia placeat odio cumque. Facilis laborum iure similique est minima adipisci totam! Dignissimos hic nemo explicabo consectetur iusto quod distinctio id voluptatem praesentium repellat quibusdam laborum est animi maxime at numquam quae ducimus nisi perspiciatis eaque delectus nesciunt illum pariatur quisquam dolorem deleniti necessitatibus minima quaerat harum. Iusto ab magnam ratione sunt modi aliquam praesentium quis ea labore quo eius architecto corporis ipsum quisquam neque perspiciatis harum voluptatum inventore iste sint ut voluptatem dignissimos libero assumenda molestias placeat possimus repudiandae exercitationem aspernatur asperiores consequuntur non nemo perferendis. Alias nemo explicabo ratione facere perspiciatis quaerat sit ab tempore iste distinctio quod deleniti quidem! Voluptate similique adipisci non velit reiciendis esse molestias atque in quis rem soluta expedita magni voluptas fuga error minus rerum! Eligendi accusamus aliquam inventore quasi perferendis non provident voluptas pariatur magnam earum est illo rerum et. Temporibus perferendis doloribus assumenda ratione architecto eius ab ipsa nostrum totam ex. Ab eum aliquid recusandae nisi reprehenderit sunt repellendus cupiditate commodi eveniet doloremque. Accusantium minus sequi eum labore quod eaque cupiditate provident molestias accusamus eveniet magnam totam dicta deserunt debitis voluptatum aliquam velit suscipit adipisci inventore assumenda ut excepturi reprehenderit laudantium. Omnis doloribus maiores adipisci rem sapiente nam esse ipsum ipsam cumque neque expedita tempore ullam accusamus illum unde. Odio quas placeat tempora expedita quo excepturi hic exercitationem iusto doloremque nihil odit recusandae aspernatur soluta ipsam ut quasi commodi sunt ullam laudantium deserunt. Hic adipisci obcaecati itaque voluptatum praesentium nam officia tenetur dolorum ullam dolor. Ea iure perspiciatis incidunt aliquid est quisquam similique delectus ratione ipsa saepe dignissimos modi velit debitis minus quas nobis accusantium voluptatem esse dolores eos deserunt ullam officia et. magnam ex id!
    </div></div>

body{
    
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    transform-origin:50% 100%;
    transform:perspective(300px) rotateX(20deg);
}
html{
    color:yellow;
    background:black;
}
@keyframes autoscroll{
    to{
        margin-top:-50000px;
    }    
}

</style>

Pure CSS Star Wars opening crawl

Random HTML Example Codes: