2

Доброго времени суток. Такая задача: необходимо дважды сменить значение 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>

1 ответ 1

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();
})

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.