Perkecil Gambar Pahlawan Pada Efek Gulir dengan HTML & CSS

sukma
sukma
3 minute read

Dalam tutorial ini, Anda akan belajar cara memperbesar gambar hero pada window scroll menggunakan CSS dan JavaScript. Ide untuk membuat satu halaman penuh background-image dan kemudian menerapkan efek Zoom-out pada acara gulir.

Seringkali, ini dapat diterapkan di halaman beranda situs web, halaman arahan, atau area header. Mereka juga dapat bekerja dengan baik dengan satu posting, kategori, arsip, kontak, dan halaman lain.

Meskipun, bagian gambar pahlawan dapat bervariasi berdasarkan ukurannya. Gambar pahlawan layar penuh paling populer belakangan ini. Banyak penerbit terkenal seperti Medium.com menggunakan bagian intro hero satu halaman penuh.

Namun, Anda perlu sedikit memperhatikan saat membuat gambar pahlawan satu halaman penuh. Berikut adalah beberapa poin yang perlu diingat saat membangunnya.

  1. Ini harus mencakup seluruh ukuran area pandang browser
  2. Konten pada gambar pahlawan harus rata tengah.
  3. Teks pada gambar pahlawan harus terlihat yang memerlukan beberapa jenis Filter CSS.
  4. Akhirnya, gambar terlihat bagus di semua perangkat media.

Dalam contoh kami, kami akan menerapkan efek Zoom pada gambar pahlawan. Saat pengguna menggulir ke bawah halaman - Untuk sedikit waktu, gambar akan menjadi Zoom-out pertama dan kemudian halaman bergulir ke bawah.

Mirip saat pengguna menggulir ke atas —- Gambar pahlawan akan di-Zoom-in untuk memberikan efek yang bagus.

Saya hanya menginginkan gambar yang dapat Diperkecil saat Anda menggulir halaman ke bawah. Ide ini dapat digunakan saat merancang situs web parallax scrolling. Faktanya, kami akan menggunakan plugin parallax Skrollr.js untuk membuat efek ini.

Ada banyak cara untuk menambahkan sedikit bumbu ke tugas tata letak web Anda dan salah satunya adalah menambahkan Gambar Zoom CSS pada foto saat pengguna Gulir ke bawah halaman.

HTML Dasar untuk Gambar Hero

Untuk menambahkan efek Zoom-out pada halaman web Anda, mari muat keduanya Skrollr.js dan file jQuery ke header situs Anda. Anda juga bisa menambahkan style.css jika Anda tidak ingin menggunakan CSS di bawah ini.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.29/skrollr.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css" />

Sekarang, kita lihat HTML sederhana. Markupnya hanya a DIV yang menyertakan beberapa nilai atribut data. Nilai-nilai ini diperlukan karena persyaratan Skrollr.js

<div id="image" data-0="background-size: 150% auto;" data-500="background-size: 100% auto; position: fixed; top:0;" data-501="position: absolute; top: 501px;"> </div>

Gaya CSS

Kami akan menerapkan beberapa CSS untuk membuat efek Zooming berfungsi. Kami akan menambahkan posisi relatif ke tubuh dan elemen HTML. Kami juga menerapkan beberapa ketinggian tetap sehingga Anda dapat dengan mudah melihat efeknya.

Sekarang hal utama tentang menyiapkan gambar latar belakang dan untuk ini kita membuatnya tetap pada posisi untuk membuat efek paralaks yang bagus.

Kami menerapkan ketinggian 100vh agar sesuai dengan jendela browser layar penuh. Selanjutnya, Kami cukup mengatur gambar latar belakang dengan ukuran 150%.

html, body {   position: relative;   margin: 0;   height: 1500px; } #image {   width: 100%;   height: 100vh;   min-height: 600px;   display: block;   position: fixed;   top: 0;   left: 0;   background-size: 150% auto;   background-repeat: no-repeat;   background-position: center center;   background-image: url(../img/photo.jpg); }

Akhirnya JavaScript untuk Efek Zoom

Untuk menginisialisasi efek kita perlu menambahkan fungsi berikut.

$(document).ready(function() {   var s = skrollr.init(); })

Itu dia! Kami telah melakukan fungsi untuk memperbesar gambar pahlawan pada gulir jendela. Semoga Anda menyukai tutorial kecil yang baru ini. Tinggalkan komentar dan bagikan dengan teman-teman Anda.