Domek animacja

pytanie zadane 26 sierpnia 2022 w HTML i CSS przez jasper93 Obywatel (1,310 p.)

Witam, mam problem z zbudowaniem animacji - łączenie figur by finalnie wyszedł z nich domek. Obecnie posiadam kwadrat, chciałem zbudować dach - wyczytałem w Internecie że trójkąt możemy zrobić za pomocą samych borderów. Wszystko szło dobrze do momentu, kiedy miałem za pomocą top i left ustawić dach na prostokącie, totalnie nie wiem jak wyliczyć wysokość, z szerokością nie było problemu, drugi problem, który zauważyłem, że podstawa trójkąta nie jest całkowicie równa z bokiem prostokąta, tutaj też problem z wyliczeniem - mimo, że zastosowałem taką samą wartość jak szerokość prostokąta. Z wysokością kombinowałem ze wzorem jak wysokość trójkąta równobocznego, ale chyba to nie ten trop.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Domek</title>
    <style>
      html {
        font-family: arial, sans-serif;
      }
      span {
        position: absolute;
        top: 7%;
        left: 7%;
        padding: 20px 20px;
        background-color: brown;
        color: white;
        cursor: pointer;
      }

      div {
        position: absolute;
        top: 90%;
        left: 20%;
        width: 0;
        height: 0;
        background-color: brown;
        transition: 1s;
      }

      span:hover + div:nth-child(2) {
        top: 50%;
        left: 50%;
        width: 25vw;
        height: 40vh;
        transform: translate(-50%, -50%);
      }

      div:nth-of-type(2) {
        top: 45%;
        left: calc(50% - 25vw / 2);
        width: 0;
        height: 0;
        border-left: 25vh transparent solid;
        border-right: 25vh transparent solid;
        border-bottom: 25vh black solid;
        background-color: transparent;
      }
    </style>
  </head>

  <body>
    <span>BUDUJEMY</span>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </body>
</html>

1 odpowiedź

odpowiedź 27 sierpnia 2022 przez VBService Ekspert (252,740 p.)
edycja 27 sierpnia 2022 przez VBService

Wszystko szło dobrze do momentu, kiedy miałem za pomocą top i left ustawić dach na prostokącie

elementy możesz ze sobą łączyć używając "normalnego flow" strony, a animacji "dokonać" za pomocą transform.

drugi problem, który zauważyłem, że podstawa trójkąta nie jest całkowicie równa z bokiem prostokąta,

to w tym przypadku nie powinien być "problem", bo domy mają zazwyczaj dachy nieco "szersze"

Sprawdź

<button>Rozwal</button>
<div class="construction-site">
  <div class="roof"></div>
  <div class="base"></div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
button {
  position: absolute;
  top: 1em;
  left: 1em;
  padding: 1.5em 3em;
  border-radius: 1em;
  background-color: brown;
  color: white;
  cursor: default;
  font: 400 1.5em/1.2 system-ui;
  font-variant: small-caps;
  transition: background 550ms;
}
button:hover {
  background-color: red;
  color: black;
}
button:hover ~ .construction-site .roof {
  transform: translate(0, -150%) rotate(-360deg) scale(0.2);
  opacity: 0;
}
button:hover ~ .construction-site .base {
  transform: translate(-200%, 20%) rotate(120deg) scale(1.5);
}
.construction-site {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.roof {
  width: 0;
  height: 0;
  background-color: transparent;
  border-left: 40vh transparent solid;
  border-right: 40vh transparent solid;
  border-bottom: 20vh black solid;
  transition: transform 2s, opacity 2s;
}
.base {
  width: 40vw;
  height: 30vh;
  background-color: brown;
  transition: transform 2s cubic-bezier(0.5,-0.8,0.25,1.4);
}

[ cubic-bezier ]

komentarz 27 sierpnia 2022 przez jasper93 Obywatel (1,310 p.)

Dziękuje za rozwiązanie, zastanawia mnie jak udało Ci się wyliczyć wartości procentowe translate dla poszczególnych elementów?

komentarz 27 sierpnia 2022 przez VBService Ekspert (252,740 p.)
edycja 29 sierpnia 2022 przez VBService

Jak nadasz elementowi np. div szerokość 50vw, co nam daje płowe "dostępnego" ekranu, jeśli umieść go na środku i za pomocą np. translate ustawisz 50%,0 to oznacza, że przesunie się on horyzontalnie (oś X) w prawo o 50% swojej długoś, a -50%,0 ujemna wartość w lewo.

Sprawdź

<div class="construction-site">
  <div class="roof"></div>
  <div class="base"></div>

  <div class="slider sroof">
    <input type="range" min="0" max="300" step="1" value="0" list="scale-300">
    <div class="output">
      <span>.roof</span> <span>{</span>
      <span>transform</span><span>:</span> <span>translate</span><span>(</span>
      <span class="value">0</span><span>%</span><span> , </span><span>0</span><span> );</span>
    </div>    
  </div>

  <div class="slider sbase">
    <input type="range" min="0" max="300" step="1" value="0" list="scale-300">
    <div class="output">
      <span>.base</span> <span>{</span>      
      <span>transform</span><span>:</span> <span>translate</span><span>(</span>
      <span class="value">0</span><span>%</span><span> , </span><span>0</span><span> );</span>
    </div>    
  </div>

  <datalist id="scale-300">
    <option>0</option>
    <option>50</option>
    <option>100</option>
    <option>150</option>
    <option>200</option>
    <option>250</option>
    <option>300</option>
  </datalist>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.construction-site {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.slider {
  margin-top: 3em;
  width: 50vw;
  height: 2em;
}
.slider input {
  width: 100%;
  height: 25%;
  background: rgba(0,0,0,0.2);
  outline: none;
}
.slider input::-webkit-slider-thumb {
  cursor: e-resize;
}
.slider .output {
  background-color: black;
  padding: 0.5em 0.5em;
  margin-top: 1em;
  font: 400 1.05em/1.1 system-ui;
}
.slider .output span:nth-child(1) {
  color: yellow;
  font-weight: 500;
}
.slider .output span:nth-child(3) {
  color: #9a8297;
  font-weight: 500;
}
.slider .output span:nth-child(5) {
  color: yellow;
}
.slider .output span:nth-child(2),
.slider .output span:nth-child(4),
.slider .output span:nth-child(6),
.slider .output span:nth-child(9),
.slider .output span:nth-child(11) {
  color: white;
}
.slider .output span:nth-child(7),
.slider .output span:nth-child(8),
.slider .output span:nth-child(10) {
  color: #d0782a;
}

.roof {
  width: 0;
  height: 0;
  background-color: transparent;
  border-left: 40vh transparent solid;
  border-right: 40vh transparent solid;
  border-bottom: 20vh black solid;
  transition: transform 100ms linear;
}
.base {
  position: relative;
  width: 40vw;
  height: 30vh;
  background-color: brown;
  transition: transform 100ms linear;
}
.base:before { /* window */
  position: absolute;
  content: '';
  width: 10vw;
  height: 10vh;
  top: 25%;
  left: 10%;
  background-color: white;
  background-image: radial-gradient(white, rgba(0,0,0,0.5));
}
.base:after { /* door */
  position: absolute;
  content: '';
  width: 10vw;
  height: 20vh;
  top: 25%;
  right: 10%;
  background-color: white;
  background-image: radial-gradient(white, rgba(0,0,0,0.5));
}

@media only screen and (min-width: 1600px) {
  .base {
    width: 35vw;
  }
  .base:after { /* door */
    width: 5vw;
  }
}
@media only screen and (max-width: 1200px) {
  .base {
    width: 45vw;
  }
}
@media only screen and (max-width: 1000px) {
  .base {
    width: 50vw;
  }
}

window.onload = load;

function load() {
  const roof = document.querySelector('.construction-site .roof'),
        slider_roof = document.querySelector('.slider.sroof input[type="range"]'),
        output_roof = document.querySelector('.slider.sroof .output .value');

  const base = document.querySelector('.construction-site .base'),
        slider_base = document.querySelector('.slider.sbase input[type="range"]'),
        output_base = document.querySelector('.slider.sbase .output .value');

  slider_roof.oninput = setRoofTranslate;
  slider_base.oninput = setBaseTranslate;  

  function setRoofTranslate() {
    const value = parseInt(slider_roof.value) * -1;
    output_roof.textContent = value;
    roof.style.transform = 'translate(' + value + '%, 0)';
  }

  function setBaseTranslate() {
    const value = parseInt(slider_base.value);
    output_base.textContent = value;
    base.style.transform = 'translate(' + value + '%, 0)';
  } 
}

lub to

<div></div>
<div></div>

:root {
  --border-size: 0.5em;
  --box-width: 20em;
  --box-height: 20em;

  --border-left: calc(var(--box-height) / 2 + var(--border-size));
  --border-right: var(--border-left);
  --border-bottom: calc(var(--box-width) / 2 + var(--border-size));

  --border-color-orange: darkorange;
  --border-color-green: green;
  --bacground-color-green: lime;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}
body {
  display: grid;  
  place-content: center;
  height: 100vh;
}
div {
  width: var(--box-width);
  height: var(--box-height);
}
div:nth-child(1) { /* triangle border */
  position: relative;
  background-color: transparent;
  width: 0;
  height: 0;
  border-left: var(--border-left) solid transparent;
  border-right: var(--border-right) solid transparent;
  border-bottom: var(--border-bottom) solid var(--border-color-green);
}
div:nth-child(1):before { /* triangle */
  content: '';
  position: absolute;
  background-color: transparent;
  width: 0;
  height: 0;
  border-left: var(--border-left) solid transparent;
  border-right: var(--border-right) solid transparent;
  border-bottom: var(--border-bottom) solid var(--bacground-color-green);
  transform: translateX(-50%) scale(0.9);
}
div:nth-child(2) {
  background-color: orange;
  border: var(--border-size) solid var(--border-color-orange);
}

P.S. Sprawdź to: anime.js