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

ПРИМЕЧАНИЕ. Не предлагайте никаких решений 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>
2
Sanjeev Kumar 28 Май 2018 в 12:56

1 ответ

Лучший ответ

Вот мой пошаговый подход:


  • Оберните свой контент в элемент-оболочку, например <main> с этим стилем

    main {
      position: relative;
      min-height: 100vh;
      perspective: 1px;
      transform-style: preserve-3d;
    }
    
  • удалите float и поверните положение content-div и image-div с relative на absolute. Задайте верхнее поле для содержимого (или оно будет перекрывать изображение) и заполните страницу достаточным количеством содержимого, чтобы увидеть эффект.

  • К более медленному слою (изображению) вам необходимо настроить его свойства 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> );

Вот полный пример

body, html { padding: 0; margin: 0; font: 1rem/1.5 Arial; }

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

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

.image-div img {
    width: 100%; 
    height: 100%;
}
 
.content-div{
    width: 100%;
    background: #fff; 
    position: absolute;
    z-index: 2;
    margin-top: 32vw;
}
<main>

   <div class="image-div">
      <img src="//via.placeholder.com/1920x600">
   </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 disparturient 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 disparturient 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 disparturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>                  
    </div>      
 </main>

А здесь есть интерактивная демонстрация, которую я сделал с некоторыми полезностями, такими как переменные CSS, плавная прокрутка и aspect-ratio.

enter image description here

7
Fabrizio Calderan loves trees 29 Янв 2021 в 19:04