CSS параллакс прокрутка с фоновым изображением движущегося

Вот что в настоящее время выглядит мой параллакса скроллинг как:CSS параллакс прокрутка с фоновым изображением движущегося

w3schools.com

У меня есть это:

background-image:url("http://google.com"); 
background-attachment: fixed;

я хочу, но я не хочу используйте материал «materialize css»: materializecss.com

, где background-image перемещается немного, пока вы прокручиваете вверх или вниз он страница.

источник

2016-11-21 jasonmoqio

Вам не нужно использовать materialize.css, посмотрите на мой пример здесь

https://jsfiddle.net/sug65rh0/

HTML

<div class="bgimg-1"> 
    <div class="caption"> 
    <span class="border">SCROLL DOWN</span> 
    </div> 
</div> 

<div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;"> 
    <h3 style="text-align:center;">Parallax Demo</h3> 
    <p>Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque non molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis, ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.</p> 
</div> 

<div class="bgimg-2"> 
    <div class="caption"> 
    <span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">LESS HEIGHT</span> 
    </div> 
</div> 

<div style="position:relative;"> 
    <div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;"> 
    <p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p> 
    </div> 
</div> 

<div class="bgimg-3"> 
    <div class="caption"> 
    <span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">SCROLL UP</span> 
    </div> 
</div> 

<div style="position:relative;"> 
    <div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;"> 
    <p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p> 
    </div> 
</div> 

<div class="bgimg-1"> 
    <div class="caption"> 
    <span class="border">COOL!</span> 
    </div> 
</div>

CSS

body, html { 
    height: 100%; 
    margin: 0; 
    font: 400 15px/1.8 "Lato", sans-serif; 
    color: #777; 
} 

.bgimg-1, .bgimg-2, .bgimg-3 { 
    position: relative; 
    opacity: 0.65; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 

} 
.bgimg-1 { 
    background-image: url("http://www.w3schools.com/howto/img_parallax.jpg"); 
    min-height: 100%; 
} 

.bgimg-2 { 
    background-image: url("http://www.w3schools.com/howto/img_parallax2.jpg"); 
    min-height: 400px; 
} 

.bgimg-3 { 
    background-image: url("http://www.w3schools.com/howto/img_parallax3.jpg"); 
    min-height: 400px; 
} 

.caption { 
    position: absolute; 
    left: 0; 
    top: 50%; 
    width: 100%; 
    text-align: center; 
    color: #000; 
} 

.caption span.border { 
    background-color: #111; 
    color: #fff; 
    padding: 18px; 
    font-size: 25px; 
    letter-spacing: 10px; 
} 

h3 { 
    letter-spacing: 5px; 
    text-transform: uppercase; 
    font: 20px "Lato", sans-serif; 
    color: #111; 
}

источник

2016-11-21 16:04:03

привет ваш пример не работает ... – jasonmoqio

Чтобы получить этот параллакс эффект, фоновые изображения должны быть размещены на разных элементах , Этим элементам дополнительно необходимо определить привязку фона: исправлено. Определяя привязку фона, можно изменить поведение и расположение любого фонового изображения.

источник

2016-11-21 16:05:18

Можете ли вы пойти немного дальше с ответом? Как только вы разместили фоновое изображение на другом элементе и присвоили ему свойство/значение background-attachment: fixed', как вы затем изменяете свою скорость прокрутки (также называемую смещением прокрутки)? –

попробуйте добавить этот класс в разделе изображений

background:url('http://google.com') no-repeat center center fixed; 
background-size:cover"

источник

2016-11-21 16:07:33

CSS параллакс прокрутка с фоновым изображением движущегося

ответ

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