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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

              
                <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Parallax Scrolling Effect Using jQuery</title>
    <!-- Google Fonts CDN Link -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap"
      rel="stylesheet"
    />
    <!-- stylesheet -->
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <section class="hero-background">
      <img src="https://images.unsplash.com/photo-1552083375-1447ce886485?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" class="parallax" />
      <h2>parallax</h2>
    </section>
    <div class="content">
      <h2>Parallax Scrolling Effect Using jQuery</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio accusamus
        magni eum labore minus, similique dolore veniam repellat adipisci illo
        sapiente, suscipit quibusdam laborum vitae est reprehenderit id
        temporibus eos, quia asperiores expedita sequi. Amet odio, tenetur id
        aliquam voluptatem ab maxime aperiam corrupti placeat a quidem
        voluptates vel neque animi nemo delectus temporibus sunt deserunt
        incidunt, ducimus enim quis, ipsum eveniet rerum! Molestiae amet
        asperiores excepturi tempore voluptate, placeat architecto dolor, ipsa
        ea nihil, voluptates dicta. Harum, voluptatibus doloribus! Modi aperiam
        non quod necessitatibus minima similique cupiditate, vel sequi alias sit
        eum obcaecati mollitia doloribus magnam voluptatem autem neque
        voluptatum reiciendis odio? Molestiae maiores earum sequi accusamus
        cumque distinctio voluptatum ullam esse, nostrum nisi! Praesentium ipsum
        mollitia, molestiae ab iure ut temporibus deleniti fugiat, nobis culpa
        dolorum adipisci sed dignissimos non eligendi nam quas tempore
        doloribus, quo blanditiis necessitatibus. Commodi itaque modi
        consectetur aut ea. Animi obcaecati omnis ad blanditiis velit cumque
        explicabo ducimus facilis, fugiat inventore tempore dolore doloribus ea
        atque et eos temporibus dolores aliquid libero quia sapiente ut. Ipsum
        perferendis maiores ea eius expedita iure reiciendis in molestias
        perspiciatis, eum officiis odio? Reprehenderit tenetur nobis nam cum
        placeat, corporis cupiditate sint ipsa ipsum aspernatur quasi quae illo.
        Modi officiis perspiciatis fuga delectus ullam qui exercitationem
        reiciendis quasi obcaecati quae, repellendus voluptatem ipsam nisi,
        omnis veniam ipsa illo? Repellat quasi sequi corrupti, soluta excepturi
        cupiditate ipsam ex veritatis deserunt nam, delectus ad voluptates
        distinctio vero quisquam nemo temporibus dicta laborum nesciunt possimus
        beatae dolor. Sequi iure autem temporibus magnam tempore repellendus,
        quod laboriosam nobis obcaecati ullam sapiente saepe quaerat sint
        aperiam maxime id voluptates nihil corporis ab officiis? Ipsam laborum
        sint mollitia aliquid est debitis natus voluptates itaque voluptatum
        dicta, quam recusandae nulla aliquam numquam harum vel fuga dolor labore
        beatae! Iure totam nesciunt beatae aspernatur suscipit rem minima nam,
        reprehenderit vero. Quibusdam tempore voluptatibus quis impedit rerum
        incidunt vitae totam? Aperiam commodi dicta facilis esse laboriosam
        labore magnam dolore voluptate quas, nostrum quaerat eligendi quam,
        tempora repudiandae! Nobis animi alias accusamus consequuntur dolorum
        qui obcaecati, est sit explicabo molestiae doloribus quo! Minus quas
        possimus cum soluta rem eaque. Perspiciatis minima quam quasi aut dolor
        culpa corporis placeat dignissimos corrupti laborum dolore saepe in
        beatae at repellendus delectus magnam necessitatibus, sapiente sit
        molestiae totam explicabo? Consequuntur, eum necessitatibus? Amet
        quaerat laudantium, perferendis voluptatum ipsum maiores debitis et,
        magnam beatae, tempora molestias labore deserunt in numquam id voluptas!
      </p>
    </div>

    <!-- jQuery CDN Link -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Custom js -->
    <script src="js/main.js"></script>
  </body>
</html>

              
            
!

CSS

              
                * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

.hero-background {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-background img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.hero-background h2 {
  color: #ffffff;
  font-size: 150px;
  font-weight: 800;
  text-transform: capitalize;
}

.content {
  width: 100%;
  padding: 80px 120px;
  background-color: #000000;
}

.content h2 {
  margin-bottom: 30px;
  color: #ffdd00;
  font-size: 24px;
  font-weight: 500;
  text-align: center;
}

.content p {
  color: #c4c4c4;
  font-size: 18px;
  font-weight: 300;
  text-align: justify;
  text-align-last: center;
  line-height: 1.7;
}

              
            
!

JS

              
                $(window).on("scroll", function () {
  var parallax = $(".parallax");
  var scrollPosition = $(this).scrollTop();
  parallax.css("transform", "translateY(" + scrollPosition * 0.5 + "px" + ")");
});

              
            
!
999px

Console