Animasi sinematik

Gambar yang ada dalam animasi.

Berikut adalah demo animasi:

— Berblog

Kenapa harus saya berblog? Kerana.. ianya lebih baik dari saya termangu-mangu dan duduk bermenung.

Orandableg's

Sebuah blog yang tidak khusus kepada sesuatu tajuk. Apa saja asal boleh, patut dan munasabah. Tiada hoax.

Pembaca

Anda! Dan sesiapa saja yang sudi menjenguk blog ini. Tiada larangan untuk membaca.

Jom berblog!

Tak paksa. Berblog la dengan risiko sendiri.

↻

HTML view ▼

<div style="background: #050505;
  color: #fff;
  height: auto;
  max-height: 540px;
  overflow: hidden;
  width: 100%;">
<div class="pentass">
  <div class="kutama" style="background: #333;
  border: solid 1px #444;
  padding: 1rem;
  max-width: 100%;
  width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;">
    <div style="display: grid;
  align-content: center;
  grid-column: 1/-1;">
      <span style="font: x-large Courier">— <b>Berblog</b></span>
      <h1>Kenapa harus saya berblog? Kerana.. ianya lebih baik dari saya termangu-mangu dan duduk bermenung.</h1>     
    </div>
    <img src="https://blogger.googleusercontent.com/img/a/AVvXsEhTImG5Q0E7KEPdYH5kM0T6OQqZT8z6m2fnoE0cTBsWuSt-JGiKKz-qksvXlbqYHyJliSNDqZypXy54ALEb16bs3rMfpcNZyyf3NfLUfPsJpO9celwXgfokufAEt807rWZkyQlOEo8bjza2MQw_2Hzi-pCobQIm3k8vxblqff3OtBuebZQ0u3SRbM2j=s800"/>
    <img src="https://images.unsplash.com/photo-1558459654-c430be5b0a44?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=80&w=800"/>
    <div style="grid-column: auto;">
      <p>Orandableg's</p>
      <p>Sebuah blog yang tidak khusus kepada sesuatu tajuk. Apa saja asal boleh, patut dan munasabah. Tiada hoax.</p>
    </div>
    <div style="grid-column: auto;">
      <p>Pembaca</p>
      <p>Anda! Dan sesiapa saja yang sudi menjenguk blog ini. Tiada larangan untuk membaca.</p>
    </div>
    <div class="tlaung">
      <p>Jom berblog!</p>
      <p>Tak paksa. Berblog la dengan risiko sendiri.</p>
    </div><br/>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGUJLLdDy927-6z6FgpuvPr1f247mZMXwNZthTbBPPLHi3frdtQTfmXwZnx-y6BwmN3w64ZV4Mpazd2LfV1r5VNl9rEO9B2k4O-qWysbpXEsrNT4ZSJmtub9TH8AjgBpkZfaw1TNqYZr4/s800/DSC07414+bwaktu.jpg"/>
    <img src="https://blogger.googleusercontent.com/img/a/AVvXsEhv5RNu-jYPItmERAMvaBw424BJV4TzxoYLedIUagcS51b8XljZmBXWFnzia-Pn6cK7vbdGydeTT2qQugJHIpce58M86J7pxx18K5MkDzU5EeaspRB_YwJZk1x1XNigYURA6dzSD2AX7orBQNl7_1H-O4oWqzJTOvzrm4f7uCBEr8t-SI5QSAsXN1kR=s800"/>    
    <img src="https://images.unsplash.com/photo-1603791445824-0050bd436b6d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=80&w=840"/>
  </div>
</div>
</div>
<style>
  .kutama > * {
  grid-column: 1/-1;
}
img {
  max-width: 100%;
}
p {
  line-height: 1.5;
  margin: 1rem 0;
  color: white;
}
h1 {
  line-height: 1.3;
  font-size: 4vw;
  margin: 1rem 0;
}
.tlaung {
  text-align: center;
  background-color: #3173fa;
  padding: 1vw 2vw;
}
.tlaung > p {
  line-height: 1.5;
  color: white;
  font-size: large;
}
.pentass {
  perspective: 1200px;
  transform-style: preserve-3d;
  -webkit-animation: cinematic-camera 15s cubic-bezier(0.6, 0, 0.4, 1) both infinite;
          animation: cinematic-camera 15s cubic-bezier(0.6, 0, 0.4, 1) both infinite;
}
@-webkit-keyframes cinematic-camera {
  from {
    perspective-origin: 60% 40%;
  }
  to {
    perspective-origin: 40% 60%;
  }
  from, to {
    opacity: 0;
  }
  25%, 85% {
    opacity: 1;
  }
}
@keyframes cinematic-camera {
  from {
    perspective-origin: 60% 40%;
  }
  to {
    perspective-origin: 40% 60%;
  }
  from, to {
    opacity: 0;
  }
  25%, 85% {
    opacity: 1;
  }
}
.pentass:after {
  content: "";
  background: linear-gradient(to bottom, #000, #0000 20%, #0000 80%, #000);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.kutama {
  transform-origin: top center;
  transform-style: preserve-3d;
  -webkit-animation: inherit;
          animation: inherit;
  -webkit-animation-name: cinematic;
          animation-name: cinematic;
}
.kutama > img {
  display: block;
  transform-style: preserve-3d;
  -webkit-animation: inherit;
          animation: inherit;
  -webkit-animation-name: image-pop;
          animation-name: image-pop;
}
@-webkit-keyframes image-pop {
  70%, 100% {
    transform: translate3d(0, 0, 60px);
  }
}
@keyframes image-pop {
  70%, 100% {
    transform: translate3d(0, 0, 60px);
  }
}
.kutama > img:last-of-type {
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
}
@-webkit-keyframes cinematic {
  from {
    transform: translateZ(-200px) rotateY(30deg) translateY(50vh);
  }
  to {
    transform: translateZ(-100px) rotateY(-30deg) translateY(-100%) translateY(50vh);
  }
}
@keyframes cinematic {
  from {
    transform: translateZ(-200px) rotateY(30deg) translateY(50vh);
  }
  to {
    transform: translateZ(-100px) rotateY(-30deg) translateY(-100%) translateY(50vh);
  }
}
</style>

Tutup

CSS disesuaikan untuk paparan di blog ini, dipetik dari codepen.