Как применить параллакс в фоновом изображении

У меня есть два блока, в которых я дал фоновое изображение с background-size: cover. Теперь я хочу, чтобы он сделал параллакс.Как применить параллакс в фоновом изображении

Ниже мой код:

HTML:

<div class="personalSessDiv"> 
    <div class="pi-section"> 
      My content 
     </div> 
    </div> 
</div> 
<div class="betterGradDiv"> 
    <div class="pi-section"> 
      My content 
     </div> 
    </div> 
</div>

CSS:

.personalSessDiv{ 
    background: url(../images/common/home-bg-2.jpg) no-repeat; 
    background-size: cover; 
    height: 392px; 
} 
.betterGradDiv{ 
    background: url(../images/common/home-bg-3.jpg) no-repeat; 
    background-size: cover; 
    height: 453px; 
}

источник

2015-08-14 Sharjil Khan

показать нам, что вы пытались так далеко от вашего конца. Здесь ребята не пишут код для вас, пожалуйста, прочитайте http://stackoverflow.com/help/how-to-ask, прежде чем задавать какие-либо вопросы. и для вашего запроса http://pixelcog.github.io/parallax.js/, это может помочь. – vivekkupadhyay

Попробуйте этот учебник http://keithclark.co.uk/articles/pure-css-parallax-websites/ или взгляните на эту скрипку http://codepen.io/keithclark/pen/JycFw – Ionut

Im не уверен, что вы имеете в виду параллакса, есть очень много различных вариантов. Но попробуйте добавить этот код в div, который вы хотите использовать для прокрутки.

Я уверен, что вы можете попробовать настроить, чтобы удовлетворить.

background-size: cover; 
    background-position: bottom; 
    background-attachment: fixed; 
    -webkit-transition: background-image 1s; 
    -moz-transition: background-image 1s; 
    -ms-transition: background-image 1s; 
    -o-transition: background-image 1s; 
    transition: background-image 1s; 
    overflow: hidden;

источник

2015-08-14 07:42:14 James111

Мне нужен плагин jquery который правильно подходит для моего кода, чтобы дать эффект прокрутки параллакса –

@SharjilKhan, вы должны были указать, что хотите использовать плагин jquery в своем вопросе. Этот код является просто быстрым и легким способом создания небольшого эффекта параллакса – James111

Это то, что мне было нужно, когда я google'd свой вопрос, и он работал на меня The CSS фоновое вложение недвижимости

body { 
    background-image: url('image.png'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
}

источник

2017-06-02 17:40:34

Как применить параллакс в фоновом изображении

ответ

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