[ASK] Fix efek css parallax scrolling untuk firefox


Status
Not open for further replies.

Yusril Ibnu

Beginner 1.0
Halo semua, salam kenal saya member baru disini,
ceritanya saya sedang membuat html yang menginginkan ada efek css parallax scrolling untuk firefox (tanpa memakai js). saya mengikuti tutorial yg ada di website https://alligator.io/css/pure-css-parallax/ , semua berjalan lancar saat saya buka di chrome, namun saat dibuka di firefox ternyata mengalami bug.

ada yang bisa bantu supaya bisa fix problem ini di firefox ?
untuk kodenya mungkin bisa lihat web demo di tutorial tadi.
Terimakasih sebelumnya
 

Yusril Ibnu

Beginner 1.0
Haloo, saya bantu jawab

Boleh di kasih tunjuk script nya bang ?
lalu versi Firefox yang digunakan apakah sudah terbaru ?

html
HTML:
<main class="wrapper">
  <section class="section parallax bg1">
    <h1>Such Adorableness</hi>
  </section>
  <section class="section static">
    <h1>Boring</h1>
  </section>
  <section class="section parallax bg2">
    <h1>SO FWUFFY AWWW</hi>
  </section>
</main>

Ini CSS nya

Code:
.wrapper {
  /* The height needs to be set to a fixed value for the effect to work.
   * 100vh is the full height of the viewport. */
  height: 100vh;
  /* The scaling of the images would add a horizontal scrollbar, so disable x overflow. */
  overflow-x: hidden;
  /* Enable scrolling on the page. */
  overflow-y: auto;
  /* Set the perspective to 2px. This is essentailly the simulated distance from the viewport to transformed objects.*/
  perspective: 2px;
}

.section {
  /* Needed for children to be absolutely positioned relative to the parent. */
  position: relative;
  /* The height of the container. Must be set, but it doesn't really matter what the value is. */
  height: 100vh;

  /* For text formatting. */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-shadow: 0 0 5px #000;
}

.parallax::after {
  /* Display and position the pseudo-element */
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /* Move the pseudo-element back away from the camera,
   * then scale it back up to fill the viewport.
   * Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
  transform: translateZ(-1px) scale(1.5);
  /* Force the background image to fill the whole element. */
  background-size: 100%;
  /* Keep the image from overlapping sibling elements. */
  z-index: -1;
}

/* The styling for the static div. */
.static {
  background: red;
}

/* Sets the actual background images to adorable kitties. This part is crucial. */
.bg1::after {
  background-image: url('https://placekitten.com/g/900/700');
}

.bg2::after {
  background-image: url('https://placekitten.com/g/800/600');
}

demo ada disini : https://codepen.io/tribex/pen/mWNWdz

firefox saya sudah pake yg quantum versi baru. terimakasih sebelumnya
 

martinus

Beginner 2.0
Saya coba bantu brother, mudah-mudahan bisa bantu
untuk permasalah efek paralax memang sedikit bermasalah pada browser firefox, sedikit penambahan pada css selector .section { nya...

position: relative;
menjadi
position: -webkit-relative;
 

Yusril Ibnu

Beginner 1.0
Saya coba bantu brother, mudah-mudahan bisa bantu
untuk permasalah efek paralax memang sedikit bermasalah pada browser firefox, sedikit penambahan pada css selector .section { nya...

position: relative;
menjadi
position: -webkit-relative;

terimakasih sebelumnya, kini efek parallax nya sudah work, namun bg2 jadi nabrak ke bg1, kira kira bagaimana ya supaya fix ?
 

Yusril Ibnu

Beginner 1.0
@Yusril Ibnu solusinya dengan memisahkan parent dan membuat background image di dalam div yang absolute sebagai childnya parent

bagaimana itu caranya? yang saya bingungkan kan wrapper sudah height: 100vh; jika dipisahkan bagaimana ?

tadi saya coba cara @martinus namun dengan menggeser bg 2 memakai margin (khusus untuk firefox), namun sayang cara ini tidak akan responsive di semua layar

@-moz-document url-prefix() {
.bg2::after {margin-top: 220vh;}
}
 
Status
Not open for further replies.

Top