Смена background-image по скроллу

324

08 июня 2017, 05:18

Доброго времени суток. Такая задача: необходимо дважды сменить значение background-image. Первый раз - при начале скроллинга скрытой части страницы. Второй раз - при скроллинге дальше 100vh, то есть, приблизительно с третьей картинки.

Страница здесь

Как это сделать правильно? Сделанный мной корявый вариант работает некорректно. При отводе курсора от блока с картинкой появляется "второе" изображение.

$(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>

Answer 1

событие mouseout и mouseenter не очень подходят для решение этой задачи, так как они срабатывает тогда когда курсор мышки находится над элементом или уходит с него. Вам надо смотреть в сторону .scrollTop() - получает значение отступа прокрутки сверху и .offset().top получаем значение отступа от начала стр. до элемента. scrolTop() пихаем в функцию, а саму функцию вешаем к обработчику .scroll(). Примерно выглядит так:

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

Функцию mySCroll() вешаем на обработчик событие scroll

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

как-то так...

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Передача текста + картинок с помощью ajax FormData [требует правки]

здравствуйте, как передать ajax Form Data запросом, изображение + другие текстовые значения?

324

HTML

Смена background-image по скроллу

Передача текста + картинок с помощью ajax FormData [требует правки]

Wооcommerce. Как изменить html разметку полей ввода (checkout fields) на странице оформления заказа (checkout page)?

Как в NetCoreApp получить путь к программе?

Сортировка по цвету