Отзывчивое фоновое изображение для прокрутки Parallax

Я борюсь за голову, чтобы найти решение моей проблемы. Я хотел бы реализовать простой параллакс для моего заголовка моего сайта. Поэтому я решил использовать skrollr.js. Тем не менее, я хочу, чтобы изображение реагировало на то, чего я не могу достичь с помощью css background-image. Когда я использую свойство background-image: cover, мое изображение обрезается небольшими размерами. Всякий раз, когда я использую background-image: contain, изображение масштабируется так же, как я хочу, но оставляет небольшое пустое пространство ниже (контейнер не изменяет размер соответственно), и у меня проблемы с положением. Другой Hacky способ я нашел в том, чтобы использовать что-то вроде этого:Отзывчивое фоновое изображение для прокрутки Parallax

<img src="/img/banner-bg.jpg" 
    class="img-responsive" 
    data-0="background-position:0px 0px;" 
    data-500="background-position:0px -250px;" />

, как я видел в документации skrollr.js но, к сожалению анимация не будут работать. Все, что я хочу, это фоновое изображение, но с параметрами масштабирования класса img-responsive.

Есть ли какой-либо способ через javascript, jquery, который я могу использовать для масштабирования изображения соответственно? Я относительно новичок в jquery, поэтому я не знаю, как правильно его использовать.

код я использую для моего фона изображения:

image { 
    background-image: url(/img/banner-bg.jpg); 
    height: 680px; 
    background-repeat: no-repeat; 
    background-size: contain; 
    background-position: center center; 
}

источник

2015-09-20 P.Noade

Почему бы не просто создать элемент где высота относительно ширины, поэтому горизонтальная высота по размеру всегда будет относиться к ширине? Я имею в виду, когда вы устанавливаете изображение через свойство background-image. – neilhem

После, не врет, 10 часов поиска я получаю его. Я не теперь, почему это работает ... Но использовать это: HTML

<div id="banner">Your Banner 
</div>

CSS-код

#banner { 
     margin-bottom: 50px; 
     overflow: hidden; 
     width: 100%; 
     height: 500px; 
     position: relative; 
     clear: both; 
     background: transparent url(../images/HeaderBild.jpg) no-repeat fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: 100%; 
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path/to/image/1.jpg',sizingMethod='scale'); 
     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path/to/image/1.jpg',sizingMethod='scale')"; 

    } 

    .wrap-center{ 
     margin: 0 auto; 
     position: relative; 
     max-width: 73.231em; 
    } 

    .banner-centered { 
     text-align: center; 
     position: absolute; 
     display: block; 
     max-width: 75.231em; 
     height: inherit; 
     overflow: hidden; 
     margin-top: 100px; 
    } 

    .banner-centered h2 { 
     font-size: 5.385em; 
     line-height: 1.5; 
     text-transform: uppercase; 
     letter-spacing: 2px; 
     color: #fafafa; 
     font-weight: 100; 
     display: block; 
    }

И JS:

function scrollBanner() { 
    $(document).scroll(function(){ 
     var scrollPos = $(this).scrollTop(); 
     $('#banner-text').css({ 
      'top' : (scrollPos/10)+'px', 
      'opacity' : 1-(scrollPos/400) 
     }); 
     $('#banner').css({ 
      'background-position' : 'center ' + (-scrollPos/2)+'px' 
     }); 
    }); 
} 
scrollBanner();

источник

2015-09-25 09:24:41

Отзывчивое фоновое изображение для прокрутки Parallax

ответ

Смежные вопросы