How to position several elements in the center with parallax.js?

Ask Question

Asked 7 years, 3 months ago

Modified 7 years, 3 months ago

Viewed 245 times

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 well how to position the elements or that it is centered to the center proportionally.

I put a link to my codepen, because I put the code here, but I think it generates an error.

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>

If you notice, in some resolutions all the images are more down or up and I do not understand why.

Suddenly it's me that I'm ready 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 fix so that it looks more vertically .

asked Aug 14, 2018 at 0:57

Edgar Gutiérrez

1163 bronze badges

The problem is you're using ems, witch are variable across DOM based on font-size of parent. If you want a single unit across all DOM use rem, which is root em and hence easier to set: body{font-size: 10px !important} I can't be sure and, considering what you've done, you are the expert on your own artwork, but I'd guess you might also have good results using vh as a unit, at least above a certain screen width.

tao
– tao

2018-08-14 01:16:48 +00:00
Commented Aug 14, 2018 at 1:16
Yes, I know how em works, which is a variable depending on the font-size of the parent element where it is declared. I use it precisely, being able to manipulate sizes quickly in a single statement in media query, but from there to whoever produces the error, I doubt it, since I first use pixels and then I make a conversion and in both cases the same thing happens. Regarding the use of vh I tried it for both sizes and positioning, even vmin but it did not solve my positioning problem, in fact I could control it more with em.

Edgar Gutiérrez
– Edgar Gutiérrez

2018-08-14 14:41:29 +00:00
Commented Aug 14, 2018 at 14:41

Add a comment |

0 Your Answer

Sign up or log in

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.

Collectives™ on Stack Overflow

How to position several elements in the center with parallax.js?

0

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

0

Know someone who can answer? Share a link to this question via email, Twitter, or Facebook.

Your Answer

Sign up or log in

Post as a guest