Good day! How to implement the following effect - I have 2 blocks. 1st when loading the site opens to the full height and width of the screen. The second one scrolls into it. Here is an example.

How to do exactly the same, but without the effect of parallax on the background? Just the effect of hitting the lower block on the top.

  • why not borrow an implementation idea from the site that you give as an example? open the debugger and see the styles that are spelled out there - lexxl
  • @lexxl, I tried, but nothing did not work out (( - Make_dev
  • Make_dev just poke there on the ПКМ page and save it to the Рабочий стол and the finished one will be saved with all the scripts but with no images or with them, I did it and the finished one turned out - just fix it a bit - user33274

3 answers 3

In general, after sitting and thinking, I solved my problem on my own. Here is a working example.

 body { margin: 0; padding: 0; height: 100%; position: relative; } .banner-wrapper { width: 100%; height: 100%; min-height: 100%; background-color: #aaa; position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .media-wrapper { position: static; height: 100%; width: 100%; } .media-wrapper::before { content: ''; display: block; width: 0; height: 500px; /*В рабочем проекте поставить высоту 100%*/ background-color: #f3f2f7; } .content { overflow: hidden; position: relative; background-color: #fff; } .clearfix:after { clear: both; } .clearfix:after, .clearfix:before { content: " "; display: table; } 
 <body> <section class="banner-wrapper"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident nostrum incidunt qui velit, quo iusto repellat quia minus praesentium vitae, obcaecati quam sapiente nesciunt fuga doloremque itaque, fugiat facere! Nihil. </section> <section class="media-wrapper clearfix"> <div class="content"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, ullam tempore quidem. Necessitatibus laudantium cum tempora quaerat distinctio odio accusamus, delectus placeat quibusdam, aut eos ratione ex rem nulla, nisi!</div> <div>Velit quo porro, nesciunt soluta non obcaecati quos nisi, tenetur ut deleniti itaque voluptas reprehenderit eos suscipit? Error iusto quidem, nam nesciunt aspernatur ex doloribus cumque illum velit, quas, qui?</div> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, ullam tempore quidem. Necessitatibus laudantium cum tempora quaerat distinctio odio accusamus, delectus placeat quibusdam, aut eos ratione ex rem nulla, nisi!</div> <div>Velit quo porro, nesciunt soluta non obcaecati quos nisi, tenetur ut deleniti itaque voluptas reprehenderit eos suscipit? Error iusto quidem, nam nesciunt aspernatur ex doloribus cumque illum velit, quas, qui?</div> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, ullam tempore quidem. Necessitatibus laudantium cum tempora quaerat distinctio odio accusamus, delectus placeat quibusdam, aut eos ratione ex rem nulla, nisi!</div> <div>Velit quo porro, nesciunt soluta non obcaecati quos nisi, tenetur ut deleniti itaque voluptas reprehenderit eos suscipit? Error iusto quidem, nam nesciunt aspernatur ex doloribus cumque illum velit, quas, qui?</div> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, ullam tempore quidem. Necessitatibus laudantium cum tempora quaerat distinctio odio accusamus, delectus placeat quibusdam, aut eos ratione ex rem nulla, nisi!</div> <div>Velit quo porro, nesciunt soluta non obcaecati quos nisi, tenetur ut deleniti itaque voluptas reprehenderit eos suscipit? Error iusto quidem, nam nesciunt aspernatur ex doloribus cumque illum velit, quas, qui?</div> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, ullam tempore quidem. Necessitatibus laudantium cum tempora quaerat distinctio odio accusamus, delectus placeat quibusdam, aut eos ratione ex rem nulla, nisi!</div> <div>Velit quo porro, nesciunt soluta non obcaecati quos nisi, tenetur ut deleniti itaque voluptas reprehenderit eos suscipit? Error iusto quidem, nam nesciunt aspernatur ex doloribus cumque illum velit, quas, qui?</div> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, ullam tempore quidem. Necessitatibus laudantium cum tempora quaerat distinctio odio accusamus, delectus placeat quibusdam, aut eos ratione ex rem nulla, nisi!</div> <div>Velit quo porro, nesciunt soluta non obcaecati quos nisi, tenetur ut deleniti itaque voluptas reprehenderit eos suscipit? Error iusto quidem, nam nesciunt aspernatur ex doloribus cumque illum velit, quas, qui?</div> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, ullam tempore quidem. Necessitatibus laudantium cum tempora quaerat distinctio odio accusamus, delectus placeat quibusdam, aut eos ratione ex rem nulla, nisi!</div> <div>Velit quo porro, nesciunt soluta non obcaecati quos nisi, tenetur ut deleniti itaque voluptas reprehenderit eos suscipit? Error iusto quidem, nam nesciunt aspernatur ex doloribus cumque illum velit, quas, qui?</div> <div>Atque in, exercitationem neque voluptates? Dolorem pariatur a, quam consequatur ab voluptatibus, esse consectetur perferendis natus, quas ratione, provident dolorum? Quasi inventore est labore quis commodi, obcaecati repellendus a ullam.</div> <div>Eveniet sapiente necessitatibus fugiat quidem ducimus voluptas quae neque tenetur laudantium vero ullam pariatur enim omnis amet maxime, id, consectetur aut quos, illo culpa numquam porro nostrum. Fuga, vero? Voluptatum.</div> <div>Eveniet quibusdam quam voluptas id beatae aspernatur vel vitae, odit distinctio quasi veniam eum commodi nesciunt odio consequuntur. Porro laborum accusamus maiores distinctio, cumque in perferendis voluptas sed, recusandae labore.</div> <div>Sequi non suscipit laborum deserunt ducimus voluptatum excepturi voluptas velit quam in, repellendus aliquam nisi. Sequi sint itaque repudiandae dolor, perspiciatis illo vel commodi libero odio quos enim molestiae dicta?</div> <div>Mollitia necessitatibus nostrum voluptatem fugiat excepturi recusandae illo! Aliquid, iste delectus minus expedita nostrum eius ex assumenda aliquam reprehenderit placeat omnis repellat corporis cupiditate quae libero. Nulla laboriosam excepturi, nemo?</div> <div>Sequi inventore suscipit libero tenetur facilis qui, animi provident earum et. Eum fuga iure iusto? Totam, quos. Error pariatur, nam magnam beatae, nihil adipisci autem aliquam, maxime obcaecati suscipit eligendi!</div> <div>Maxime veniam quibusdam explicabo dolore sint commodi ducimus at modi neque ea expedita error alias voluptatibus cum blanditiis dolor, reiciendis quidem quaerat consequuntur saepe perferendis est nihil. Natus, quidem, soluta.</div> <div>Maxime veniam quibusdam explicabo dolore sint commodi ducimus at modi neque ea expedita error alias voluptatibus cum blanditiis dolor, reiciendis quidem quaerat consequuntur saepe perferendis est nihil. Natus, quidem, soluta.</div> <div>Maxime veniam quibusdam explicabo dolore sint commodi ducimus at modi neque ea expedita error alias voluptatibus cum blanditiis dolor, reiciendis quidem quaerat consequuntur saepe perferendis est nihil. Natus, quidem, soluta.</div> <div>Maxime veniam quibusdam explicabo dolore sint commodi ducimus at modi neque ea expedita error alias voluptatibus cum blanditiis dolor, reiciendis quidem quaerat consequuntur saepe perferendis est nihil. Natus, quidem, soluta.</div> <div>Maxime veniam quibusdam explicabo dolore sint commodi ducimus at modi neque ea expedita error alias voluptatibus cum blanditiis dolor, reiciendis quidem quaerat consequuntur saepe perferendis est nihil. Natus, quidem, soluta.</div> </div> </section> </body>

    Once I did this as an experiment, but I did not use it in any real project. Do not forget to reset.css.

     window.onscroll = function() { var posTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop; document.body.style.backgroundPosition = 'center -' + posTop/5 + 'px'; } 
     body { background-image: url(http://lorempixel.com/1920/1200/); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; background-position: center 0vw; } .header-bar { background-color: #000; width: 100%; height: 3em; } .menu-bar { background-color: #fff; width: 100%; height: 7em; } .offer-bar { background-color: transparent; width: 100%; height: 50vh; } .main-bar { background-color: #fff; width: 100%; height: 150vh; } 
     <div class="header-bar"> </div> <div class="menu-bar"> </div> <div class="offer-bar"> </div> <div class="main-bar"> </div> <div calss="footer-bar"> </div>

    • Thanks for the code, but this is a bit of the effect I need. I need the block that the bottom element hits on to not scroll. - Make_dev 2:51 pm
    • I can give you the ready code, if you want - user33274
    • Yes? then everything is simplified. see the second answer. So? - Andrey Fedorov
    • I wrote Make_dev - user33274
    • one
      surprisingly me too) - Andrey Fedorov

     * { padding: 0; margin: 0; } body { background-image: url('http://lorempixel.com/1920/1200'); background-attachment: fixed; } div { background-color: #fff; width: 100vw; height: 100vh; margin-top: 70vh; padding: 5vw; } 
     <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, dicta aut a at sunt quasi aspernatur. Ullam porro, consequatur est quo voluptatum atque. Delectus, dicta, saepe? Delectus sapiente officiis soluta maiores voluptatum voluptates culpa. Libero consectetur aliquid temporibus, dignissimos </div>