Как сверстать параллакс на заднем плане, с условием, что кристаллы на разных слоях?

#html #css #вёрстка #parallax

Например три разных слоя с группами кристаллов. Как сверстать, спозиционировать эти
группы, чтобы они не перекрывали информацию?
    

Ответы

Ответ 1

Как например, использовать parallax.js:



var sceneF = document.getElementById('scene-forward');
var parallaxInstance = new Parallax(sceneF);

var sceneB = document.getElementById('scene-backward');
var parallaxInstance = new Parallax(sceneB);
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.section {
  height: 100%;
  width: 100%;
  overflow: hidden;  
  position: relative;
  background: rgba(53,93,115,1);
  background: linear-gradient(to top right, rgba(53,93,115,1) 0%, rgba(32,59,73,1)
100%);
}

.section{
  height: 100%;
  width: 100%;
  padding: 2rem 4rem;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  text-align: center;
  justify-content: center;
  z-index: 10;
}

.section-title {
  text-transform: uppercase;
  font-weight: light;
  color: #fff;
  margin-bottom: 4rem;
  z-index: 10;
}

.section-body {
  max-width: 30rem;
  color: #fff;
  font-size: .875rem;
  line-height: 1.25rem; 
  position: relative;
  z-index: 10;
}

.scene,
.layer {
    position: absolute;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
}

#scene-forward {
  z-index: 5;
}

#scene-backward {
  z-index: 20;
}

.layer svg {
  position: absolute;
}

#pin-1 {
  transform: scale(.5);
  left: 5%;
  bottom: 30%;
}

#pin-2 {
  transform: scale(.45) rotate(20deg);
  right: 10%;
  bottom: 30%;
}

#pin-3 {  
  transform: scale(.15) rotate(45deg);
  right: -10%;
  bottom: -40%;
}

#pin-4 {
  transform: scale(.2) rotate(60deg);
  right: 0%;
  bottom:10%;
  filter: blur(10px);
}

#pin-5 {
  transform: scale(.5) rotate(10deg);
  left: 20%;
  bottom:10%;
  filter: blur(4px);
}
  

  
  
  

    
Три основных требования

    

      

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, ullam molestiae
maxime! Deserunt similique at iure iste odit dolore rem.
      
      

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, fugiat!
      
      

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, ratione
ducimus dolorum et quisquam impedit temporibus reiciendis aut delectus! Autem rem,
doloremque reprehenderit tempore voluptatem natus asperiores delectus vel aliquam.
      
    
    
    
    
    

      

        
      
      
      

        
      
      
      

        
      
      
      

        
      
    
    
    
      
      

        
      
    
  




На весь экран лучше смотреть.

codepen


Ответ 2

Добавьте большой div с позицией absolute, в котором весь сайт, а треугольники задать
фоном к div-ам. Для парралакса можно использовать parallax.js. Если возникнут проблемы
с позицией, надо задать z-index (чем больше, тем выше слой элемента с позицией absolute/relative)