One place for hosting & domains

      Chrome

      Cara Membuat Efek Gulir Parallax Menggunakan Murni CSS Saja di Chrome


      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.

      Ketikkan perintah berikut untuk membuat folder proyek:

      Dalam hal ini, Anda menamai folder tersebut css-parallax. Sekarang, masuk ke folder css-parallax:

      Selanjutnya, buat berkas index.html di folder css-parallax dengan perintah nano:

      Anda akan menempatkan semua HTML untuk proyek ke dalam berkas ini.

      Di langkah selanjutnya, Anda akan mulai membuat struktur halaman web.

      Langkah 2 — Menyiapkan Struktur Aplikasi

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

      Di dalam berkas index.html, tambahkan kode berikut:

      css-parallax/index.html

      
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>CSS Scrolling Parallax</title>
        </head>
        <body></body>
      </html>
      

      Ini adalah struktur dasar kebanyakan halaman web yang menggunakan HTML.

      Tambahkan kode berikut di dalam tag <body>:

      css-parallax/index.html

      
      <body>
      ...
         <main>
            <section class="section parallax bg1">
               <h1>Cute Kitten</h1>
            </section>
            <section class="section static">
               <h1>Boring</h1>
            </section>
            <section class="section parallax bg2">
               <h1>Fluffy Kitten</h1>
            </section>
         </main>
      ...
      </body>
      
      

      Kode ini menghasilkan tiga bagian berbeda. Dua bagian akan memiliki gambar latar belakang, dan satu lagi akan berupa latar belakang statis dan polos.

      Dalam beberapa langkah selanjutnya, Anda akan menambahkan gaya untuk setiap bagian menggunakan kelas yang Anda tambahkan di HTML.

      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.

      Pertama, buat berkas styles.css di folder css-parallax dengan perintah nano:

      Di sinilah Anda akan menempatkan semua CSS yang diperlukan untuk membuat efek gulir parallax.

      Selanjutnya, mulai dengan kelas .wrapper. Di dalam berkas styles.css, tambahkan kode berikut:

      css-parallax/styles.css

      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        perspective: 2px;
      }
      

      Kelas .wrapper mengatur properti perspective dan scroll untuk keseluruhan halaman.

      Tinggi pelipat perlu diatur ke nilai tetap agar efek dapat berfungsi. Anda dapat menggunakan unit vh viewport yang telah diatur ke 100 untuk mendapatkan ketinggian penuh viewport layar.

      Bila Anda mengatur skala gambar, bilah gulir horizontal akan ditambahkan ke layar, sehingga Anda dapat menonaktifkannya dengan menambahkan overflow-x: hidden;. Properti perspective mensimulasikan jarak dari viewport ke elemen semu yang akan Anda buat dan transformasikan lebih jauh di CSS.

      Di langkah selanjutnya, Anda akan menambahkan CSS lainnya untuk menata gaya halaman web.

      Langkah 4 — Menambahkan Gaya untuk Kelas .section

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

      Di dalam berkas style.css, tambahkan kode berikut di bawah kelas wrapper:

      css-parallax/styles.css

      
      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        perspective: 2px;
      }
      .section { 
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      

      Kelas .section mendefinisikan properti ukuran, tampilan, dan teks untuk bagian utama.

      Atur posisi relative agar anak, .parallax::after dapat sepenuhnya diposisikan secara relatif ke elemen induk .section.

      Setiap bagian memiliki view-height(vh) sebesar 100 untuk mengambil ketinggian penuh viewport. Nilai ini dapat diubah dan diatur ke ketinggian apa pun yang Anda sukai untuk setiap bagian.

      Terakhir, properti CSS selebihnya digunakan untuk memformat dan menambahkan penataan gaya pada teks di dalam setiap bagian. Properti ini memosisikan teks di tengah setiap bagian dan menambahkan warna white (putih).

      Selanjutnya, Anda akan menambahkan elemen semu dan menata gayanya untuk membuat efek parallax pada dua bagian di HTML.

      Langkah 5 — Menambahkan Gaya untuk Kelas .parallax

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

      Pertama, Anda akan menambahkan elemen semu di kelas .parallax yang akan diberi gaya.

      Catatan: Anda dapat mengunjungi dokumentasi web MDN untuk mempelajari lebih lanjut tentang elemen semu CSS.

      Tambahkan kode berikut di bawah kelas .section:

      css-parallax/styles.css

      ...
      
      .section {
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      ...
      

      Kelas .parallax menambahkan elemen semu ::after ke gambar latar belakang dan menyediakan transformasi yang diperlukan untuk efek parallax.

      Elemen semu adalah anak terakhir dari elemen dengan kelas .parallax.

      Paruh pertama dari kode menampilkan dan memosisikan elemen semu. Properti transform menjauhkan elemen semu dari kamera di z-index, lalu menskalakannya kembali untuk mengisi viewport.

      Karena elemen semu menjauh, seakan-akan bergerak lebih lambat.

      Di langkah selanjutnya, Anda akan menambahkan gambar latar belakang dan gaya latar belakang statis.

      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.

      Pertama, tambahkan warna latar belakang pekat ke bagian .static dengan kode berikut setelah kelas .parallax::after:

      css-parallax/styles.css

      ...
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      
      .static {
        background: red;
      }
      ...
      

      Kelas .static menambahkan latar belakang ke bagian statis yang tidak memiliki gambar.

      Kedua bagian dengan kelas .parallax juga memiliki kelas ekstra yang masing-masing berbeda. Gunakan kelas .bg1 dan kelas .bg2 untuk menambahkan gambar latar belakang Kitten.

      Tambahkan kode berikut ke kelas .static:

      css-parallax/styles.css

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

      Kelas .bg1, .bg2 menambahkan masing-masing gambar latar belakang untuk setiap bagian.

      Gambar dari situs web placekitten. Ini adalah layanan untuk mendapatkan gambar anak kucing untuk digunakan sebagai penampung.

      Karena semua kode untuk efek gulir parallax telah ditambahkan, Anda dapat menautkan ke berkas styles.css di index.html.

      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.

      Pertama, tambahkan kode berikut ke tag <head> di berkas index.html:

      css-parallax/index.html

       ...
      <head>
        <meta charset="UTF-8" />
        <^>
        <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/styles.css" />
        <^>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS Parallax</title>
      </head>
      
      ...
      

      Sekarang, Anda dapat membuka berkas index.html di peramban:

      Gif efek gulir parallax

      Dengan demikian, Anda telah menyiapkan halaman web yang berfungsi dengan efek gulir. Lihatlah repositori GitHub ini untuk mengetahui kode selengkapnya.

      Kesimpulan

      Dalam artikel ini, Anda menyiapkan proyek dengan berkas index.html dan styles.css serta sekarang memiliki halaman web yang fungsional. Anda telah menambahkan struktur halaman web dan membuat gaya untuk berbagai bagian di situs.

      Anda bisa saja menempatkan gambar yang digunakan atau membuat efek parallax menjauh sehingga gerakannya menjadi lebih lambat. Anda harus mengubah jumlah piksel pada properti perspective dan transform. Jika Anda tidak ingin gambar latar belakang bergulir sama sekali, gunakan background-attachment: fixed; sebagai ganti perspective/translate/scale.



      Source link

      Wie man einen Parallax Scrolling-Effekt mit Pure CSS in Chrome erstellt.


      Einführung

      Modernes CSS ist ein leistungsstarkes Werkzeug, mit dem Sie viele erweiterte Funktionen der Benutzeroberfläche (UI) erstellen können. In der Vergangenheit waren diese Funktionen auf JavaScript-Bibliotheken angewiesen.

      In diesem Leitfaden werden Sie einige CSS-Zeilen einrichten, um einen scrolling parallax -Effekt auf einer Webseite zu erzeugen. Sie werden Bilder aus placekitten.com als Platzhalter-Hintergrundbilder verwenden.

      Sobald Sie das Tutorial abgeschlossen haben, haben Sie eine Webseite mit einem reinen CSS scrolling parallax-Effekt.

      Warnung: Dieser Artikel verwendet experimentelle CSS-Eigenschaften, die nicht browserübergreifend funktionieren. Dieses Projekt wurde getestet und funktioniert auf Chrome. Diese Technik funktioniert nicht gut in Firefox, Safari und iOS aufgrund der Optimierungen einiger dieser Browser.

      Schritt 1 — Erstellen eines neuen Projekts

      In diesem Schritt verwenden Sie die Befehlszeile, um einen neuen Projektordner und -Dateien einzurichten. Öffnen Sie zunächst Ihr Terminal und erstellen Sie einen neuen Projektordner.

      Geben Sie den folgenden Befehl ein, um den Projektordner zu erstellen.

      In diesem Fall haben Sie den Ordner css-parallax bezeichnet. Wechseln Sie nun in den Ordner css-parallax:

      Erstellen Sie als Nächstes eine index.html -Datei in Ihrem Ordner css-parallax mit dem Befehl nano:

      Sie werden das gesamte HTML für das Projekt in diese Datei einfügen.

      Im nächsten Schritt beginnen Sie, die Struktur der Webseite zu erstellen.

      Schritt 2 — Einrichten der Anwendungsstruktur

      In diesem Schritt fügen Sie das HTML hinzu, das benötigt wird, um die Struktur des Projekts zu erstellen.

      In Ihrer Datei index.html fügen Sie den folgenden Code hinzu.

      css-parallax/index.html

      
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>CSS Scrolling Parallax</title>
        </head>
        <body></body>
      </html>
      

      Dies ist die grundlegende Struktur der meisten Webseiten, die HTML verwenden.

      Fügen Sie den folgenden Code in die <body> Funktion ein:

      css-parallax/index.html

      
      <body>
      ...
         <main>
            <section class="section parallax bg1">
               <h1>Cute Kitten</h1>
            </section>
            <section class="section static">
               <h1>Boring</h1>
            </section>
            <section class="section parallax bg2">
               <h1>Fluffy Kitten</h1>
            </section>
         </main>
      ...
      </body>
      
      

      Dieser Code erstellt drei verschiedene Abschnitte. Zwei werden ein Hintergrundbild haben, und einer wird ein statischer, einfacher Hintergrund sein.

      In den nächsten Schritten fügen Sie die Stile für jeden Abschnitt mit den Klassen hinzu, die Sie in HTML verwenden.

      Schritt 3 — Erstellen einer CSS-Datei und Hinzufügen von Initial-CSS

      In diesem Schritt erstellen Sie eine CSS-Datei. Dann fügen Sie die Initial-CSS hinzu, die benötigt wird, um die Website zu gestalten und den Parallax-Effekt zu erstellen.

      Erstellen Sie als Nächstes eine styles.css -Datei in Ihrem Ordner css-parallax mit dem Befehl nano:

      Hier legen Sie alle CSS an, die für den Parallaxen-Scrolling-Effekt erforderlich sind.

      Als Nächstes beginnen Sie mit der Klasse .wrapper. In Ihrer Datei styles.css fügen Sie den folgenden Code hinzu:

      css-parallax/styles.css

      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        perspective: 2px;
      }
      

      Die Klasse .wrapper legt die Perspektive und die Scroll-Eigenschaften für die gesamte Seite fest.

      Die Höhe des Wrappers muss auf einen festen Wert eingestellt werden, damit der Effekt funktioniert. Sie können die viewport-Einheit vh auf 100 einstellen, um die volle Höhe des Ansichtsfensters des Bildschirms zu erhalten.

      Wenn Sie die Bilder skalieren, fügen Sie dem Bildschirm eine horizontale Bildlaufleiste hinzu, so dass Sie diese deaktivieren können, indem Sie overflow-x: hidden; hinzufügen. Die perspective Eigenschaft simuliert den Abstand vom Viewport zu den Pseudo-Elementen, die Sie im CSS erstellen und weiter transformieren.

      Im nächsten Schritt fügen Sie weitere CSS hinzu, um Ihre Webseite zu gestalten.

      Schritt 4 — Hinzufügen von Stilen für die .section Klasse

      In diesem Schritt fügen Sie Stile der Klasse .section hinzu.

      In Ihrer Datei styles.css fügen Sie den folgenden Code unterhalb der wrapper-Klasse hinzu:

      css-parallax/styles.css

      
      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        perspective: 2px;
      }
      .section { 
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      

      Die Klasse .section definiert die Größe, Anzeige und Texteigenschaften für die Hauptabschnitte.

      Legen Sie eine Position relativ fest, damit das untergeordnete Element .parallax::after absolut bezogen auf das übergeordnete Element .section positioniert werden kann.

      Jeder Abschnitt hat eine Ansicht-Höhe(vh) von 100 ,um die volle Höhe des Ansichtsfensters einzunehmen. Dieser Wert kann geändert und für jeden Abschnitt auf die von Ihnen gewünschte Höhe eingestellt werden.

      Schließlich werden die restlichen CSS-Eigenschaften verwendet, um den Text innerhalb jedes Abschnitts zu formatieren und zu gestalten. Das positioniert den Text in der Mitte jedes Abschnitts und fügt eine Farbe Weiß hinzu.

      Als Nächstes fügen Sie ein Pseudo-Element hinzu und gestalten es so aus, dass der Parallaxen-Effekt in zwei Bereichen in Ihrem HTML erstellt wird.

      Schritt 5 — Hinzufügen von Stilen für die .parallax -Klasse

      In diesem Schritt fügen Sie Stile der .parallax -Klasse hinzu.

      Zuerst fügen Sie ein Pseudo-Element in der zu gestaltenden .parallax -Klasse hinzu.

      Anmerkung: Sie können MDN-Web-Dokumente aufrufen, um mehr über CSS zu erfahren.

      Fügen Sie den folgenden Code unterhalb der .section -Klasse hinzu:

      css-parallax/styles.css

      ...
      
      .section {
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      ...
      

      Die .parallax -Klasse fügt ein ::after -Pseudo-Element dem Hintergrundbild hinzu und liefert die für den Parallaxen-Effekt erforderlichen Transformationen.

      Das Pseudo-Element ist das untergeordnetste Element mit der Klasse des .parallax.

      Die erste Hälfte des Codes zeigt und positioniert das Pseudo-Element. Die transformierende Eigenschaft verschiebt das Pseudo-Element zurück von der Kamera auf dem z-index und skaliert es dann wieder nach oben, um das Ansichtsfenster auszufüllen.

      Da das Pseudo-Element weiter entfernt ist, scheint es sich langsamer zu bewegen.

      Im nächsten Schritt fügen Sie die Hintergrundbilder und den statischen Hintergrundstil hinzu.

      Schritt 6 — Hinzufügen der Bilder und des Hintergrunds für jeden Abschnitt

      In diesem Schritt ergänzen Sie die endgültigen CSS-Eigenschaften, um die Hintergrundbilder und die Hintergrundfarbe des statischen Abschnitts hinzuzufügen.

      Fügen Sie zunächst eine einfarbige Hintergrundfarbe dem .static Abschnitt mit dem folgenden Code nach der Klasse .parallax::after hinzu.

      css-parallax/styles.css

      ...
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      
      .static {
        background: red;
      }
      ...
      

      Die .static Klasse fügt dem statischen Abschnitt, der kein Bild hat, einen Hintergrund hinzu.

      Die beiden Abschnitte mit der .parallax -Klasse haben auch eine zusätzliche Klasse, die für jeden Bereich anders ist. Verwenden Sie die Klassen .bg1 und .bg2, um die Kätzchen-Hintergrundbilder hinzuzufügen.

      Fügen Sie den folgenden Code unterhalb der .static Klasse hinzu:

      css-parallax/styles.css

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

      Die .bg1, .bg2-Klassen fügen die jeweiligen Hintergrundbilder für jeden Abschnitt hinzu.

      Die Bilder sind aus der placekitten -Webseite. Es handelt sich um einen Bilderservice von Kätzchen zur Verwendung als Platzhalter.

      Nachdem nun der gesamte Code für den Parallax Scrolling-Effekt hinzugefügt wurde, können Sie Ihre Datei styles.css mit Ihrer index.html verlinken.

      Schritt 7 — Verknüpfen von styles.css und Öffnen von index.html in Ihrem Browser

      In diesem Schritt verknüpfen Sie Ihre Datei styles.css und öffnen das Projekt in Ihrem Browser, um den Parallax Scrolling-Effekt zu sehen.

      Fügen Sie zunächst den folgenden Code dem <head>-Tag in der Datei index.html hinzu.

      css-parallax/index.html

       ...
      <head>
        <meta charset="UTF-8" />
        <^>
        <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/styles.css" />
        <^>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS Parallax</title>
      </head>
      
      ...
      

      Jetzt können Sie Ihre Datei index.html in Ihrem Browser öffnen:

      Scrolling Parallax-Effekt-GIF

      Damit haben Sie eine funktionierende Webseite mit einem Scrolling-Effekt eingerichtet. Sehen Sie sich dieses GitHub-Repository an, um den vollen Code zu sehen.

      Zusammenfassung

      In diesem Artikel haben Sie ein Projekt mit einer index.html und einer Datei styles.css eingerichtet und haben nun eine funktionsfähige Webseite. Sie haben die Struktur Ihrer Webseite hinzugefügt und Stile für die verschiedenen Abschnitte auf der Seite erstellt.

      Es ist möglich, die von Ihnen verwendeten Bilder oder den Parallax-Effekt weiter weg zu legen, damit sie sich langsamer bewegen. Sie müssen die Pixelmenge in den Eigenschaften perspective und transform ändern. Wenn Sie nicht möchten, dass ein Hintergrundbild überhaupt scrollen soll, verwenden Sie background-attachment: fixed; anstelle von perspective/translate/scale.



      Source link

      Cómo crear un efecto de paralaje de desplazamiento con Pure CSS en Chrome


      Introducción

      Modern CSS es una potente herramienta que puede usar para crear diversas funciones avanzadas de interfaz de usuario (UI). En el pasado, estas funciones dependían de las bibliotecas de JavaScript.

      En esta guía, configurará algunas líneas CSS para crear un efecto de paralaje de desplazamiento en una página web. Usará imágenes de placekitten.com como imágenes de marcador de posición en segundo plano.

      Tendrá una página web con un efecto puro de paralaje de desplazamiento de CSS una vez que haya completado el tutorial.

      Advertencia: En este artículo, se utilizan propiedades experimentales de CSS que no funcionan en los distintos navegadores. Este proyecto se probó y funciona en Chrome. Esta técnica no funciona bien en Firefox, Safari e iOS por algunas de las optimizaciones de esos navegadores.

      Paso 1: Crear un nuevo proyecto

      En este paso, utilice la línea de comandos para configurar una nueva carpeta y archivos de proyecto. Para comenzar, abra su terminal y cree una nueva carpeta de proyecto.

      Escriba el siguiente comando para crear la carpeta del proyecto:

      En este caso, nombre la carpeta css-parallax. Ahora, posiciónese en la carpeta css-parallax:

      Luego, cree un archivo index.html en su carpeta css-parallax con el comando nano:

      Pondrá todo el HTML para el proyecto en este archivo.

      En el siguiente paso, comenzará a crear la estructura de la página web.

      Paso 2: Configurar la estructura de la aplicación

      En este paso, añadirá el HTML que necesita para crear la estructura del proyecto.

      Dentro de su archivo index.html, agregue el siguiente código:

      css-parallax/index.html

      
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>CSS Scrolling Parallax</title>
        </head>
        <body></body>
      </html>
      

      Esta es la estructura básica de la mayoría de las páginas web que utilizan HTML.

      Añada el siguiente código en la etiqueta <body>:

      css-parallax/index.html

      
      <body>
      ...
         <main>
            <section class="section parallax bg1">
               <h1>Cute Kitten</h1>
            </section>
            <section class="section static">
               <h1>Boring</h1>
            </section>
            <section class="section parallax bg2">
               <h1>Fluffy Kitten</h1>
            </section>
         </main>
      ...
      </body>
      
      

      Este código crea tres secciones diferentes. Dos tendrán una imagen de fondo, y una será un fondo estático y simple.

      En los siguientes pasos, añadirá los estilos para cada sección usando las clases que añadió en el HTML.

      Paso 3: Crear un archivo CSS y agregar el CSS inicial

      En este paso, creará un archivo CSS. Luego, añadirá en el CSS inicial que necesita para diseñar el sitio web y crear el efecto de paralaje.

      Primero, cree el archivo styles.css en su carpeta css-parallax con el comando nano:

      Aquí es donde pondrá todo el CSS que necesita para crear el efecto de paralaje de desplazamiento.

      Luego, comience con la clase .wrapper. Dentro de su archivo styles.css, añada el siguiente código:

      css-parallax/styles.css

      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        perspective: 2px;
      }
      

      La clase .wrapper establece las propiedades de perspectiva y desplazamiento para toda la página.

      La altura del wrapper debe configurarse en un valor fijo para que el efecto funcione. Puede usar la unidad del área de visualización (viewport) vh configurada a 100 para obtener la altura completa del área de visualización de la pantalla.

      Cuando escale las imágenes, se añadirá una barra de desplazamiento horizontal a la pantalla para que pueda deshabilitarla añadiendo overflow-x: hidden;. La propiedad perspective simula la distancia desde el área de visualización a los seudoelementos que creará y transformará más adelante en el CSS.

      En el siguiente paso, va a añadir más CSS para diseñar su página web.

      Paso 4: Añadir estilos a la clase .section

      En este paso, añadirá estilos a la clase .section.

      Dentro de su archivo styles.css, añada el siguiente código debajo de la clase wrapper:

      css-parallax/styles.css

      
      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        perspective: 2px;
      }
      .section { 
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      

      La clase .section define el tamaño, la pantalla y las propiedades de texto para las secciones principales.

      Establezca una posición de relative para que el elemento secundario, .parallax::after pueda posicionarse de manera absoluta en relación con el elemento principal .section.

      Cada sección tiene un view-height(vh) de 100 para ocupar la altura completa del área de visualización. Este valor puede modificarse y configurarse a la altura que prefiera para cada sección.

      Finalmente, las propiedades de CSS restantes se utilizan para dar formato y agregar estilo al texto dentro de cada sección. Posiciona el texto en el centro de cada sección y agrega un color blanco (white).

      El siguiente paso es añadir un seudoelemento y agregarle estilo para crear el efecto de paralaje en dos de las secciones en su HTML.

      Paso 5: Añadir estilos a la clase .parallax

      En este paso, añadirá los estilos a la clase .parallax.

      Primero, añadirá un seudoelemento en la clase .parallax a la que agregará el estilo.

      Nota: Puede visitar la documentación web de MDN para obtener más información sobre los seudoelementos de CSS.

      Añada el siguiente código debajo de la clase .section:

      css-parallax/styles.css

      ...
      
      .section {
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      ...
      

      La clase .parallax añade un seudoelemento ::after a la imagen de fondo y proporciona las transformaciones necesarias para el efecto de paralaje.

      El seudoelemento es el último elemento secundario del elemento con la clase .parallax.

      La primera mitad del código muestra y posiciona el seudoelemento. La propiedad transform mueve el seudoelemento lejos de la cámara en el z-index y, luego, lo escala de vuelta para llenar el área de visualización.

      Dado que el seudoelemento está más lejos, parece moverse más lentamente.

      En el siguiente paso, añadirá las imágenes de fondo y el estilo de fondo estático.

      Paso 6: Añadir las imágenes y el fondo para cada sección

      En este paso, añadirá las propiedades finales de CSS para añadir las imágenes y el color de fondo de la sección estática.

      Primero, añada un color sólido de fondo a la sección .static con el siguiente código después de la clase .parallax::after:

      css-parallax/styles.css

      ...
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      
      .static {
        background: red;
      }
      ...
      

      La clase .static agrega un fondo a la sección estática que no tiene ninguna imagen.

      Las dos secciones con la clase .parallax también tienen otra clase que es diferente para cada una. Utilice las clases .bg1 y .bg2 para añadir las imágenes de fondo de Kitten.

      Añada el siguiente código a la clase .static:

      css-parallax/styles.css

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

      Las clases .bg1, .bg2 añaden las imágenes de fondo respectivas para cada sección.

      Las imágenes son del sitio web placekitten. Es un servicio para obtener imágenes de gatitos y utilizarlas como marcadores de posición.

      Una vez que añada el código completo para el efecto de paralaje de desplazamiento, puede vincularlo al archivo styles.css en el archivo index.html.

      Paso 7: Vincular styles.css y abrir index.html en su navegador

      En este paso, vinculará el archivo styles.css y abrirá el proyecto en su navegador para ver el efecto de paralaje de desplazamiento.

      Primero, añada el siguiente código a la etiqueta <head> en el archivo index.html:

      css-parallax/index.html

       ...
      <head>
        <meta charset="UTF-8" />
        <^>
        <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/styles.css" />
        <^>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS Parallax</title>
      </head>
      
      ...
      

      Ahora, puede abrir el archivo index.html en su navegador:

      Gif animado del efecto de paralaje de desplazamiento

      Al hacer esto, habrá configurado una página web con un efecto de desplazamiento. Consulte este repositorio de GitHub para ver el código completo.

      Conclusión

      En este artículo, configuró un proyecto con un archivo index.html y styles.css, y ahora tiene una página web funcional. Modificó la estructura de su página web y creó estilos para las diversas secciones en el sitio.

      Las imágenes utilizadas o el efecto de paralaje se pueden alejar aún más para que se muevan más lentamente. Tendrá que cambiar la cantidad de píxeles en las propiedades perspective y transform. Si no desea que la imagen de fondo se desplace en absoluto, utilice background-attachment: fixed; en vez de perspective/translate/scale.



      Source link