<html>

<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
</head>

<body>
  <div class="header" id="parallex">
    <img class="header-image" src="https://handluggageonly.co.uk/wp-content/uploads/2015/12/London-1.jpg" alt="">
  </div>
  <p class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae similique perferendis quaerat porro, facilis quidem itaque qui excepturi autem ab iure ea quae vero dolorum fugiat alias accusantium, unde laborum facere pariatur soluta quibusdam
    numquam! Rerum iure similique, magnam tempore voluptatem molestias adipisci velit eaque ipsam eum sed consequatur ducimus magni enim cumque! Modi quia quibusdam praesentium ab quis quasi magni enim velit, rem numquam accusantium expedita labore suscipit.
    Dolores repellendus itaque, facere aliquid at nihil obcaecati voluptatibus laborum excepturi sapiente molestiae eius non sequi architecto delectus, repellat, iste ducimus iusto cum. Fuga animi soluta dolorem, ratione dolorum repellat voluptatum eaque
    esse aperiam impedit ex, blanditiis dignissimos ab nostrum. Quo adipisci nostrum repellat accusamus voluptatibus eius error sed! Architecto sed ut obcaecati porro ipsum alias eos at neque quae, veritatis, soluta! Harum tenetur quae maxime laborum
    ipsum nostrum laudantium repellendus quas cum adipisci est maiores, tempore tempora enim autem consequatur qui aperiam. Explicabo odit dolorem, assumenda veritatis dolor rerum maiores nobis impedit delectus eos quidem alias necessitatibus hic repellat
    aut a obcaecati, ullam distinctio, nisi, dolore facere tenetur. Illo sequi ab consequuntur et corrupti id dicta impedit qui quo, quasi sapiente cumque nulla adipisci ipsum voluptatem est atque architecto voluptas recusandae accusantium. Accusamus
    cupiditate, doloremque quae magni. Earum enim, quidem eveniet expedita! Labore aliquam, animi cum architecto repellendus possimus eos temporibus vitae sapiente optio dolorum dolorem qui alias, ratione quas voluptatibus incidunt recusandae amet praesentium
    accusantium enim esse sit magnam. Tempore iure, facilis placeat ipsa, laborum mollitia. Ipsam quos nostrum temporibus ex ipsum velit dignissimos maiores, facere, architecto dolorem mollitia repellendus necessitatibus officia accusantium expedita assumenda
    ipsa laborum nesciunt quam numquam consectetur. Id vero impedit, assumenda architecto eaque laborum deserunt commodi laboriosam itaque adipisci, omnis aperiam. Nostrum obcaecati est, dicta numquam ea cumque nemo sint, maiores mollitia hic. Quod at
    fugit iste. Obcaecati debitis quos facere delectus nemo beatae numquam. Vero excepturi obcaecati amet, consequatur velit eveniet sunt optio sint consequuntur alias eligendi voluptas voluptates, facere? Consequuntur corrupti a quis, enim? Officiis
    ea incidunt consequatur maiores, esse reiciendis magni, distinctio aut neque facere odio eius dicta natus provident consequuntur voluptatum ducimus tenetur, totam dolorum corporis animi expedita repellat! Dolorem inventore molestias aliquid, distinctio
    libero quisquam, facere iste earum delectus assumenda, quis nobis totam unde vero nostrum quas corrupti! Adipisci omnis sequi nemo odio iusto cupiditate dolorum voluptatibus nesciunt pariatur amet ipsam dignissimos eum facilis est iste ea delectus,
    itaque eius! Reiciendis facilis voluptas, expedita optio. Ducimus omnis facere illo commodi ut sequi veritatis quae nam et quasi delectus similique, ex voluptatibus odio recusandae officia consectetur voluptate nesciunt qui soluta ipsam. Aliquid rerum
    accusamus esse suscipit error nihil maxime sequi, illo illum aspernatur officiis ad, culpa dignissimos ratione, veniam. Ea dolore aperiam, qui. Sit aspernatur repudiandae atque rerum accusamus eum quos illum aliquid mollitia quis ratione pariatur
    praesentium totam beatae labore expedita, quidem provident hic veritatis officia corrupti magni facilis dolor incidunt voluptatibus! Obcaecati incidunt aspernatur corporis asperiores quaerat iste, ratione necessitatibus quibusdam ipsa nobis accusamus
    laborum est, rerum similique sapiente.</p>
  <p class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, ratione, magnam. Cupiditate necessitatibus qui non eaque, amet, maiores provident pariatur fugiat praesentium vitae et alias illum, tenetur. Dolorum esse voluptas officia eligendi deleniti
    perferendis provident velit sunt magni optio quo error ea corporis doloremque quae unde laboriosam vitae tempora quis, ad nobis deserunt ab saepe. Magni vitae et, alias placeat earum, quis dicta velit aspernatur, voluptatem accusamus blanditiis quisquam
    laudantium iste, laborum non? Aspernatur natus nulla odio vitae quisquam at architecto excepturi esse, magnam corporis! Cupiditate voluptate provident quidem, rem nesciunt similique quo amet consequuntur omnis ullam sapiente libero iure veniam sunt
    dolorem quam porro voluptatibus? Earum nemo, adipisci delectus veritatis dicta fugit, quidem tenetur incidunt, quasi, itaque tempore iure laudantium iste quae minus aliquid corporis provident tempora a? Facere possimus ratione pariatur delectus. Aperiam
    non modi illo commodi, rem nihil perferendis explicabo quam, sed debitis facilis itaque ex aspernatur odio beatae aliquid accusamus doloremque magni quidem quasi laudantium molestias laborum deleniti! Tenetur earum voluptates eius nobis fugit quis
    nemo, explicabo ipsum eos repellendus, ratione sunt sed ducimus praesentium sit totam nam molestiae maxime excepturi autem dolorum error neque mollitia qui ea. Ab eius architecto suscipit perspiciatis corporis cumque enim, temporibus ducimus quaerat
    numquam ad beatae dolorum, eos vel, aliquid atque. Dicta, maiores at. Quos quasi aut iste laborum non quae, facilis quibusdam amet! Possimus tenetur culpa incidunt dolore, aliquam ut, itaque eaque. Blanditiis sequi voluptatibus, minus tempora earum
    adipisci inventore natus iste vero tenetur nisi maxime nam eum quo dolorem eaque est cumque unde cum alias rerum, architecto! Voluptate molestias, atque! Minima reiciendis, ipsum iusto quisquam repellat vitae nisi deleniti nam! In commodi aliquid
    repellat nostrum suscipit. Itaque sapiente dolor laborum provident nam iusto dolorem, quo velit vitae impedit. Necessitatibus officiis facere saepe reprehenderit suscipit dolores. Voluptas, totam eligendi itaque magnam nam quidem porro fugiat eius
    rem doloremque inventore ducimus voluptatibus, dolorum odit pariatur quia iste officiis, libero perferendis nobis? Sapiente quo commodi labore nobis harum culpa incidunt soluta, corporis doloremque ea placeat neque debitis alias voluptates enim obcaecati
    error nemo tenetur, consequatur voluptatem sit, eveniet ab laborum. Nesciunt aperiam rem qui, est eum aut. Eligendi aspernatur adipisci, magnam placeat praesentium nihil est, reiciendis repudiandae voluptatem dolorem, maiores aperiam mollitia expedita
    ipsa. Officia cupiditate minima vitae labore, placeat enim possimus voluptas, illum praesentium qui? Animi consequatur recusandae dolorem temporibus, molestias nemo, enim, eius amet sed nesciunt tempora pariatur, similique numquam distinctio libero
    nihil alias iste! Sint ullam tempora, aliquam nulla tempore asperiores praesentium nemo earum debitis rem sapiente illo recusandae tenetur, vitae modi blanditiis. Porro, commodi. Sunt enim aliquam velit reiciendis quisquam facere sed, at consectetur
    harum assumenda sapiente saepe recusandae ad, cumque facilis natus nesciunt aperiam excepturi. Ratione blanditiis nulla est ullam rem assumenda dignissimos natus reiciendis similique impedit, dolorem doloribus corporis atque explicabo eum eligendi
    quod, perferendis expedita, quam facere vitae. Enim consectetur pariatur dicta, corrupti provident in perspiciatis, dignissimos consequuntur, suscipit atque necessitatibus, mollitia laborum ad corporis et neque maiores ea hic voluptatum? Exercitationem,
    consectetur, et!</p>
  <p>Image credits: Google image search</p>
</body>

</html>
body: {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
img {
  width: 100%;
}
.header {
  height: 500px;
  overflow: hidden;
}
p {
  font-family: tahoma;
  font-size: 20px;
  padding: 50px;
}
$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  console.log(scroll);
  $("#parallex img").css({
    width: 100 + scroll / 5 + "%"
  });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.