Good day. Such a task: you need to change the value of background-image twice. The first time - at the beginning of the scrolling of the hidden part of the page. The second time is when scrolling beyond 100vh , that is, approximately from the third picture.

Page here

How to do it right? The clumsy version made by me works incorrectly. When the cursor is retracted from the block with a picture, a “second” image appears.

 $(document).ready(function() { $('.sub').css('opacity', 0); $('.all').css('opacity', 0); }); $('.object-container').on('wheel', function(event) { // deltaY obviously records vertical scroll, deltaX and deltaZ exist too if (event.originalEvent.deltaY < 0) { $('.slider').css('background-image', 'url("http://mysolaris.xyz/images/roof-after.png")'); $('.all').css('opacity', 1); // wheeled up } else { $('.slider').css('background-image', 'url("http://mysolaris.xyz/images/roof-after.png")'); $('.all').css('opacity', 1); // wheeled down } }); $('.third').mousemove(function() { $('body').css('background-image', 'url("http://mysolaris.xyz/images/black.png")'); $('.slider_content').css('opacity', 0); }); $('.fourth').mousemove(function() { $('.slider').css('background-image', 'url("http://mysolaris.xyz/images/black.png")'); $('.slider_content').css('opacity', 0); }); $('.fifth').mousemove(function() { $('.slider').css('background-image', 'url("http://mysolaris.xyz/images/black.png")'); $('.slider_content').css('opacity', 0); }); $('.sixth').mousemove(function() { $('.slider').css('background-image', 'url("http://mysolaris.xyz/images/black.png")'); $('.slider_content').css('opacity', 0); }); $('.seventh').mousemove(function() { $('.slider').css('background-image', 'url("http://mysolaris.xyz/images/black.png")'); $('.slider_content').css('opacity', 0); }); $('.eigth').mousemove(function() { $('.slider').css('background-image', 'url("http://mysolaris.xyz/images/black.png")'); $('.slider_content').css('opacity', 0); }); $('.nineth').mousemove(function() { $('.slider').css('background-image', 'url("http://mysolaris.xyz/images/black.png")'); $('.slider_content').css('opacity', 0); }); $('.tenth').mousemove(function() { $('.slider').css('background-image', 'url("http://mysolaris.xyz/images/black.png")'); $('.slider_content').css('opacity', 0); }); $('.first').mouseenter(function() { $('.one').css('opacity', 1); }); $('.first').mouseout(function() { $('.one').css('opacity', 0); }); $('.one').mouseenter(function() { $('.one').css('opacity', 1); }); $('.one').mouseout(function() { $('.one').css('opacity', 0); }); $('.second').mouseenter(function() { $('.two').css('opacity', 1); }); $('.second').mouseout(function() { $('.two').css('opacity', 0); }); $('.two').mouseenter(function() { $('.two').css('opacity', 1); }); $('.two').mouseout(function() { $('.two').css('opacity', 0); }); $('.third').mouseenter(function() { $('.three').css('opacity', 1); }); $('.third').mouseout(function() { $('.three').css('opacity', 0); }); $('.three').mouseenter(function() { $('.three').css('opacity', 1); }); $('.three').mouseout(function() { $('.three').css('opacity', 0); }); $('.fourth').mouseenter(function() { $('.four').css('opacity', 1); }); $('.fourth').mouseout(function() { $('.four').css('opacity', 0); }); $('.four').mouseenter(function() { $('.four').css('opacity', 1); }); $('.four').mouseout(function() { $('.four').css('opacity', 0); }); $('.fifth').mouseenter(function() { $('.five').css('opacity', 1); }); $('.fifth').mouseout(function() { $('.five').css('opacity', 0); }); $('.five').mouseenter(function() { $('.five').css('opacity', 1); }); $('.five').mouseout(function() { $('.five').css('opacity', 0); }); $('.sixth').mouseenter(function() { $('.six').css('opacity', 1); }); $('.sixth').mouseout(function() { $('.six').css('opacity', 0); }); $('.six').mouseenter(function() { $('.six').css('opacity', 1); }); $('.six').mouseout(function() { $('.six').css('opacity', 0); }); $('.seventh').mouseenter(function() { $('.seven').css('opacity', 1); }); $('.seventh').mouseout(function() { $('.seven').css('opacity', 0); }); $('.seven').mouseenter(function() { $('.seven').css('opacity', 1); }); $('.seven').mouseout(function() { $('.seven').css('opacity', 0); }); $('.eigth').mouseenter(function() { $('.eight').css('opacity', 1); }); $('.eigth').mouseout(function() { $('.eight').css('opacity', 0); }); $('.eight').mouseenter(function() { $('.eight').css('opacity', 1); }); $('.eight').mouseout(function() { $('.eight').css('opacity', 0); }); $('.nineth').mouseenter(function() { $('.nine').css('opacity', 1); }); $('.nineth').mouseout(function() { $('.nine').css('opacity', 0); }); $('.nine').mouseenter(function() { $('.nine').css('opacity', 1); }); $('.nine').mouseout(function() { $('.nine').css('opacity', 0); }); $('.tenth').mouseenter(function() { $('.ten').css('opacity', 1); }); $('.tenth').mouseout(function() { $('.ten').css('opacity', 0); }); $('.ten').mouseenter(function() { $('.ten').css('opacity', 1); }); $('.ten').mouseout(function() { $('.ten').css('opacity', 0); }); 
  @font-face { font-family: Adineue; src: url("../fonts/adineue.ttf"); } @font-face { font-family: ABold; src: url("../fonts/adineue-bold.ttf"); } html { box-sizing: border-box; } body { overflow: hidden; margin: 0; padding: 0; font-family: 'Adineue'; font-size: 20px; } a { text-decoration: none; } .roof { color: #e64e4e; } .fasad { color: #f7a550; } .design { color: #fedd32; } .industry { color: #51b9f1; } .eco { color: #70ca57; } .stone { color: #956ccc; } .slider { height: 100vh; background-image: url("http://mysolaris.xyz/images/roof-main.png"); background-repeat: no-repeat; background-size: cover; } .slider-content { height: 100vh; color: #fff; } .slider_content { height: 100vh; display: flex; flex-direction: column; margin-left: 3vw; } .slider_content span { font-family: 'Adineue'; font-size: 1em; margin-top: 5vh; } .slider-text { display: flex; flex-direction: column; align-items: baseline; margin-top: 33vh; } .slider-text h1 { font-family: 'Adineue'; font-size: 1.5em; font-weight: 100; } .slider-text span { color: #e64e4e; font-family: 'ABold'; font-size: 1.3em; font-weight: 600; } .slider-text p { font-family: 'Lato'; font-size: 0.825em; color: #fff; font-weight: 100; } .btn-roof { display: block; width: 40px; height: 40px; border-radius: 20px; text-align: center; line-height: 40px; margin-top: 21vh; } .btn-roof:hover { transform: rotate(-360deg); transition: all 1s ease-in-out; } .hr { color: #e64e4e; background-color: #e64e4e; width: 100%; height: 3px; margin-top: 7vh; } .object-container { width: 50vw; height: 100vh; display: flex; overflow: auto; } .all { margin-top: 40vh; display: flex; flex-direction: column; width: 40vw; height: 420%; } .for-all { width: 36vw; height: 26.35vh; background-size: cover; background-repeat: no-repeat; } .sub { width: 36vw; height: 7.05vh; margin-bottom: 8vh; text-align: center; line-height: 7.05vh; color: #fff; font-size: 1em; font-family: 'Adineue'; background-color: rgba(255, 255, 255, 0.11); } .first { background-image: url("http://mysolaris.xyz/images/ruukki.png"); } .second { background-image: url("http://mysolaris.xyz/images/cheker.png"); } .third { background-image: url("http://mysolaris.xyz/images/bitum.png"); } .fourth { background-image: url("http://mysolaris.xyz/images/elems.png"); } .fifth { background-image: url("http://mysolaris.xyz/images/falz.png"); } .sixth { background-image: url("http://mysolaris.xyz/images/gidro.png"); } .seventh { background-image: url("http://mysolaris.xyz/images/mansard.png"); } .eigth { background-image: url("http://mysolaris.xyz/images/metalo.png"); } .nineth { background-image: url("http://mysolaris.xyz/images/samorez.png"); } .tenth { background-image: url("http://mysolaris.xyz/images/vodostok.png"); } .right-side { width: 10vw; height: 100vh; display: flex; flex-direction: column; margin-top: 5v 5; } .btn { display: block; width: 33px; height: 33px; border-radius: 50%; text-align: center; line-height: 33px; } .btn:hover { background-color: rgba(255, 255, 255, 0.149); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="pure-g"> <div class="pure-u-1 pure-u-sm-1 pure-u-md-11-12"> <div class="slider pure-g"> <div class="slider-content pure-u-1 pure-u-md-1-2"> <div class="slider_content"> <span>01</span> <div class="slider-text"> <h1>Rofas <span>Roof</span></h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis </p> </div> <a href="index.html" class="btn-roof"><i class="fa fa-undo fa-lg fa-rotate-90" style="color:#e64e4e"></i></a> <div class="hr"></div> </div> </div> <div class="slider-right pure-u-1 pure-u-md-1-2"> <div class="object-container"> <div class="all"> <div class="for-all first"></div> <div class="sub one">Модульная металлочерепица Ruukki</div> <div class="for-all second"></div> <div class="sub two">Rofas Cheker</div> <div class="for-all third"></div> <div class="sub three">Битумная черепица</div> <div class="for-all fourth"></div> <div class="sub four">Элементы безопасности кровли</div> <div class="for-all fifth"></div> <div class="sub five">Фальцевая кровля</div> <div class="for-all sixth"></div> <div class="sub six">Гидро- тепло-пароизоляция</div> <div class="for-all seventh"></div> <div class="sub seven">Мансардные окна</div> <div class="for-all eigth"></div> <div class="sub eight">Металлочерепица</div> <div class="for-all nineth"></div> <div class="sub nine">Саморезы для крепления</div> <div class="for-all tenth"></div> <div class="sub ten">Водосточные системы</div> </div> <div class="right-side"> <a href="index.html" class="btn"><img src="icons/return.png"></a> <a href="#" class="btn" style="margin-top: 10vh"><img src="icons/speaker.png"></a> </div> </div> </div> </div> </div> </div>

    1 answer 1

    The mouseout and mouseenter not very suitable for solving this task, as they are triggered when the mouse cursor is over the element or leaves it. You need to look in the direction of .scrollTop() - gets the value of the indentation of the scrolling on the top and .offset().top . scrolTop() push in function, and we hang up function itself to the output agent .scroll (). It looks like this:

     var margBlock_1 = $('.block_1').offset().top function myScroll() { winScrollTop = $(window).scrollTop() if (winScrollTop < margBlock_1) { //тут пишем css свойство на смену background'a } }

    The function mySCroll () is hung on the handler event scroll

     $(window).scroll(function() { myScroll(); })

    something like this...