How to Create a Parallax Scroll Effect Using Pure CSS Only in Chrome

How to Create a Parallax Scroll Effect Using Pure CSS Only in Chrome

In this guide, you will be setting up a few lines of CSS to create a parallax scroll effect on a web page.

Pengantar

CSS modern adalah alat bantu andal yang dapat Anda gunakan untuk membuat banyak fitur Antarmuka Pengguna (UI) mutakhir. Dahulu, fitur ini mengandalkan pustaka JavaScript.

Dalam panduan ini, Anda akan menyiapkan beberapa baris CSS untuk membuat efek gulir parallax pada halaman web. Anda akan menggunakan gambar dari placekitten.com sebagai gambar latar belakang penampung.

Anda akan memiliki halaman web dengan efek gulir parallax yang murni menggunakan CSS saja setelah menyelesaikan tutorial.

Peringatan : Artikel ini menggunakan properti CSS eksperimental yang tidak berfungsi di semua peramban. Proyek ini telah diuji dan berfungsi di Chrome. Teknik ini kurang berhasil di Firefox, Safari, dan iOS karena adanya beberapa optimalisasi di peramban-peramban tersebut.

Langkah 1 — Membuat Proyek Baru

Dalam langkah ini, gunakan baris perintah untuk menyiapkan folder dan berkas proyek baru. Untuk memulai, buka terminal Anda dan buat folder proyek baru.

Langkah 2 — Menyiapkan Struktur Aplikasi

Dalam langkah ini, Anda akan menambahkan HTML yang diperlukan untuk membuat struktur proyek.

Langkah 3 — Membuat Berkas CSS dan Menambahkan CSS Awal

Dalam langkah ini, Anda akan membuat sebuah berkas CSS. Kemudian, Anda akan menambahkan CSS awal untuk menata gaya situs web dan membuat efek parallax.

Langkah 4 — Menambahkan Gaya untuk Kelas .section

Dalam langkah ini, Anda akan menambahkan gaya ke kelas .section.

Langkah 5 — Menambahkan Gaya untuk Kelas .parallax

Dalam langkah ini, Anda akan menambahkan gaya ke kelas .parallax.

Langkah 6 — Menambahkan Gambar dan Latar Belakang untuk Setiap Bagian

Dalam langkah ini, Anda akan menambahkan properti CSS terakhir untuk menambahkan gambar latar belakang dan warna latar belakang bagian statis.

Langkah 7 — Menautkan styles.css dan Membuka index.html di Peramban

Dalam langkah ini, Anda akan menautkan berkas styles.css dan membuka proyek di peramban untuk melihat efek gulir parallax.

css

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

CSS Alignment Made Simple

CSS is seen as an impediment in web development for many of us. Most of the time it looks like even when you follow the rules and everything seems clear, it still doesn’t work the way you want it to.

This CSS Cut Out Effect is Guaranteed to Blow Your Mind 🤯

This CSS Cut Out Effect is Guaranteed to Blow Your Mind. This effect is so cool and just fun to see. What it comes down to is having a background image show through the text.

CSS Animation: translate3d, backdrop-filter, and Custom Tags

Learn how to create a smooth animation using the CSS transform translate3d prop, as well as why we use cubic-bezier transition timing function and its benefits.