Эффект параллакса только с CSS3 - PullRequest
Новая
       6

Эффект параллакса только с CSS3

0 голосов
/ 28 мая 2018

Я пытаюсь создать эффект параллакса только с помощью CSS3, но, к сожалению, я не могу, простая структура - это один div с изображением и один div с содержимым, и я не могу использовать изображение в фоновом режиме.

ПРИМЕЧАНИЕ: Пожалуйста, не предлагайте никаких JS-решений и решений для фоновых изображений, так как я пытаюсь обрабатывать их только с CSS3 и тегом изображения в пределах DIV

Может кто-нибудь подсказать, как с этим справиться?Вот JSfiddle 

.image-div{
        width: 100%; 
        float: left;
        -webkit-perspective: 1px;
        perspective: 1px;
        -webkit-perspective-origin: center top;
        perspective-origin: center top;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        position: relative;
    }
    .image-div img{
        width: 100%; 
        height: auto;
    }
    .content-div{
        width: 100%;
        background: #fff; 
        float: left;
        position: relative;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);

    }
<div class="image-div">
        <img src="https://pbs.twimg.com/media/B2XTRwtCAAEnqlP.jpg:large">
    </div>
    <div class="content-div">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet
            lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis
            parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci,
            sed rhoncus pronin sapien nunc accuan eget.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet
                lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis
                parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci,
                sed rhoncus pronin sapien nunc accuan eget.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet
                    lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis
                    parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci,
                    sed rhoncus pronin sapien nunc accuan eget.</p>        
    </div>

1 Ответ

0 голосов
/ 28 мая 2018

JSFiddle

Вот моя пошаговая попытка

1) Оберните ваш контентв элемент-обертку, например <main> с этим стилем 

main {
   height: 100vh;
   perspective: 1px;
   position: relative;
   transform-style: preserve-3d;
}

2) удалить float и повернуть позиции content-div и image-div из relative вabsolute.Укажите некоторое верхнее поле для содержимого (или оно будет перекрывать изображение) и заполните страницу достаточным количеством содержимого, чтобы увидеть эффект.

3) Для более медленного слоя (изображения) вам необходимо настроить его свойства translateZ и scale с соответствующими transform-origin, поэтому добавьте этот стиль 

.image-div{
    width: 100%; 
    position: absolute;
    height: 30vw;
    transform: translateZ(-1px) scale(2);
    transform-origin: 50vw 50vh;
}

Наконец, вы можете замедлить скорость слоя изображения, просто изменив значения для transform: translateZ(-1px) scale(2);, чтобы вы могли настроить его глубину.

общая формула: 

transform: translateZ(-<n> px) scale( <n+1> );

Пример JSFiddle для n = 5

...