PROWAREtech
CSS: Parallax Effect Footer
A web page footer with a parallax effect.
This article shows how easy it is to create a footer with a parallax effect. This only requires CSS and it is compatible with mobile browsers which usually do not like a true parallax effect, which this is not.
This is all accomplished through making the footer have the CSS property position: fixed;.
Notice that IE6 does not support a fixed position so this will not be possible with this browser.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
<title>Parallax Effect Footer</title>
<style>
*, *::before, *::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body,
main {
background-color: #fcd;
color: #966;
}
div#container {
position: relative;
width: 100%;
font-family: sans-serif;
min-height: 100%;
}
header,
footer {
background-color: #696;
color: #464;
}
a {
color: inherit;
}
header {
line-height: 100px;
height: 100px;
}
header h1 {
margin: 0;
padding: 0 0 0 10px;
}
main {
position: relative;
padding: 10px;
margin: 0 0 400px 0; /* bottom margin should be equal to footer height */
}
footer {
position: fixed;
width: 100%;
bottom: 0;
height: 400px; /* footer height */
}
footer div {
position: absolute;
width: 100%;
padding: 10px;
}
footer div:nth-child(1) {
top: 0;
left: 50%;
margin-left: -50%;
text-align: center;
}
footer div:nth-child(1) a {
display: inline-block;
padding: 50px 5%;
font-size: 4em;
}
footer div:nth-child(2) {
bottom: 0;
text-align: right;
}
</style>
</head>
<body>
<div id="container">
<header>
<h1>Acme</h1>
</header>
<footer>
<div>
<a href="#"><b class="fab fa-instagram"></b></a>
<a href="#"><b class="fab fa-twitter"></b></a>
<a href="#"><b class="fab fa-linkedin-in"></b></a>
<a href="#"><b class="fab fa-facebook-f"></b></a>
</div>
<div>copyright © Acme</p>
</footer>
<main>
<h1>Lorem, ipsum.</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Beatae, quo molestias sunt fugit ratione numquam dolor rem expedita assumenda minima. Tempore nesciunt autem nisi reprehenderit eveniet omnis cumque aliquid cupiditate. Odio eius explicabo assumenda distinctio consequuntur eaque et sed? Reiciendis eaque sequi veritatis placeat? Omnis quibusdam dolores voluptatibus harum. Voluptatibus dicta fugiat deserunt tempora magni autem, voluptas aperiam consequuntur odit hic quibusdam dignissimos facilis odio iusto quisquam, vel porro harum ipsam voluptatum quod. Nobis dignissimos possimus enim modi ipsam, deserunt dicta! Exercitationem fugiat doloremque magnam consequatur, a, consequuntur eos molestiae aperiam corporis ad praesentium vel ex hic, quis ipsum laborum.</p>
<p>Temporibus, inventore. Facere nemo sunt aut explicabo aliquam suscipit, consequatur doloribus aspernatur perspiciatis harum repellendus labore! Temporibus mollitia omnis, perferendis totam repellat ratione id saepe, incidunt quae eius velit autem suscipit consequatur labore exercitationem vel. Dolorum dolore cum quis earum ex similique voluptas quae excepturi fugiat quaerat. Quisquam animi provident temporibus sequi earum pariatur molestias fugiat. Illo saepe incidunt ipsum nobis consectetur magnam, ducimus asperiores culpa fuga sapiente unde quisquam. Saepe optio nesciunt, recusandae animi illum deleniti et nihil odio, omnis quibusdam impedit! Facilis unde atque illo voluptatem aperiam eos quos iusto vero veniam delectus eum ullam consectetur, nisi deleniti?</p>
<p>In doloribus ullam, cupiditate neque, at, quam dicta ab dignissimos quo eos dolorum sequi. Expedita provident laudantium quasi dolorum tempora excepturi, necessitatibus animi. Eius maiores nisi odio laudantium nostrum, omnis deserunt ipsum. Aut tempore voluptatum sit pariatur doloribus dignissimos quos. Dolore mollitia eligendi quas consequuntur adipisci, labore cumque vitae tenetur, similique sapiente porro in eum? Dolorum accusamus ipsam mollitia porro earum necessitatibus totam numquam dignissimos. Debitis nostrum obcaecati, molestias aut natus minima deleniti ex dicta eum omnis numquam sequi esse iusto fugiat, at sint repellat deserunt, tempora commodi accusamus blanditiis sapiente modi? Suscipit labore, facere omnis accusantium repellat tempore delectus?</p>
<p>Distinctio iusto iure ad quidem exercitationem fuga perspiciatis eius inventore quod obcaecati, in omnis, explicabo asperiores vero quam voluptate deleniti consequatur error amet at ab! Alias harum velit veniam cumque distinctio tempore consequatur libero assumenda modi itaque molestiae quis dolore autem tempora dolorem ad labore sed, eaque provident facilis ex eveniet. Quibusdam totam esse blanditiis ad unde nostrum eos minima doloremque laborum, maiores asperiores accusantium illum quo a quas quasi sequi suscipit consectetur, vitae dolorum ab. Ipsum quam est facere provident, ab perferendis necessitatibus, odit saepe, doloribus aliquid sequi soluta vitae ratione debitis corrupti! Maxime, laudantium. Odio sit numquam neque?</p>
<p>Repellat molestias accusamus, quas numquam, rerum harum, excepturi delectus assumenda nisi autem officiis iure quam! Dignissimos recusandae placeat, numquam asperiores voluptate nostrum atque, quisquam cum, provident earum facilis accusamus pariatur odit quae officiis dolorum iste. Ipsa, hic praesentium dolor corrupti asperiores repellendus fuga dolorem necessitatibus molestiae, officiis accusantium veniam reprehenderit, adipisci laboriosam. Quisquam, eligendi. Qui nesciunt, non dolor quisquam nulla maiores soluta corporis eligendi consectetur tempora est quas iusto cumque eaque itaque! Dicta perferendis reprehenderit quam! Officiis sapiente soluta dolorem accusantium, nobis illo et cupiditate labore fuga, dolores consequuntur eius voluptas optio quam unde. Enim sequi ex optio quod voluptatibus?</p>
<p>Quibusdam tenetur, id adipisci velit praesentium veniam alias quaerat dignissimos suscipit recusandae delectus ab incidunt harum officiis quae quos non, vel, voluptas eveniet. Corporis amet totam nobis minima dolorum dicta earum sequi soluta fugiat a perferendis neque, iusto voluptas quos maxime officia cupiditate id beatae aliquam! Cum ad deleniti temporibus excepturi impedit ducimus officiis, dolor obcaecati, sint consequuntur voluptatum harum consequatur recusandae deserunt. Voluptates earum eos perspiciatis tenetur facere, corrupti quae sunt et ea aspernatur laboriosam officia vel repellendus, laborum fugit fuga doloremque sapiente nemo minima. Tenetur porro ipsum quo natus libero reprehenderit, sint in exercitationem quam asperiores veritatis dolore.</p>
<p>Perspiciatis, a, totam asperiores alias pariatur velit nesciunt doloribus id dignissimos iste praesentium quasi beatae accusantium, voluptatum consectetur quibusdam laudantium fuga rem quae sequi adipisci! Voluptatibus, dolorum? Eius nemo cumque distinctio, consectetur iusto sit minus aliquid sunt neque quia dolorem reiciendis suscipit voluptates quo sint, ad veritatis eligendi deleniti vel quaerat, facilis officia. Omnis atque saepe molestias nihil voluptatibus illo possimus suscipit? Voluptatem modi ipsum qui, illo ipsa laboriosam molestiae voluptates iste? Placeat dicta eligendi eum ipsum doloribus quod, assumenda dolorem earum, delectus in at voluptatem id facere quasi quisquam aut quis sint saepe. Quos dignissimos ullam consequuntur cupiditate minima.</p>
<p>Odio quam, at id nostrum reprehenderit eveniet distinctio, tempora aspernatur rerum nihil non sed recusandae tempore temporibus repudiandae et natus placeat eius voluptatibus dolorum eum. Nihil corporis rerum repudiandae libero consequatur quaerat sunt accusantium quod ipsum, ratione fugit nisi animi dignissimos dolorem culpa, consequuntur error veritatis maiores dolor perspiciatis. Quasi, sed consequuntur! Minima repellat vero quisquam temporibus blanditiis ex laborum doloribus maxime aperiam! Adipisci ullam provident tempore quas vitae deserunt laboriosam hic! Illum recusandae cupiditate quo? Hic maxime rerum officiis tempore perferendis corporis voluptatibus nisi ducimus iure architecto, cumque, ullam corrupti provident inventore eius ipsum? Architecto harum magni impedit repudiandae!</p>
<p>Molestias sunt culpa beatae tempora animi cupiditate quam obcaecati velit laboriosam ex eligendi aliquid quasi, neque, architecto eos inventore porro alias dolorum quibusdam voluptatibus doloremque. Quaerat dolor voluptatum corporis iste soluta neque accusamus doloribus itaque, culpa quo, fugiat nemo adipisci? Temporibus, laborum velit fuga ratione doloribus voluptate nesciunt nisi et totam! Eligendi, voluptate omnis exercitationem minima tenetur minus doloribus, sunt aliquam libero distinctio natus perspiciatis cum dignissimos sed modi, dolor ullam fuga eos pariatur odit aperiam. Aliquid explicabo deserunt eligendi esse culpa dignissimos, quidem veritatis sed quas maxime consectetur dolore laborum blanditiis assumenda perspiciatis ad amet nesciunt illo eveniet magnam?</p>
<p>Dolor reiciendis, inventore odio dolorem aliquid cum consequatur quas similique sed sunt optio nam saepe id possimus pariatur atque magnam omnis earum placeat numquam officia repellendus temporibus ullam laudantium. Inventore quae ut odit, quos delectus autem quis. Voluptas ullam error vel debitis mollitia ratione libero facilis culpa! Obcaecati impedit explicabo eos, eligendi dicta fugiat aspernatur dolore nisi? Sunt dignissimos perferendis, cum incidunt dolore illum, impedit rerum soluta, inventore asperiores obcaecati recusandae deserunt quo iure reiciendis non earum mollitia sequi tempora doloribus accusantium eos magni assumenda. Ullam sapiente, doloribus debitis atque nobis nam, numquam iste quo eum molestiae consequuntur, distinctio deserunt.</p>
<p>Corporis inventore omnis expedita officia facilis et, consequuntur id saepe quod incidunt iusto, ducimus cum esse voluptates odit nesciunt quasi optio quas doloremque ut soluta officiis aut delectus. Quae esse iure perspiciatis, commodi voluptates voluptatum porro aliquam cumque dignissimos ipsa quisquam est debitis corporis a nemo alias, libero fugiat beatae pariatur accusantium rem deserunt eos quam quia. Perspiciatis doloremque magnam quae quaerat totam provident aspernatur, molestiae similique accusamus illo voluptate ipsam voluptatum vel autem? Vero, vel? Nobis recusandae eius mollitia inventore non corporis deleniti dicta rerum impedit numquam laudantium modi minus molestiae harum consectetur alias, ea iste quibusdam similique quis.</p>
<p>In unde sequi laudantium iure illo exercitationem nisi accusantium incidunt voluptatibus inventore. Quae saepe tempore exercitationem perspiciatis veniam esse autem similique excepturi animi eveniet nam distinctio recusandae consectetur explicabo magni ipsam, omnis doloribus perferendis! Quasi commodi beatae nobis error cum, accusantium dignissimos ipsa, a placeat nemo, culpa repudiandae dolorum consequuntur. Quibusdam voluptatum aut laboriosam molestiae excepturi aliquam nihil. Sunt rem sequi autem praesentium at molestias veniam optio excepturi officia! Similique ratione, autem saepe amet veritatis labore animi sapiente molestias voluptatem nulla totam, nam voluptas atque quam placeat aliquid omnis fugiat? Eligendi velit hic minus voluptatum accusantium sint in enim recusandae!</p>
<p>Aperiam suscipit facilis beatae corrupti molestias nihil eaque, odio fugiat error blanditiis mollitia hic praesentium repellat, sunt optio, porro nostrum odit tenetur laborum. Aperiam ab in officia, cumque culpa repudiandae aut similique laudantium unde reprehenderit quod accusantium, earum voluptatem voluptate sed, dicta illo explicabo doloremque atque officiis magnam ullam accusamus odio quibusdam. Suscipit distinctio sunt minus temporibus officiis sint, harum omnis odio! Numquam, accusantium! Consequatur libero quisquam blanditiis placeat, animi architecto? Sed est beatae quas incidunt vitae. Sit expedita, ab adipisci quas nisi distinctio illum vero mollitia reprehenderit molestias placeat dolores, corporis consectetur. Doloremque voluptas quas deleniti, voluptatum harum dignissimos!</p>
<p>Laudantium veritatis animi quam vero? Ex illo assumenda, blanditiis accusantium sapiente nostrum dicta asperiores cupiditate unde, quis illum deleniti nulla consectetur vitae non magnam fugiat autem tempora nam, placeat harum id omnis? At velit non praesentium, doloribus explicabo, sequi eaque, reiciendis nemo debitis possimus natus? Facere velit aspernatur sunt delectus hic eum expedita nisi laborum ipsam cupiditate pariatur nobis, recusandae alias corrupti distinctio non quidem amet aliquam ea est accusantium totam exercitationem unde saepe. Delectus officiis repellat corporis sint quam. Iste harum eos, exercitationem asperiores repellat assumenda nesciunt laboriosam ullam officia ea aliquid officiis corrupti possimus, illo deleniti, saepe minus.</p>
<p>Ducimus ex fugiat molestiae fuga minima magni officiis quidem unde quaerat libero, dolores iure! Eligendi vitae cum consequuntur, quasi voluptatum ratione dolorem saepe enim ad. Iure, reprehenderit consequuntur beatae incidunt mollitia repellendus error ipsa facere earum ullam eligendi praesentium qui obcaecati. Soluta voluptatum iure debitis officiis ipsum totam doloremque, nulla ullam. Provident recusandae iste ad corporis natus sint dolores distinctio ea exercitationem culpa, aut perspiciatis voluptatibus sit, eaque nemo sed! Consequuntur, nostrum harum? Corrupti nam tenetur a fugit pariatur accusamus adipisci cum dolorum molestias eum! Minus provident reiciendis accusamus. Officia tempora iste numquam accusamus tempore earum quo omnis dolorem error.</p>
<p>Commodi optio ad obcaecati sint nemo nam, similique laudantium. Tenetur, vero odio? Doloribus ut mollitia ipsa perspiciatis iusto. Necessitatibus ad recusandae enim atque, rem officia voluptatem labore obcaecati consequatur, praesentium adipisci repellat vel reprehenderit eius ducimus debitis esse corrupti? Nostrum animi atque itaque in voluptatum repudiandae repellendus minima quos aliquam incidunt repellat accusantium dignissimos, quas architecto, dolore fugiat ad fugit eaque debitis a veniam aliquid? Eius debitis itaque placeat accusantium ex cum sapiente deleniti harum maxime! Quod amet architecto illo sapiente dolorum temporibus esse consequatur ea fuga, dolor ratione odit eum magnam itaque aperiam assumenda maiores vero explicabo earum beatae!</p>
<p>Earum tenetur repellat adipisci veritatis ipsa nesciunt eos dignissimos totam, vero sunt at qui fugiat natus dolor aut illo? Sint modi, magni soluta totam quibusdam illum ipsam velit reprehenderit, blanditiis exercitationem ullam repellat, omnis quasi itaque! Earum harum, explicabo nostrum rem natus quasi. Aliquam non corrupti expedita nostrum officia odio voluptas debitis, alias repellendus ipsam eveniet a quisquam, fugiat iure rerum distinctio voluptatum sequi doloremque dolor eius qui dignissimos! Aliquid, error ut delectus voluptatem, iste ex atque placeat sequi ipsum eligendi voluptatum soluta id aperiam ipsam. Aspernatur, mollitia provident. Eaque tenetur maxime reprehenderit iste. Commodi, iusto accusantium. Quas, omnis! Molestias.</p>
<p>Culpa, quo! Magnam voluptate recusandae velit qui cupiditate, repellat quae molestiae vitae expedita esse ipsam animi nobis similique natus enim modi excepturi. Expedita esse asperiores corrupti assumenda debitis voluptas accusantium repellendus reiciendis ipsa provident voluptatibus non sapiente deleniti, molestias dolores illum sed at? Cum labore hic maxime odit obcaecati natus sit quas, veniam dolore sequi quod autem nisi tempora? Iste fugit vel, nulla consectetur inventore nemo minus labore rem impedit beatae, accusantium doloribus eum ducimus at explicabo minima necessitatibus. Totam inventore esse praesentium rem possimus deserunt vitae officiis minus odit qui. Dicta tenetur ex nisi velit nulla asperiores reprehenderit eligendi.</p>
<p>Ut eius sapiente perferendis. Assumenda dignissimos incidunt inventore repudiandae officia unde esse maxime ex cum, harum quia explicabo porro quas exercitationem deserunt illum debitis distinctio, voluptas sit tempore voluptatibus. Natus quam deserunt ad sit, neque delectus reiciendis aut tenetur fugit sunt accusamus illo assumenda, ab deleniti iure! Excepturi nesciunt, ut culpa vitae dolores deleniti illum quis debitis obcaecati ab! Saepe vitae at sapiente, fugit ipsa tempore enim obcaecati, dignissimos qui eum corrupti atque ea ipsam dolor earum asperiores amet eveniet pariatur blanditiis libero, quibusdam expedita est quia beatae. Soluta reprehenderit ratione fugiat inventore culpa accusamus libero expedita quidem sint quos.</p>
<p>Accusantium alias veritatis amet aliquid praesentium ratione labore repellat, illum illo, atque doloremque odit tenetur sit, sequi blanditiis in? Officiis ea reprehenderit, eligendi officia numquam praesentium maiores voluptatum esse ex aspernatur nihil dolorem perferendis totam quia modi, harum quis porro, quam quidem laudantium recusandae impedit corporis eos! Pariatur, facere alias. Quia sint amet sunt debitis, laborum iusto accusamus tempora eum eius fuga tempore repellat harum, eaque delectus magnam non magni minima nostrum porro aliquam voluptatibus temporibus dolorum aut perspiciatis. Placeat, earum, quis delectus recusandae, sint tempora quia mollitia hic error fuga aliquid? Eius blanditiis doloremque quibusdam illo labore rerum ea?</p>
<p>Quasi assumenda at quae dolorem minima? Nulla laboriosam est omnis ipsa voluptatibus, odit minus ipsam sed delectus veritatis, a sequi necessitatibus, molestias repellat quis impedit ab at voluptatum. Deserunt nam perferendis commodi voluptate, dolore quas sint animi distinctio consectetur laborum, itaque earum dolor fugit adipisci. Ratione amet sed explicabo laudantium quia quis voluptates libero ex esse incidunt, temporibus accusantium tenetur nobis quasi, in, aspernatur quae iure velit neque maiores nemo animi dolore odit aliquid. Aut doloremque est libero nam qui soluta eveniet, quis delectus provident voluptas ex perferendis esse. Rem placeat consequatur maiores? Rerum, inventore? Quae iure at omnis? Obcaecati.</p>
<p>Velit, ea nisi cum voluptatem similique perspiciatis? Aspernatur possimus ad fugiat. Asperiores aut possimus deleniti aliquam numquam quis quia, ipsum laborum, facilis qui itaque similique eligendi ex eius eum quae tempore cumque reprehenderit? Consequuntur velit voluptatibus perspiciatis dicta officia quae quod doloribus voluptatum atque iste labore corporis, quaerat asperiores nostrum, excepturi esse magni delectus quis. Iure repellat odit a ratione optio repudiandae facilis ut laudantium officia suscipit quisquam cum perferendis sequi explicabo veritatis nisi, magnam ullam adipisci vero necessitatibus! Delectus illum eos quo cum possimus! Dignissimos suscipit, molestiae, aperiam saepe ipsum unde facilis officiis, explicabo quos tempore blanditiis quidem non.</p>
<p>Cumque reprehenderit quisquam esse non ea, eveniet commodi perferendis modi ipsum nulla excepturi asperiores facere assumenda eligendi expedita dicta hic fugiat consequuntur nam saepe voluptate est. Eius ea doloribus similique magni corrupti quod reprehenderit ut consectetur libero. Iste sunt est dicta beatae inventore incidunt doloremque sapiente provident voluptatibus esse neque harum perferendis aperiam ratione ut reprehenderit voluptas sequi, expedita illo alias at exercitationem quae quidem cupiditate! Minus eos laboriosam incidunt, repellendus perspiciatis reprehenderit praesentium reiciendis, at neque placeat sint impedit magni. Commodi, nam consequatur odio doloribus ipsam iure maiores at ipsa odit mollitia dignissimos consectetur nulla maxime magnam quos tenetur?</p>
<p>Tenetur possimus modi illum fuga ullam reprehenderit, iusto nostrum voluptatem culpa alias totam doloremque dolores similique ut, quaerat itaque. Iste aperiam asperiores, ratione accusamus ea tempora laborum explicabo quasi voluptatibus veniam temporibus, harum cupiditate provident sunt rem! Porro ad tempora non dolor quod doloremque. Expedita, quisquam dolore et deleniti vel enim perspiciatis maxime molestiae, repudiandae dignissimos quasi, laborum similique culpa est eligendi incidunt harum rerum eum praesentium excepturi? Vitae numquam cum quod? Ex pariatur officiis soluta nesciunt inventore cum commodi eum quidem minus perspiciatis possimus repellendus quod nisi vitae asperiores ipsam dicta laborum, dolorem praesentium iusto beatae sint, velit ratione.</p>
<p>Voluptatibus iure, animi, aliquam placeat sapiente tempora veritatis minima sint odit similique culpa totam. Saepe alias optio neque nisi voluptatum harum temporibus totam quia nobis minus deleniti omnis quo repellat, dolores sunt magni commodi placeat assumenda illum iste blanditiis. Consectetur iusto esse itaque asperiores reprehenderit dicta optio quisquam doloremque sequi excepturi totam assumenda, at consequuntur facere iste modi facilis dolor? Minus doloribus saepe ea porro dolore, molestiae sed! Architecto facilis cupiditate voluptate dicta eveniet perspiciatis quisquam? Rem dolorem placeat ut vero aspernatur optio illum nostrum nobis mollitia nesciunt autem alias voluptatum, molestias quaerat non officiis illo vel quisquam in. Sit!</p>
</main>
</div>
</body>
</html>Coding Video
Comment
