Как использовать изображение: фиксированный, z-индекс и эффекты прокрутки

Question

Мне интересно, кто-нибудь может сказать мне, как использовать похожие эффекты изображения и т. Д. для тех, кто на http://www.handsoneveryday.com/ для фонового изображения, info.box в центре страницы и серый, который прокручивает все это.
Я пробовал использовать z-индекс и позицию: исправлено, но ничего не работает.
Спасибо большое
-ina

Answer 1

Это очень просто, вы можете достичь этого, применив следующие свойства к вашему классу, скажем .parrallax.

.parallax { 
    background-image: url("PATH_OF_IMAGE"); 
    background-attachment: fixed; 
    background-size: 100% 40%; 
    height: 300px; 
} 

Здесь работает демо -

.parallax { 
 
    background-image: url(https://images.unsplash.com/photo-1452723312111-3a7d0db0e024?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375); 
 
    background-attachment: fixed; 
 
    background-size: 100% 40%; 
 
    height: 300px; 
 
} 
 

 
.diffImg { 
 
    background-image: url('https://images.unsplash.com/photo-1449452198679-05c7fd30f416?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375'); 
 
}

<div class="parallax"></div> 
 
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
<div class="parallax diffImg"></div>

Answer 2

Это достигается с помощью эффекта параллакса с помощью CSS и HTML.

Это довольно легко, и помощь по кодированию может быть найдена here.

Пример кода, который должен быть построен, может быть seen here.

Надеюсь, это поможет.

Answer 3

Вот быстрый и грязный пример параллакса.

CSS: размещение div, затем масштабированное 3d-преобразование на оси z. Ось z переходит в экран. Масштабирование состоит в том, чтобы не допустить, чтобы слой от вас (далее на экране) стал меньше. Поскольку это перспектива 3d-преобразования, это проблема.

Надеюсь, это поможет.

Беста,

Tim

.parallax { 
 
    perspective: 1px; 
 
    height: 100vh; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
} 
 
.parallax__layer { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 
.parallax__layer-lower { 
 
    top: 100px; 
 
} 
 
.parallax__layer-deep { 
 
    transform: translateZ(-2px) scale(3); 
 
} 
 
.parallax__layer-back { 
 
    transform: translateZ(-1px) scale(2); 
 
}

<div class="parallax"> 
 
    <div class="parallax__layer parallax__layer-lower parallax__layer-back"> 
 
    Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. 
 
    </div> 
 
    <div class="parallax__layer parallax__layer-deep"> 
 
    Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. 
 
    </div> 
 
</div>