CSS3 Parallax

Simple parallax using css3

by Shishir Morshed

HTML

<section>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam dolor non ipsam dignissimos voluptatibus voluptas animi, voluptatum voluptate consequuntur beatae? Corrupti laudantium ad et vitae quos. Neque ullam labore, quisquam debitis perferendis vel atque ea odit quidem dignissimos qui laboriosam cum quod alias eius mollitia delectus corporis, tenetur fugit quam! Corporis natus alias laboriosam minima nesciunt totam vel perferendis quis praesentium blanditiis nobis at laudantium doloribus necessitatibus odio culpa voluptatibus nulla, incidunt fugit deserunt repellat. Voluptate quam quis, voluptatum, modi eligendi libero eaque recusandae excepturi placeat adipisci labore numquam voluptatem aliquam cum sunt nihil, laudantium, officia veniam illo tenetur nemo deserunt. Velit repudiandae autem, magnam deserunt et sapiente voluptatibus iste sint minima eos maxime, nihil maiores voluptates? Ratione earum laboriosam sed! Ex voluptas vel mollitia ut recusandae, alias hic odio commodi soluta sunt! Tempore fuga ratione et eligendi vero, ullam consequatur dicta. Praesentium expedita omnis odio impedit repellat! Odio quo quasi amet minima nesciunt aliquid laudantium deleniti, expedita suscipit ducimus voluptatum fugiat magni, ab modi praesentium totam! Cum voluptatem minus quia optio consectetur nostrum distinctio aliquid, magnam. Quisquam incidunt ab, praesentium rerum fugiat, dolores id atque, doloribus minima earum, magni quas sint! Dolores cum fuga nisi, quibusdam commodi quisquam error amet itaque doloremque accusantium corporis iusto molestias incidunt officia voluptatum doloribus earum fugit nesciunt odio labore laudantium ab debitis repellendus magnam. Harum eius corporis perspiciatis repudiandae repellat, autem expedita nisi, illum incidunt officiis eum pariatur porro neque minus at ab ipsa, soluta excepturi, reiciendis ratione recusandae placeat eveniet. Tempora ipsa, eveniet numquam nam cumque debitis nostrum suscipit,...

CSS

html,body { width: 100%; height: 100%; overflow: hidden; }
        body { overflow-Y: auto; transform-style: preserve-3d; perspective: 1px;}
        * { margin: 0; padding: 0;}
        body { background: #fafafa; }
        img { width: 100%; }
        section { margin: 25px 0; }
        .parallax { height: 500px; overflow: hidden; display: flex; align-items: center; }
        .parallax figure {  width: 100%; transform: translateZ(-1px) scale(2); transform-style: preserve-3d; }