Убрать ээфект parallax при изменении ширины окна браузера

@Transform · Регистрация: 19.01.2018

Author24 — интернет-сервис помощи студентам

День добрый. Уверен, очень простой вопрос, но как убрать эффект параллакса при уменьшении окна браузера ? Пытался что-то замудрить, но не вышло. Проблема в том, что при уменьшении окна браузера желательно убрать параллакс. Заранее спасибо

Вот песочница

Вот код :

HTML5

<div class="parallax-bg">
  <div class="parallax">
    <div class="parallax-text-wrapper">
      <div class="parallax-text">
        <h1>
          Parallax Effect
        </h1>
      </div>
    </div>
  </div>
</div>

CSS

.parallax-bg {
  width: 100vw;
  height: 100vh;
  margin: 400px 0 1400px;
  overflow: hidden;
}
 
.parallax {
  width: 100%;
  height: 100%;
  background-image: url("https://images.pexels.com/photos/326410/pexels-photo-326410.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
  background-size: 110%;
  background-repeat: no-repeat;
  background-position: 50% 0%;
}
 
.parallax-text-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
}
 
.parallax-text {
  margin: 600px auto 0;
}
 
.parallax-text h1 {
  color: #fff;
  font-size: 80px;
  text-transform: uppercase;
}
 
@media screen and (max-width: 990px) {
  .parallax-text h1 {
    font-size: 50px;
  }
}

Javascript

$(function(){
  
  if ($(window).width() > 1200) {
    
    $(window).scroll(function(){
 
      var s     = $(this).scrollTop(),
          st    = parseInt( s / 25 ),
          sc    = parseInt( s / 2 ),
          par   = $('.parallax'),
          text  = $('.parallax-text');
 
      par.css({
        'background-position' : '50% ' + st + '%'
      });
 
      text.css({
        'transform' : 'translateY(-' + sc + 'px)'
      }); 
 
    });
    
   }
  
});

	04.02.2018, 08:28