I am trying to recreate a painting of an artist using parallax with the elements that make up the collage, but I can not understand how to position the elements or that it is centered in the center proportionally.
I put a link to my codepen , because I've put the code here, but I think it generates a mistake.
var scene = document.getElementById('scene');
var parallax = new Parallax(scene, {
relativeInput: true
});*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
:root{
--img01: url(http://picsum.photos/1400/720/?random);
--img02_1x: url(http://gutierrezedgar.com/parallax/img/[email protected]);
--img02_2x: url(http://gutierrezedgar.com/parallax/img/[email protected]);
--img03: url(http://gutierrezedgar.com/parallax/img/img_agua-v2_cuadro.png);
--img04: url(http://gutierrezedgar.com/parallax/img/img_agua-v2_hojas.png);
--img05: url(http://gutierrezedgar.com/parallax/img/img_agua-v2_aves.png);
--img06: url(http://gutierrezedgar.com/parallax/img/img_agua-v2_nubes.png);
--img07: url(http://gutierrezedgar.com/parallax/img/img_agua-v2_aves02.png);
--img08a: url(http://gutierrezedgar.com/parallax/img/img_agua-v2_planeta01.png);
--img08b: url(http://gutierrezedgar.com/parallax/img/img_agua-v2_planeta02.png);
--img08c: url(http://gutierrezedgar.com/parallax/img/img_agua-v2_planeta03.png);
--img09a: url(http://gutierrezedgar.com/parallax/img/img_agua-v2_constelacion01.png);
--img09b: url(http://gutierrezedgar.com/parallax/img/img_agua-v2_constelacion02.png);
--img09c: url(http://gutierrezedgar.com/parallax/img/img_agua-v2_constelacion03.png);
--img10: url(http://gutierrezedgar.com/parallax/img/img_agua-v2_splash.png);
}
body{
--fondo_agua: var(--img02_1x);
--img_cuadro: var(--img03);
--img_hojas: var(--img04);
--img_aves: var(--img05);
--img_aves02: var(--img07);
--img_nubes: var(--img06);
--img_planeta01: var(--img08a);
--img_planeta02: var(--img08b);
--img_planeta03: var(--img08c);
--img_constelacion01: var(--img09a);
--img_constelacion02: var(--img09b);
--img_constelacion03: var(--img09c);
--img_splash: var(--img10);
background-color: #ddd;
min-height: 100vh;
overflow: hidden;
}
.seccion{
text-align: center;
}
.layer.fondo{
margin-left: -10vw;
margin-top: -10vw;
width: 130vw;
min-height: 130vh;
background-image: var(--fondo_agua);
background-size: cover;
background-position: center;
}
.layer{
--ancho: 550px;
--alto: 747px;
--d: 2.6;
--w: calc( var(--ancho) / var(--d));
--h: calc( var(--alto) / var(--d));
font-size: 13px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
display: inline-block;
width: var(--w);
height: var(--h);
}
.layer:not(.fondo):not(.cuadro){
top: calc(50% - (var(--h)/2) + (var(--y)) ) !important;
left: calc(50% - (var(--w)/2) + (var(--x)) ) !important;
transition:
width ease .3s,
height ease .3s,
top ease .3s,
left ease .3s;
}
.cuadro{
--ancho: 90vh;
--alto: 90vh;
--d: 1.5;
max-width: 900px;
max-height: 900px;
background-image: var(--img_cuadro);
top: calc(50% - (var(--h)/2)) !important;
left: calc(50% - (var(--w)/2)) !important;
}
.hojas{
--ancho: 550px;
--alto: 747px;
--x: -15em;
--y: 0px;
background-image: var(--img_hojas);
}
.aves{
--ancho: 310px;
--alto: 284px;
--x: 6em;
--y: -12.5em;
background-image: var(--img_aves);
}
.aves02{
--ancho: 315px;
--alto: 558px;
--x: 12em;
--y: -6em;
background-image: var(--img_aves02);
}
.nubes{
--ancho: 825px;
--alto: 322px;
--x: 5.8em;
--y: -12em;
background-image: var(--img_nubes);
}
.planeta01,
.planeta02,
.planeta03{
mix-blend-mode: screen;
}
.planeta01{
--ancho: 221px;
--alto: 221px;
--x: -12em;
--y: 3.2em;
background-image: var(--img_planeta01);
}
.planeta02{
--ancho: 205px;
--alto: 205px;
--x: 12em;
--y: 4em;
background-image: var(--img_planeta02);
}
.planeta03{
--ancho: 232px;
--alto: 230px;
--x: -8.5em;
--y: -12em;
background-image: var(--img_planeta03);
}
.const01{
--ancho: 221px;
--alto: 221px;
--x: -14em;
--y: -1em;
background-image: var(--img_constelacion01);
}
.const02{
--ancho: 205px;
--alto: 204px;
--x: 16em;
--y: -1.5em;
background-image: var(--img_constelacion03);
}
.const03{
--ancho: 232px;
--alto: 230px;
--x: -12.5em;
--y: -14em;
background-image: var(--img_constelacion02);
}
.splash{
--ancho: 408px;
--alto: 530px;
--x: 1.5em;
--y: 14em;
background-image: var(--img_splash);
opacity: 1;
}
@media (min-width: 600px){
.layer{
font-size: 16px;
--d: 2.2;
}
.cuadro{
--d: 1.2;
}
}
@media (min-width: 960px){
body{
--fondo_agua: var(--img02_2x);
}
.layer{
font-size: 1.2em;
}
.cuadro{
--ancho: 720px;
--alto: 720px;
--d: 1 ;
}
.hojas{
--d: 1.6;
}
.aves02, .aves{
--d: 1.5;
}
.aves{
--y: -15em;
}
.splash{
--d: 1.5;
}
}<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/parallax.min.js"></script>
<body>
<section class="seccion agua" id="scene">
<figure class="layer fondo" data-depth="0.05"></figure>
<figure class="layer cuadro" data-depth="0.20"></figure>
<figure class="layer hojas" data-depth="0.30"></figure>
<figure class="layer aves" data-depth="0.40"></figure>
<figure class="layer nubes" data-depth="0.45"></figure>
<figure class="layer aves02" data-depth="0.50"></figure>
<figure class="layer planeta01" data-depth="0.55"></figure>
<figure class="layer planeta02" data-depth="0.60"></figure>
<figure class="layer planeta03" data-depth="0.55"></figure>
<figure class="layer const01" data-depth="0.65"></figure>
<figure class="layer const02" data-depth="0.70"></figure>
<figure class="layer const03" data-depth="0.68"></figure>
<figure class="layer splash" data-depth="0.80"></figure>
</section>
</body>Yes they realize, in some resolutions all the images are more down or up and I do not understand why.
Suddenly I am the one who passes me with the positions using variables and units related to the viewport, but, I would like an expert to help me better understand how to place the coordinates or how to solve so that it looks more to the center vertically.
Thank you.