Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                  <div id="container">
    <div id="parallax"></div>

    <div id="text">
      <img src="https://images.unsplash.com/photo-1602918955248-d1bbfcbfae38?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" />
      <h3>Parallax Effect</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque soluta rerum quam consequatur libero eveniet ratione quisquam repellat optio. Ducimus.</p>
      <a href="https://fb.com/amrsubzero" target="_blank">By Amr SubZero</a>
    </div>
  </div>

<div id="content">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi eveniet, ipsam quo deleniti deserunt esse repellat tenetur voluptas facere quis quibusdam et numquam id expedita nulla, sunt aliquam! Modi quo deserunt, voluptates necessitatibus at fuga ipsum aperiam repellendus tenetur aliquam voluptatum repudiandae ipsam, earum tempora, nulla soluta, saepe fugiat mollitia!</p>
	<p>Qui incidunt ratione pariatur nisi earum animi, molestiae vero nobis, quibusdam quos illum neque, ex assumenda quidem quis quae ducimus adipisci possimus at a dignissimos commodi. Tenetur ab, qui quod ex aliquam, dolore, animi illum et molestias cupiditate ipsum ullam? Fugiat rerum, iste quod aperiam minus consequatur minima alias sapiente!</p>
	<p>Quaerat delectus sed eos, maxime temporibus. Laboriosam, debitis, error. Dicta, nesciunt, hic. Nobis incidunt dolorum tenetur iusto minima repudiandae eligendi eum doloribus quas error, totam laboriosam temporibus tempora provident, molestiae suscipit exercitationem aliquid eaque id magni odit expedita facere repellendus porro a. Perspiciatis quae eum, harum voluptate natus dicta aspernatur.</p>
	<p>Quia natus vitae voluptatibus optio harum rerum assumenda nobis quam corporis, repellat quibusdam iusto possimus reprehenderit? Rem voluptas, architecto ea fuga voluptatum, repudiandae animi a fugiat quam earum commodi harum eum cupiditate expedita voluptate autem veniam debitis. Provident eos magni earum numquam minus illo nobis, repudiandae veniam aliquid. Odio, necessitatibus?</p>
	<p>Minus, at in! Odit, corporis commodi soluta nobis. Illum beatae, facere veniam voluptatem sed temporibus eum iure quis in qui numquam, minus rem cum provident ipsam ad alias amet autem totam quisquam quae dolore! Nobis fuga eveniet et voluptas aliquid ipsam error vero id maxime, odio, suscipit quam quae nisi!</p>
	<p>Quos quidem culpa odit quas, earum dolores, asperiores itaque quis optio velit ullam aperiam aspernatur ex tenetur a delectus praesentium quia recusandae reprehenderit et! Quae veniam debitis velit architecto officia quidem ipsam, excepturi culpa neque eius odio deleniti suscipit repudiandae ullam corrupti cumque dicta impedit sunt sint tempora illo autem.</p>
	<p>Reiciendis, temporibus delectus fugiat tenetur, reprehenderit adipisci laborum enim voluptates assumenda recusandae neque. Nam ipsa, sit dolorem incidunt nihil repellat corporis vero porro accusamus magni, laboriosam, quibusdam suscipit consequatur eos fugit odio minima esse perspiciatis nesciunt quasi labore iste delectus ea. Tempora adipisci magnam consequuntur ullam culpa fugiat mollitia distinctio.</p>
	<p>Ipsa itaque nobis numquam fugit quis tempore tenetur culpa dolorum laborum? Dolores voluptatum nostrum natus aspernatur dolor eveniet nesciunt aperiam molestiae, nam, rerum accusantium praesentium cumque, quibusdam a illo ipsum unde error repellendus voluptas officia debitis. Facilis repellendus, soluta quasi perspiciatis ipsam molestias quidem adipisci. Sed delectus ad, natus modi!</p>
	<p>Ea enim quam nam reprehenderit deserunt assumenda impedit quisquam ipsum molestias molestiae doloribus, voluptate nemo quaerat explicabo fuga, minima ex consequuntur magni tempore aperiam numquam praesentium, porro vitae est. Aliquid voluptatibus enim, mollitia ab qui id nesciunt omnis voluptas cum nisi corrupti molestias nam officia possimus alias quia, fugit porro.</p>
	<p>Cupiditate, labore, nisi, adipisci dicta nihil libero voluptates delectus obcaecati dolore eos asperiores? Illum laudantium aliquid velit asperiores iusto dolore quisquam. Enim illum id delectus? Beatae ut nisi similique ab dolores omnis eos qui quisquam. Deserunt nihil, ex, ipsa voluptates blanditiis laborum natus sapiente? Perferendis dolorem nam esse sit nobis.</p>
	<p>Aspernatur adipisci, magnam nulla officia qui repellat labore voluptas facere, nam praesentium inventore amet ratione voluptates tenetur numquam. Illum fugit, doloribus earum sint! Aliquam officia, in doloribus non quisquam nihil officiis quibusdam delectus voluptatum. Eveniet debitis mollitia esse nostrum laudantium praesentium. Eum consequuntur nemo recusandae numquam quos facere natus dignissimos!</p>
	<p>Dolor, dolorem voluptatum vero, dolore fugit optio veritatis ducimus aspernatur! Commodi qui enim, vel, praesentium tenetur voluptatem velit assumenda, reprehenderit dolor, similique rem! Provident laboriosam dolorem reiciendis a consectetur atque enim nostrum ex dignissimos ducimus, dicta amet, ipsa reprehenderit. Eum consectetur quod, nisi veniam cupiditate qui nobis architecto autem ab!</p>
	<p>Voluptatibus nam iure, impedit earum dicta culpa sed laboriosam id sunt hic eveniet eius dolores, accusamus fugit, unde officiis est repellendus. Laboriosam blanditiis sunt autem magnam quos est porro aperiam omnis quia obcaecati, adipisci odit accusamus eaque reiciendis eligendi unde error consequatur fugiat vel cumque molestiae, doloribus quisquam? Praesentium, blanditiis?</p>
	<p>Nulla reprehenderit totam natus cum, fugiat vero, porro, et aliquam soluta laboriosam nemo dolor laborum quis autem voluptatem est consequuntur. Voluptatum sit nostrum modi, minus aspernatur nisi, esse! Unde dolore quidem amet ullam nemo non, minima rerum animi voluptas. Unde ab officia modi aliquam vel minima, sunt rerum culpa magni.</p>
	<p>Corporis vitae eius, consectetur maiores amet tenetur quia quidem quam atque nesciunt quasi laudantium commodi ratione et laboriosam, repudiandae officia itaque assumenda recusandae reprehenderit dolores qui voluptatem at. Perspiciatis molestiae aperiam perferendis soluta, porro, numquam ab beatae odit id omnis, facilis non totam unde dolore ipsum nulla repellat sint at.</p>
	<p>Porro accusantium, minima dolores quisquam iure libero harum numquam doloribus, fugit, illum distinctio. Eius repellendus ipsum cupiditate, dicta ipsam mollitia, tempora quae facilis cumque iste odio repudiandae similique quisquam fuga explicabo maiores consectetur pariatur quidem, aut amet consequuntur expedita a quod quas atque! Facere quam, maxime expedita cumque nulla tempore.</p>
	<p>Cumque odit, vitae velit, perspiciatis repellendus numquam! Culpa, minus, nihil. Placeat modi eum, possimus voluptatum veniam molestias dolor odio vel, tempore officia commodi exercitationem iste quas et natus aliquam neque architecto labore voluptate laborum ad optio recusandae. Error blanditiis, voluptas totam qui veniam asperiores, dolor aspernatur aut nisi, nesciunt beatae.</p>
	<p>Magni aspernatur, eos sit repellendus amet assumenda labore repudiandae unde dolore quos! Dicta explicabo earum architecto voluptate alias expedita, dolor, nobis provident similique, ipsam sequi quis totam blanditiis reprehenderit dolores. Reiciendis, eos consectetur, vitae architecto repudiandae doloremque eveniet nemo quae, corporis illo commodi dicta ex, enim amet ipsam. Fuga, a.</p>
	<p>Totam quo aliquid, omnis unde dignissimos aperiam delectus exercitationem dicta rem voluptatum ad incidunt est ipsa fugit magni suscipit veniam accusamus harum porro magnam ratione, nobis libero dolorum. Odio non alias laudantium, accusamus id voluptas, minima praesentium enim ut deleniti quia autem ex nulla mollitia voluptatum! Odit atque voluptatum quos?</p>
	<p>Voluptates eius ex porro alias quod explicabo, nesciunt expedita, ratione sint corporis rerum harum velit non natus nemo deleniti! Officiis ex quia cumque minus laborum, ut ducimus vel ipsam, atque aliquam rerum sit. Totam veniam magni doloremque dolores ab consequuntur facere dolorum quod corrupti, reiciendis vero assumenda obcaecati velit eveniet.</p>
</div>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Montserrat);

body,p,h3 {margin:0;}
body,html {height:100%;}
body {font-family: 'Montserrat', sans-serif;}

#container {
  position:relative;
  margin:0 auto;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;
}

#text {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:white;
  text-align:center;
}

#text img {
  width:100px;
  height:100px;
  border-radius:100%;
}

#text p,
#text h3,
#text a {
  margin:20px 0;
}

#text h3 {
  font-size:28px;
}

#text a {
	padding:15px 30px;
  display:inline-block;
  color:white;
  text-decoration:none;
  background:rgba(255,255,255,.2);
  border:2px solid white;
  border-radius:6px;
  transition:.3s ease all;
}

#text a:hover {
  background:white;
  color:gray;
}

#parallax {
  z-index:-1;
  position:fixed;
  width:100%;
  height:100%;
 background:url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1652&q=80') center no-repeat transparent;
  background-size:cover;
}

#content {
	margin:0 auto;
  padding:20px;
  background:white;
}

#content p {
	margin:20px 0;
  width:98%;
}
              
            
!

JS

              
                function parallax() {
  var parallax = document.getElementById("parallax");
  parallax.style.top = -(window.pageYOffset / 4)+'px';
}

window.addEventListener("scroll", parallax, false);
              
            
!
999px

Console