Fade out hero header on scroll ( source code )

Fade out hero header on scroll ( source code )

add jquery cdn and headerfade js from plugin 

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="headerFade.js"></script>

HTML


<div id="hero"> <div id="hero-mask"> </div> <header id="title-fade"> <h1> Welcome to Divinector</h1> </header> </div> <div class="main-content"> <div class="cont-wrapper"> <h2> Main Content</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, aliquam amet, aperiam architecto assumenda aut commodi consectetur consequuntur delectus deleniti dolor dolore explicabo fugiat in iusto laborum non, nulla placeat porro quibusdam repellat sunt ullam velit. Asperiores consequuntur distinctio, dolore doloribus eaque id magni odit repellendus tempore velit. A, amet asperiores assumenda consequatur, cumque, fugiat molestiae necessitatibus optio pariatur praesentium quas tempora tenetur. Ad corporis cum deleniti ea enim et explicabo, itaque libero natus necessitatibus quisquam saepe similique soluta. A ab accusantium animi atque commodi consectetur cum cumque delectus dignissimos distinctio dolor doloremque eius eligendi est excepturi exercitationem facere hic illo incidunt iure libero magnam magni molestias nam natus nisi officiis pariatur quam quas qui quod repudiandae, sapiente similique ut veniam voluptas voluptatibus? Accusantium aspernatur at atque blanditiis corporis eius et, explicabo fugiat harum inventore iusto labore laudantium maiores nam odit perferendis possimus qui sit ullam velit. Blanditiis dolorum eveniet expedita fugiat neque nostrum perspiciatis praesentium sint temporibus ullam? Ab aliquid asperiores assumenda atque aut, debitis deleniti dolorum enim esse et, eveniet, incidunt mollitia nesciunt officia officiis provident quae quisquam quod sit soluta ullam unde vero voluptatum! Aperiam at corporis doloremque eius et excepturi harum hic incidunt, libero magnam, maiores molestias nisi placeat porro provident quia recusandae totam velit veniam voluptates? Cumque eaque et explicabo, hic itaque, labore mollitia, natus placeat quam sed suscipit temporibus. Ad adipisci aliquid consectetur deleniti, dolorem hic laborum libero nemo non nostrum obcaecati provident recusandae saepe temporibus, totam, vel velit! Architecto autem commodi cum deserunt et ex fugiat harum illo in ipsum, libero, mollitia optio possimus qui quis quisquam quod sed tempore totam veritatis? Aliquid animi culpa cumque dignissimos dolorum enim labore minima, neque non nulla officia quisquam sapiente veritatis? Aut commodi cupiditate debitis id veritatis? Asperiores assumenda blanditiis deleniti distinctio ea eligendi enim eveniet ex exercitationem expedita illum ipsa labore laudantium maxime, molestias natus neque quaerat, quas quisquam ratione repellendus reprehenderit rerum sed sequi sint ut voluptates. Aliquid aspernatur assumenda at atque, autem consectetur consequuntur cum delectus distinctio dolor ducimus esse excepturi fuga harum in incidunt inventore laudantium magnam molestias mollitia necessitatibus nesciunt non odio officiis omnis porro, quasi ratione repellat sapiente sed suscipit tempore temporibus vel? Consequatur excepturi in nesciunt quo tenetur. Id illo nobis reiciendis sequi voluptas. Assumenda autem deserunt dolore dolorem esse ex, nam nostrum qui quisquam voluptatum. Ab accusantium aut deleniti dolores ea, eligendi esse eum excepturi fugiat fugit ipsa ipsam laudantium natus neque nihil odit porro quas, qui quia quod recusandae repellendus reprehenderit sapiente ullam veniam? Accusamus amet animi commodi cum dignissimos doloribus earum eius error incidunt, ipsa minima minus, nam neque odio quos ratione repellat suscipit tempora unde ut velit vitae voluptate voluptates? Accusamus adipisci architecto aut commodi consequatur cupiditate deleniti dicta dolore, dolorem doloremque doloribus eaque eius error ex exercitationem iusto labore laudantium libero maxime minima molestiae mollitia nobis odit officiis perferendis placeat porro provident quam quas quia quis quos, ratione rem reprehenderit vel voluptate voluptatem. Ad asperiores consectetur consequatur doloremque dolores eius enim error excepturi hic id ipsum iusto libero magni nemo nihil numquam obcaecati odio odit omnis perferendis porro quasi quo repudiandae rerum, sit totam vitae voluptatem. Accusamus aliquid consequatur dicta eos esse eum, expedita hic iure omnis praesentium quo recusandae, reprehenderit tempore totam unde. Adipisci aperiam aut culpa, cupiditate debitis dignissimos esse eum explicabo harum illo incidunt ipsam itaque laboriosam magni maiores nisi odio officia omnis optio pariatur quasi quisquam quos recusandae rem sapiente tempora voluptates? Ab accusamus accusantium aliquid animi, asperiores assumenda cumque ducimus eligendi enim error eveniet exercitationem ipsum iusto laboriosam magni maxime mollitia non numquam optio pariatur placeat porro quae quidem ratione sequi sint soluta velit veritatis, voluptas voluptatum? Ab cum ducimus eaque eveniet ex facilis placeat recusandae similique tenetur. Corporis cupiditate dignissimos esse, eveniet fugiat in, ipsum, libero neque officia porro quam recusandae saepe? Itaque magni officia perferendis veniam. Alias atque cumque delectus doloremque eligendi explicabo fuga harum id in mollitia nemo non, quae quas recusandae repellat repudiandae vero! Consectetur eos hic inventore labore laboriosam nesciunt omnis repellendus soluta tempora ullam. Beatae culpa deserunt enim facilis hic itaque officiis repellat, saepe vel voluptates. Aliquid amet aperiam consequatur dolor ea ex excepturi facere facilis, hic, illo quaerat quasi qui quisquam repudiandae tenetur? Ab accusamus aliquam deserunt distinctio ea laborum quas qui quo quos vitae. Amet beatae blanditiis eaque est, facere fuga illo pariatur perspiciatis qui quis sequi sint veritatis. A culpa delectus dolores et, eveniet laudantium molestias, nemo nostrum perferendis repudiandae voluptate voluptatem! Dolore doloribus dolorum eaque enim, impedit nemo, nostrum odit porro quos recusandae rerum sequi soluta vero? Aliquid amet consectetur deleniti doloremque ducimus eligendi expedita hic incidunt iure, laboriosam odit recusandae, temporibus vero! Alias autem culpa dolore eum illo inventore, ipsum laudantium libero minima mollitia natus omnis placeat quaerat, quisquam repudiandae rerum, suscipit ullam voluptate! Aliquam autem, consectetur consequatur dicta, distinctio doloremque enim, esse explicabo incidunt modi molestias mollitia nam nemo nulla officiis perferendis quidem quod similique sint totam ullam voluptatibus voluptatum? Accusamus aliquid aperiam aspernatur at aut dicta, dolore dolores doloribus ea earum illum impedit in maxime nemo nihil nostrum nulla odio praesentium quae quam quasi qui quo ratione velit vitae? Aperiam autem delectus nesciunt nihil porro qui rem, sed soluta sunt vitae. Aut blanditiis commodi consequuntur, deserunt, eaque eveniet expedita modi odit, quibusdam quidem saepe suscipit. Illo non voluptatem voluptates. Animi, assumenda, atque consequatur debitis distinctio dolore dolores eaque eos excepturi illo iste maiores maxime minima molestias necessitatibus praesentium quibusdam rem repellendus similique, velit! Adipisci autem beatae, commodi enim fuga magni repudiandae sunt tempora tenetur ullam! Accusantium animi aperiam asperiores atque autem corporis deleniti deserunt dignissimos doloremque dolorum et fugiat minus modi, molestias mollitia officiis praesentium quam quo quod sequi sunt tempore vel veniam voluptates voluptatum! Ab alias assumenda autem beatae commodi cumque dicta dolor eligendi est explicabo, facilis fuga fugit, illum in inventore ipsum, iste iure minus modi neque nihil obcaecati officia optio perferendis perspiciatis porro quae quas quasi quibusdam quidem quo reiciendis repudiandae saepe sed similique tempora voluptatibus? Corporis dignissimos iusto officia quam sed sunt.</p> </div> </div>


CSS


body{ margin: 0; padding: 0; } header { position: relative; top: 40%; transform: translate(0, -50%); z-index: 2; } #hero { background-image: url(https://i.postimg.cc/GhbqNZGw/3.jpg); background-position: 50% 50%; background-size:cover; background-attachment: fixed; background-color: #ff0000; height: 100vh; width: 100%; } h1 { margin: 0; text-align: center; color: #fff; font-size: 65px; font-family: poppins; text-shadow: 0px 2px 20px rgba(0,0,0,0.9); } .cont-wrapper p { font-family: poppins; } #hero-mask { background-color: #000; height: inherit; left: 0; position: absolute; opacity: 0; top: 0; transform: translate3d(0, 0, 0); width: 100%; } .cont-wrapper{ width: 1170px; margin: 0 auto; }