Latar Belakang dan Pendahuluan
Jika Anda menjelajahi situs web modern apa pun di komputer atau ponsel, Anda mungkin pernah mengalami bahwa saat Anda menggulir ke bawah / atas situs web, tampak seperti seluruh layar bergerak ke arah gulir. Jika ini adalah efek di latar belakang, informasi di latar depan juga berubah saat Anda menggulir. Efek ini secara singkat dapat dijelaskan sebagai Parallax Scrolling.
Menggulir
Mari kita pahami apa artinya dengan menggulir. Saat Anda melihat halaman web, tindakan untuk menjelajahi halaman web ke segala arah (atas, bawah, kiri dan kanan), dikenal sebagai Scrolling.
Biasanya, jika Anda pengguna komputer desktop, tindakan ini dilakukan dengan menggunakan roda gulir di mouse.
Sejarah
Mari kita lihat kata - Scroll. Di masa lalu, untuk mengirim pesan ke orang lain yang berada pada jarak yang sangat jauh, gulungan tulisan tangan digunakan. Gulungan ini tampak seperti yang ditunjukkan di bawah ini -
Bayangkan tindakan orang yang memegang gulungan itu. Untuk membaca konten secara lengkap, orang tersebut harus "menggulir" dan menggulungnya lebih jauh. Penggunaan gulungan ini juga untuk menyimpan teks catatan atau keputusan. Seiring berjalannya waktu, penggunaan gulungan semakin meningkat karena dibuat dari berbagai bahan tulis seperti - papirus, perkamen dan kertas.
Seiring perkembangan komputer, pemrosesan dan penyimpanan dokumen, tabel, dan gambar yang sangat besar menjadi mungkin. Terkadang datanya sangat banyak sehingga ukuran layar tidak cukup untuk menyajikan data kepada pengguna. Jika data yang akan ditampilkan lebih besar dari ukuran jendela atau area tampilan, data tersebut akan tetap tersembunyi. Ini memerlukan pendekatan untuk memperluas area layar.
Beberapa opsi untuk mencapai perluasan layar tercantum di bawah ini -
- Untuk memperbesar ukuran layar
- Untuk mengurangi ukuran data
- Untuk menggunakan scrolling
Mekanisme pengguliran ini lebih penting bagi orang yang bekerja dengan desain grafis dan pengeditan foto.
Asal Scrolling Parallax
Mari kita lihat sejarah parallax scrolling. Pertama, kita akan mengerti apa arti kata parallax. Kata parallax berasal dari kata Yunaniπαράλλαξις (parallaxis) yang artinya pergantian.
Jika kita melihat suatu objek dari suatu sudut, objek tersebut akan muncul dengan cara tertentu. Namun jika Anda memindahkan objek yang sama dari posisi yang berbeda, maka akan terlihat pergerakan objek. Fenomena ini disebut sebagai Parallax.
Sekarang setelah kita memahami asal dan latar belakang Parallax, mari kita pahami sejarah dan konsep Parallax scrolling dalam desain web.
Definisi
Menurut Wikipedia - Parallax scrolling adalah teknik dalam grafik komputer di mana gambar latar belakang bergerak melewati kamera lebih lambat daripada gambar latar depan, menciptakan ilusi kedalaman dalam pemandangan 2D dan menambah kesan terbenam dalam pengalaman virtual.
Parallax scrolling digunakan pada hari-hari awal animasi. Banyak studio animasi (seperti Disney) menggunakan kamera multiplane untuk mendapatkan efek paralaks.
Seiring perkembangan teknologi grafik komputer bersama dengan kerangka kerja canggih seperti JavaScript, perancang web dan pengembang sekarang dapat membangun situs dengan pengalaman yang kaya. Meskipun parallax scrolling dimulai dengan beberapa lapisan, itu dibawa ke tingkat berikutnya dengan scroll bar di komputer. Tekniknya tetap sama, tetapi karena aplikasinya untuk Scrolling, pengalaman unik dibuat.
Contoh
Parallax scrolling banyak digunakan di situs web modern. Karena parallax scrolling dapat diimplementasikan untuk ponsel serta situs desktop sekaligus, popularitas situs tersebut telah meroket dalam beberapa tahun terakhir.
Beberapa contoh situs web yang menggunakan parallax scrolling diberikan di bawah ini -
Beruang Grylls
Saat animasi berlanjut, Anda akan dapat melihat bagaimana konten situs web menjadi interaktif. Saat Anda menggulir ke depan, lebih banyak informasi akan terungkap.
Buat Uang Anda Menjadi Penting
Untuk memperkenalkan pembaca pada manfaat credit union, situs ini membawa Anda melalui alur cerita. Saat Anda menggulir ke depan, informasi terungkap dengan cara yang unik.
Infografis InfoQuest
Perjalanan seorang karyawan untuk menemukan informasi penting di tempat kerjanya digambarkan menggunakan pengalaman menggulir.
GitHub 404
Ini sedikit berbeda dari pengalaman paralaks biasa, objek di bagian atas layar bergerak saat Anda mengarahkan penunjuk mouse ke atasnya.
Aplikasi Parallax Scrolling
Sekarang, harus jelas dari definisi dan latar belakang bahwa parallax scrolling berguna di berbagai media digital. Beberapa aplikasi parallax scrolling ada di bawah -
Desain permainan
Parallax scrolling banyak digunakan dalam desain game. Karakter perlu bergerak relatif ke latar belakang dan dengan kontrol pemain menggunakan mouse dan keyboard, seluruh pengalaman perlu diubah. Desain game adalah cara yang sangat primitif namun trendi menggunakan scrolling paralaks.
Situs web
Untuk membuat pengguna memahami situs web, beberapa pengalaman dinamis dan berbeda adalah penting. Seperti yang mungkin telah Anda perhatikan dari contoh situs web yang dibahas di atas, parallax scrolling menambah konten karena representasinya secara interaktif.
Bab ini membahas tentang konsep desain web dan keuntungan menggunakan parallax scroll dalam desain web.
Latar Belakang Desain Web
Sejak awal abad ke -20, media kertas mengalami persaingan sengit karena media digital. Media digital mencakup apa yang kita lihat di internet dan karenanya majalah sekutu yang ikut serta.
Buletin yang Anda dapatkan sebagai bagian dari langganan mingguan / bulanan juga disertakan di media digital. Pada dasarnya, media digital sangat bergantung pada perangkat seluler dan desktop. Itu membuat perbedaan ketika Anda dapat melihat konten di perangkat seluler (genggam) serta desktop Anda. Cara konten ditampilkan di salah satu perangkat, gaya desain konten tertentu sedang dimainkan.
Gaya perancangan ini disebut sebagai Web Designing. Dari sudut pandang perancangan atau pengkodean, ketika perancang halaman web mulai membangun halaman web, dia juga mempertimbangkan perangkat seluler.
Menurut Wikipedia, Web design mencakup banyak keterampilan dan disiplin ilmu yang berbeda dalam produksi dan pemeliharaan situs web. Salah satu keterampilan tersebut adalah merancang pengalaman yang berdampak bagi pengguna. Desain web melayani pengalaman ini dan menyediakan cara yang terorganisir untuk mengatur konten halaman dan memberikan gaya yang berbeda untuk mereka.
Desain web meliputi - desain antarmuka, desain grafis dan menggunakan standar tertentu untuk menulis kode. Pekerjaan ini dapat dilakukan oleh satu orang atau oleh satu tim.
Ada banyak alat yang tersedia di pasar untuk membuat ini bekerja dengan mudah, namun, tergantung pada kemampuan kreatif seseorang untuk membuat tampilan halaman web.
Desain Web Modern
Dengan evolusi teknologi, terjadi ledakan pengetahuan. Internet telah menjadi sesuatu dan telah meroketkan kualitas hidup kita. Pada titik tertentu, semakin banyak informasi yang diproses oleh pengguna internet rata-rata. Informasi ini bisa dalam bentuk situs web di komputer desktop atau dari perangkat genggam; tablet atau ponsel.
Meskipun begitu banyak informasi mencoba menarik perhatian pengguna, jelaslah bahwa sebagai orang yang merancang pengalaman web, there are only 3 seconds allocated to pass the message across.
Bagaimana seseorang menghadapi ini? Lebih dari penting untuk menyampaikan pesan, karena itu adalah sumber untuk setiap desain web. Anda ingin membangun situs web yang berkomunikasi, pada saat yang sama harus menarik dan membuat pengguna tetap berpegang pada konten. Ini memang tugas yang sulit.
Mengingat cakupan pekerjaan yang luas untuk konten web tertentu, semakin banyak orang yang masuk ke dunia Desain Web. Seorang desainer web yang kreatif adalah bahan pembicaraan di kota ini berkat bakatnya yang luar biasa dalam menciptakan pengalaman pengguna yang baik. Perancang web saat ini dapat mengambil pekerjaan di perusahaan pemasaran / periklanan atau memulai sendiri untuk terjun ke dalam perancangan web.
Aesthetic appeal is the key for a given content on web. Ini berarti perancang web harus menyadari prinsip dan dasar desain, warna, jarak, dll. Semakin banyak pengguna dapat melihat konten web berkualitas tinggi setiap hari. Jelas bahwa seseorang akan membandingkan halaman web atau situs web saat ini dengan yang dikunjungi beberapa jam atau beberapa menit yang lalu. Penataan konten, ditambah dengan grafik dan warna yang bagus telah membuat banyak banner / halaman yang berdiri sendiri menjadi hal yang populer di internet.
Contoh
Mari kita ambil kasus grafik sederhana. Ada banyak grafik di internet yang disebut meme. Mereka sederhanaGraphics Interchange Format (GIF)gambar dengan beberapa teks yang disematkan di dalam grafik. Meme-meme ini beredar di internet berdasarkan peristiwa baru-baru ini di beberapa bagian dunia. Jika kita melihat contoh ini, satu-satunya daya tarik yang mereka miliki adalah grafis dan beberapa teks yang relevan atau tidak relevan.
Namun, itu telah mendapatkan begitu banyak popularitas yang membuat orang berpikir tentang kemungkinan luar biasa di Internet.
Dengan demikian, agar desain web menjadi efektif, baik kreativitas dan metode untuk mengkomunikasikan pesan memainkan peran penting.
It is important point to note that a successful web page is combination of Web Design and Web Development. Sesuai tren pasar saat ini, bersama dengan perancang web, pengembang web harus dimiliki dalam tim. Seorang desainer web akan selalu mencari inspirasi dan menggunakan kreativitasnya untuk membuat grafik dan skema warna yang relevan. Sedangkan pengembang web akan menggunakan keterampilan pengkodeannya untuk menghadirkan grafik dan skema warna langsung di situs web.
Seorang desainer web harus memiliki pengetahuan dalam menulis kode juga, untuk membuat grafik atau skema warna yang diinginkan dapat digunakan untuk pengembang web. Kode sederhana dalam aplikasi sederhana seperti Notepad dapat membantu perancang web untuk mengambil alih kendali dalam pengembangan web.
Menggunakan Parallax Scrolling
Parallax Scrolling termasuk dalam batasan pekerjaan desainer web dan pengembang web. Seorang desainer web mungkin membuat efek Parallax Scrolling menggunakan alat seperti InVision, UXPin untuk menyampaikan kepada pengembang web perilaku yang diinginkan saat menggulir. Selanjutnya, pengembang web akan menggunakan keahliannya untuk membuat efek parallax scrolling. Ini dapat dilakukan dengan teknik JavaScript, CSS, dan jQuery yang berbeda. Penjelasan rinci tentang masing-masing metode ini disediakan di bab-bab berikutnya.
Sesuai definisi yang ditentukan di bagian sebelumnya, parallax scrolling is a technique when the background content is moved at a different speed than the foreground content when scrolling.
Teknik CSS sederhana untuk membuat efek scrolling paralaks ditampilkan di situs web ini - The Urban Walks .
Seperti yang Anda lihat pada gambar di atas, ponsel di tengah layar akan mengubah konten setelah Anda menggulir dua kali. Juga, perhatikan pada gulungan pertama, latar belakang ponsel akan berubah.
Transisi ini memberi Anda perasaan bahwa ponsel tidak berubah pada tempatnya dan latar belakang berubah saat Anda menggulir ke bawah. Efek ini disebut efek scrolling paralaks. Anda tahu bahwa Anda menggulirnya ke bawah karena ada indikator layar ke arah paling kanan layar dalam bentuk beberapa titik.
Penggunaan pertama dari parallax scrolling ada di game komputer lama. Di mana gambar latar belakang tetap akan bergerak lebih lambat karena karakter bergerak lebih cepat daripada latar belakang. Beberapa contoh dari permainan ini - Disney's Aladdin dan Disney's Lion King. Game-game ini diluncurkan masing-masing pada tahun 1993 dan 1994.
Meskipun benar bahwa ini dimulai dengan permainan, tetapi saat ini, banyak desainer web yang menekankan pada efeknya agar audiens menyukai situs mereka. Keuntungan dari parallax scrolling diperluas dari situs web ke situs seluler.
Situs web ini, setelah dirancang dengan parallax scrolling untuk versi desktop, ditambahkan dengan kode yang mendukung layar seluler juga.
Keuntungan Parallax Scrolling di Web dan Seluler
Pada bagian ini, kita akan membahas keuntungan menggunakan parallax scrolling dari berbagai perspektif seperti yang dibahas di bawah ini -
Dari Perspektif Audiens
Ada elemen menyenangkan yang terkait dengan parallax scrolling. Seperti yang Anda lihat pada contoh di atas, menyampaikan informasi ribuan kata menjadi lebih mudah saat pengguna menggulir dari layar yang berbeda.
Jika kami menganggap pengguna pertama kali, ada rasa ingin tahu yang terkait dengan setiap gulungan. Oleh karena itu, ini tidak hanya memperkaya pengalaman situs web tetapi juga meningkatkan kemungkinan pengguna menghabiskan lebih banyak waktu pada kunjungan pertama ke situs web itu sendiri.
Proporsi keterlibatan pengguna meningkat secara dramatis saat pengguna tertarik dengan pengguliran.
Pengguna tidak harus memikirkan proses mencari tahu informasi, karena tersedia dengan cara yang lebih jelas.
Dalam beberapa kasus, Anda dapat meletakkan cerita tentang produk / layanan yang Anda tawarkan dengan menganimasikan item lain di layar, seperti logo atau ikon menu.
Dari Perspektif Teknis
Setelah Anda menerapkan pengguliran paralaks untuk versi desktop, kerangka kerja yang sama dapat digunakan dengan sangat mudah untuk situs web atau layar seluler.
Karena cuplikan kodenya sederhana dan dapat digunakan kembali, jika Anda adalah agensi pemasaran atau perusahaan penyedia layanan situs web, ini menjadi mudah saat mengumpulkan klien baru.
Pengetahuan tentang parallax scrolling hadir dengan lebih banyak keahlian dalam kerangka kerja frontend seperti CSS, JavaScript, dll.
Untuk pengembang web, dalam hal membuat efek gulir paralaks, berbagai teknik tersedia. Salah satu teknik tersebut adalah dengan menggunakanCascaded Styling Sheets(CSS).
CSS menjelaskan bagaimana elemen HTML ditampilkan di layar. Seseorang dapat membuat file CSS dan dapat digunakan untuk situs web lengkap. Lebih mudah menambahkan file CSS daripada menambahkan gaya ke setiap elemen HTML dan mengelolanya di berbagai bagian halaman web.
Note- Beberapa metode yang dibahas di bawah dalam bab ini khusus untuk komputer desktop dan bukan untuk perangkat seluler. Ini akan disebutkan dalam langkah-langkah ketika teknik tertentu tidak cocok untuk perangkat seluler.
Mempertimbangkan pelepasan CSS ke semua gambar tambahan ke dalam model objek dokumen (DOM), terdapat pemanfaatan yang lebih besar dari akselerasi perangkat keras dan efek yang mulus tanpa membebani CPU.
Metode Posisi Mutlak
Metode ini sering digunakan untuk membuat efek paralaks, karena bobotnya relatif ringan dibandingkan dengan opsi lain yang tersedia. Posisi gambar latar belakang dijaga tetap relatif terhadap konten lain di layar. Dalam contoh yang dibahas di bawah ini, Anda akan melihat bagaimana melakukannya menggunakan keajaiban CSS.
Di bagian ini, kita akan membahas dua metode untuk Metode Posisi Absolut -
- Latar Belakang Tunggal
- Beberapa Latar Belakang
Metode Latar Belakang Tunggal
Dalam metode ini, kami akan membuat dua file di folder yang sama. Amati langkah-langkah yang diberikan di bawah ini untuk tujuan yang sama -
Step 1
Kita harus membuat dua file di folder yang sama: file pertama dengan markup HTML dan yang kedua dengan kode CSS.
Step 2
Sekarang, mari kita tentukan markup HTML kita. Perhatikan kode yang diberikan di bawah ini -
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "BgContainer">
<div class = "Parallax">
<h1> Welcome! </h1>
</div>
<div class = "FgContainer">
<div class = "MainContent">
<p>
Here we will go ahead with some content which will really vary
according to the content on your site. I am just typing out this
content as it is sometimes good to engage user than the usual lorem
ipsum text!
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</body>
</html>Step 3
Buka notepad. Salin dan tempel cuplikan kode di atas.
Saat Anda menyimpan file, di bawah Save as type, Pilih All Files. Masukkan nama ke file Anda sesuai kebutuhan, tetapi perlu diikuti dengan ekstensi -.html seperti yang ditunjukkan pada gambar di bawah.
Step 4
Setelah file disimpan, buat file lain di notepad dan tempel kode yang diberikan di bawah ini -
html, body {
font-size: 18px;
line-height: 28px;
}
h1 {
letter-spacing: -15px;
color: white;
text-align: center;
font-size: 200px;
font-weight: 800;
line-height: 200px;
}
BgContainer {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
FgContainer {
position: relative;
display: block;
background-color: white;
z-index: 1;
}
MainContent {
max-width: 750px;
margin: 0 auto;
padding: 75px 0;
}
p {
margin: 75px 0;
}
.Parallax {
display: flex;
flex: 1 0 auto;
position: relative;
z-index: -1;
height: 100vh;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2);
background: url(https://cdn.pixabay.com/photo/2017/02/07/09/02/background-2045380_640.jpg);
background-color: rgb(250,228, 216);
}Seperti yang Anda lihat pada langkah terakhir, saat Anda menyimpan file, di bawah Save as ketik, pilih All Files. Masukkan nama ke file Anda sesuai kebutuhan dan tambahkan ekstensi.css untuk itu.
Analisis Kode
Mari kita pahami bagian mana dari kode yang bertanggung jawab atas efek paralaks. Pekerjaan terpenting untuk paralaks dilakukan dengan menggunakan perspektif dan aturan transformasi. Mengacu padaline 15dalam potongan kode di atas. Perspektif dibuat untuk kitaBgContainerpertama. Ini memulai platform untuk mengubah aturan.
Dalam Parallax wadah mulai dari baris 40, transform aturan di baris 48 mendorong div BgContainer ke latar belakang menggunakan translate (-1px).
Anda dapat mengubah nilai untuk parameter terjemahan dan skala untuk mengubah kedalaman paralaks.
Saat Anda membuka file html, efek paralaks akan terlihat seperti yang ditunjukkan di bawah ini -
Note - Untuk sisa tutorial, diasumsikan bahwa pembaca dapat membuat file HTML dan CSS sesuai dengan struktur folder yang disediakan dalam metode di atas.
Metode Beberapa Latar Belakang
Dalam metode ini, kita akan memiliki gambar berbeda yang muncul saat pengguna menggulir ke bawah halaman. Ada gambar dengan pensil, yang digunakan dalam kombinasi warna berbeda untuk mengilustrasikan efek ini.
Perhatikan kode berikut untuk halaman HTML seperti yang ditunjukkan di bawah ini -
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<h1>Multiple Background Example</h1>
<div class = "parallax">
<div class = "bg__First">First</div>
<div class = "bg__Second">Second</div>
<div class = "bg__Third">Third</div>
<div class = "bg__Fourth">Fourth</div>
</div>
</body>
</html>Mirip dengan contoh sebelumnya, kami akan menggunakan styles.cssdisimpan di lokasi yang sama dengan file HTML ini. Kami memiliki tiga div berbeda bernama First, Second, Third dan Fourth.
Kode CSS untuk parallax scrolling diberikan di bawah ini -
body, html {
height : 100%;
font-family : sans-serif;
}
.parallax [class*="bg__"] {
position : relative;
height : 50vh;
text-indent : -9999px;
background-attachment : fixed;
background-position : top center;
background-size : cover;
}
.parallax [class*="bg__"]:nth-child( 2n) {
box-shadow : inset 0 0 1em #111;
}
.parallax .bg__First, .bg__Fourth {
height : 100vh;
}
.parallax .bg__First {
background-image : url("parallax0.png");
}
.parallax .bg__Second {
background-image : url("parallax1.png");
}
.parallax .bg__Third {
background-image : url("parallax2.png");
}
.parallax .bg__Fourth {
background-image : url("parallax1.png");
}Di sini, kami membuat efek paralaks dari baris 7, properti penting di sini background-attachment:fixed.
Dengan menggunakan properti ini, gambar pertama dengan pensil warna akan selalu berada di atas. Saat Anda menggulir ke bawah, gambar yang berbeda seperti yang dijelaskan dari baris 28 akan mulai muncul.
Hasilnya, Anda akan bisa melihat efek paralaks seperti yang ditunjukkan pada gif di bawah ini. Gambar berikut adalah tangkapan layar dari contoh yang kami pertimbangkan untuk beberapa latar belakang.
Paralaks CSS Murni
Mari kita gabungkan pengetahuan dari dua metode sebelumnya dan membuat efek Paralaks CSS Murni tingkat lanjut.
Perbedaannya terletak pada cara kami menyusun file image elemen dan z-transformProperti. Penjelasan tentang properti akan diberikan setelah kode CSS.
Buat file HTML dengan kode berikut menggunakan metode biasa dari Notepad.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "wrapParallax">
<div class = "parallax_one">
<img src = "https://cdn.pixabay.com/photo/2018/06/16/15/36/water-lily-3478924_640.jpg" alt = "">
</div>
<div class = "parallax_two">
<h1>Pure CSS Parllax Advanced Level</h1>
</div>
<div class = "parallax_three">
<img src = "https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_640.jpg" alt = "">
</div>
</div>
</body>
</html>Untuk file CSS, kode diberikan di bawah ini -
body, html {
padding: 0;
margin: 0;
}
h1 {
color: blue;
text-align: center;
padding: 20px;
text-shadow: 0px 0px 10px #fffff;
}
img {
width:100vw;
height:100vh;
}
.wrapParallax {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.parallax_one {
transform: translateZ(-100px) scale(2)
}
.parallax_two {
z-index: 10;
transform: translateZ(-200px) scale(3)
}
.parallax_three {
margin-top: 100vh;
}Analisis Kode
Kami telah memperbaiki posisi lapisan pertama di line 26 dengan menggunakan position:absoluteProperti. Posisi tersebut juga diberi kode keras ke 0.
Di parallax_two, yang merupakan lapisan dengan tajuk, telah kami terapkan z-index: 10untuk memberikan efek mengambang ke judul. Lapisanparallax_three dipindahkan ke bawah dengan menyediakan properti margin-top.
Dengan demikian, kami dapat meningkatkan tingkat kerumitan dalam efek Parallax kami.
Amati efeknya seperti yang ditunjukkan pada gambar di bawah ini.
Untuk membuat efek Parallax, metode yang paling populer adalah menggunakan JavaScript. Dari bab ini dan seterusnya kita akan membahas konsep JavaScript dan beberapa pustaka yang digunakan untuk mencapai Parallax scrolling.
Memanfaatkan JavaScript murni masuk akal untuk menjaga kinerja situs web tetap optimal. Ada banyak keuntungan lain menggunakan perpustakaan dari aspek kinerja. Namun, untuk memahami organisasi kode dengan lebih baik, kita akan mulai dengan implementasi paralaks JavaScript murni. Fakta menyenangkan, terkadang JavaScript murni juga disebutvanilla JavaScript.
Parallax Scrolling menggunakan Pure JavaScript
Pertama, buat file HTML utama dengan kode yang ditunjukkan di bawah ini. Halaman HTML hanya akan terdiri dari empat teks heading.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
<script src = "myscripts.js"></script>
</head>
<body>
<section class = "parallax">
<h1>The First Scroll</h1>
</section>
<section class = "parallax">
<h1>The Second One</h1>
</section>
<section class = "parallax">
<h1>GoingOn !!</h1>
</section>
<section class = "parallax">
<h1>And we've reached the bottom!!</h1>
</section>
</body>
</html>Perhatikan bahwa pada baris nomor 4, untuk contoh ini kita gunakan myscripts.js file yang akan disimpan di folder yang sama dengan file HTML dan file CSS.
Sekarang, mari kita siapkan file CSS kita seperti gambar di bawah ini.
header {
height: 4em;
background: #845;
}
.parallax {
background-repeat: no-repeat;
background-size: cover;
}
.parallax h1 {
text-align: center;
margin: 0;
font-size: 2.5em;
letter-spacing: .2em;
color: red;
padding: 10rem 0;
mix-blend-mode: exclusion;
}
.parallax:nth-of-type(1) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(1) h1 {
padding: 15rem 0;
}
.parallax:nth-of-type(2) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(2) h1 {
padding: 12rem 0;
}
.parallax:nth-of-type(3) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(4) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}Sekarang sampai pada bagian JavaScript, buat file di notepad dan simpan sebagai myscripts.js .
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
window.addEventListener("scroll", function() {
var scrolledHeight= window.pageYOffset;
$$(".parallax").forEach(function(el,index,array) {
var limit = el.offsetTop+ el.offsetHeight;
if(scrolledHeight > el.offsetTop && scrolledHeight &l;= limit) {
el.style.backgroundPositionY= (scrolledHeight - el.offsetTop) /1.5+ "px";
} else {
el.style.backgroundPositionY= "0";
}
});
});Analisis Kode
Mari kita menganalisis kode JavaScript.
Kode dari line number 1 to 4 mewakili fungsi pembantu.
Di baris 6, kami memilih elemen paralaks kami dan menambahkan scrollacara ke jendela. Untuk menentukan berapa banyak area yang di-scroll, kami menggunakanscrolledHeightProperti. Saat layar bergulir ke bawah,backgroundPositionY diperbarui untuk elemen paralaks.
Untuk memperlambat efek paralaks, kita bagi dengan 1,5, angka ini dapat diubah menjadi angka yang Anda inginkan.
Sekarang, Anda akan dapat melihat halaman bergulir ke bawah seperti yang disediakan pada gambar di bawah ini.
Menggunakan Library JavaScript ScrollMagic
Seperti yang dibahas di bagian sebelumnya, meskipun kita dapat menggunakan JavaScript murni untuk membuat efek paralaks, ada beberapa pustaka JavaScript yang kuat yang akan meningkatkan pengalaman pengguna. ScrollMagic adalah salah satu library tersebut untuk membuat interaksi scroll paralaks.
Mari kita bahas lebih lanjut tentang ini dengan bantuan contoh seperti yang diberikan di bawah ini -
Note- Dalam contoh ini, untuk membuatnya sederhana, kita akan menyimpan CSS dalam file HTML. Selain itu, kode JavaScript akan ada di dokumen yang sama. Singkatnya, kita hanya akan membuat satu file HTML dan itu akan memiliki pustaka ScrollMagic yang direferensikan bersama dengan CSS yang diperlukan.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<style type = "text/css">
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}
</style>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:cyan">
<p>These are bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id="parallax2" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:yellow">
<p>Some More Bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id = "parallax3" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing2"></div>
<script>
// init controller
var controller = new ScrollMagic.Controller({
globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});
// build scenes
new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax2"})
.setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax3"})
.setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
</script>
</body>
</html>Seperti yang ditunjukkan pada kode di atas, kami memerlukan referensi pustaka JavaScript dari line 3 to 6. Kode CSS ditentukan dari baris 9 hingga 19.
Jaringan Pengiriman Konten
Referensi skrip dari baris 3 hingga 6 mengarah ke URL Jaringan Pengiriman Konten ScrollMagic (CDN). Menggunakan CDN masuk akal dalam pengembangan situs web modern, karena Anda dapat memuat pustaka yang diperlukan tanpa memperlambat situs web Anda.
Jika ada kustomisasi yang diperlukan di perpustakaan, seseorang harus menjadi tuan rumah perpustakaan di server masing-masing untuk memanfaatkan efek ini. Jika Anda menggunakan fungsionalitas dasar dari perpustakaan, itu efisien untuk menggunakan URL CDN.
Kode HTML di atas menunjukkan gambar yang dipisahkan oleh 2 divisi. Divisi pertama muncul dengan judul -These are bricks dan divisi kedua muncul dengan - Some More Bricks.
Perhatikan bahwa dalam kode CSS dari baris 9 hingga 19, kami hanya menentukan posisi dan gaya untuk div parallax masing-masing.
Pekerjaan menciptakan paralaks lembut ini scenedilakukan oleh perpustakaan ScrollMagic. Jika Anda merujuk ke kode skrip dari baris 43 hingga 62, ScrollMagiccontroller dipanggil dan a scene dibuat.
Pemandangan memandu DOM untuk membuat efek paralaks saat 80% layar terisi. JavaScript digunakan untuk memahami pemicu gulir. Hasilnya, yang Anda dapatkan adalah pengalaman mengambang di halaman ini.
Note - Mempertimbangkan gambar di atas sebagai gambar GIF, Anda tidak akan dapat mengamati efek mulus dari pembagian teks.
Animasi Pemicu
Kemungkinan menciptakan pengalaman pengguna yang bervariasi tidak terbatas dengan ScrollMagic Library. Amati potongan kode yang diberikan di bawah ini untuk memicu animasi saat menggulir.
Perhatikan bahwa untuk ini Anda memerlukan dua file * minus; satu file HTML dan satu file CSS.
Buat file HTML dengan kode yang ditunjukkan di bawah ini -
<html>
<head>
<link rel = "stylesheet" href = "style.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div style = "height:450px;"></div>
<div id = "square" class = "square">This is it!</div>
<div style = "height:450px;"></div>
<script>
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "40%", ease: Linear.easeNone})
.addTo(controller);
var scene = new ScrollMagic.Scene({triggerElement: '.square'})
.setClassToggle('.square', 'show')
.addTo(controller);
</script>
</body>
</html>Sekarang, buat file CSS dengan kode berikut di dalamnya.
.square {
background: aqua;
margin: 0 auto;
display: block;
padding: 40px 0;
text-align: center;
color: #000;
font-size: 40px;
font-weight: bold;
opacity: 0;
transition: .3s;
width: 0%;
}
.square.show{
opacity: 1;
width: 100%;
}
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}Analisis Kode
Mengacu pada kode HTML, kode ScrollMagic dimulai dari line 17 dan berlanjut sampai line 25. Di bagian ini, kami membuat dua adegan ScrollMagic. Adegan pertama untuk gambar bata dan yang lainnya untuk animasi spanduk.
Sebagaimana ditentukan dalam setTween berfungsi line 20, ketika aksi gulir terjadi pada 40% ukuran layar, adegan berikutnya dimulai yang menampilkan spanduk Ini dia!
Opasitas div dengan id - square dikontrol dalam file CSS di line 10 dan line 15.
Hasilnya, Anda akan melihat animasi di bawah ini pada halaman.
Pengguliran Horizontal
Kami juga dapat menerapkan gulir paralaks dan mencapai gulir horizontal. Perpustakaan ScrollMagic dapat digunakan untuk membuat efek horizontal pengguliran. Lihat kode di bawah ini.
Meskipun kodenya lurus ke depan untuk membuat efek scrolling horizontal, kita memerlukan referensi jquery untuk mencapai gerakan horizontal layar. Detail jQuery disediakan di bab berikutnya, untuk saat ini, cukup ikuti kode seperti yang diberikan di bawah ini.
Kami akan membuat tiga file terpisah - file HTML untuk kode utama, file CSS untuk gaya dan file JS untuk panggilan fungsi ScrollMagic.
Berikut adalah kode untuk dokumen HTML.
<html>
<head>
<link rel = "stylesheet" href = "style.css">
</head>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>
<script src = "animation.js"></script>
<body>
<div class = "wrapper" id = "js-wrapper">
<div class = "sections" id = "js-slideContainer">
<section class = "section">
<span class = "section__title" id = "title1">Scroll Once</span>
<span id = "trigger--title1"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title2">Do It Again</span>
<span id = "trigger--title2"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title3">Thank You!</span>
<span id = "trigger--title3"></span>
</div>
</div>
</body>
</html>Perhatikan bahwa kami memiliki tiga bagian, yang akan muncul setelah menggulir. Ketiga bagian tersebut dilambangkan dengan id title1, title2 dan title3 masing-masing pada baris 15,19 dan 23.
Kode untuk dokumen CSS diberikan di bawah ini -
body {
font-family: serif;
}
body, html {
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.section {
height: 100%;
width: calc( 100% / 5 );
float: left;
position: relative;
}
.section:nth-child(1) {
background: green;
}
.section:nth-child(2) {
background: orange;
}
.section:nth-child(3) {
background: red;
}
.sections {
width: 500%;
height: 100%;
}
.section__title {
position: absolute;
top: 50%;
left: 50%;
font-size: 30px;
color: #fff;
}Analisis Kode
Warna latar belakang untuk tiga layar (atau bagian) disediakan di lines 10, 22 dan 25.
Kami menghitung lebar relatif setiap layar dalam kode yang dimulai line 13.
Kode JavaScript untuk ScrollMagic diberikan di bawah ini -
$(function () {
var controller = new ScrollMagic.Controller();
var horizontalSlide = new TimelineMax()
.to("#js-slideContainer", 1, {x: "-20%"})
.to("#js-slideContainer", 1, {x: "-40%"})
new ScrollMagic.Scene({
triggerElement: "#js-wrapper",
triggerHook: "onLeave",
duration: "400%"
})
.setPin("#js-wrapper")
.setTween(horizontalSlide)
.addTo(controller);
});Perhatikan triggerHookproperti di baris 8. Properti ini bertanggung jawab untuk menyediakan efek gulir saat pengguna mencapai penyelesaian acara gulir. FungsinyaTimelineMax bertanggung jawab untuk memberikan efek gulir horizontal ke layar kami.
Setelah membuat file masing-masing, Anda akan dapat melihat animasi scroll horizontal seperti yang ditunjukkan di bawah ini.
Pada bab sebelumnya, kita telah memahami bagaimana efek bagus menggunakan pustaka JavaScript ditambahkan ke situs web. JavaScript, bila digabungkan dengan Photoshop, memberikan fleksibilitas yang fenomenal dan kemudahan untuk menambahkan parallax scrolling ke situs Anda.
Dalam bab ini, kita akan melihat tiga plugin Photoshop untuk menambahkan efek scrolling paralaks. Sama seperti bagaimana kita direferensikan di bab sebelumnya untuk JavaScript, kita akan menggunakan referensi Photoshop dalam kode HTML kita untuk membuat scrolling paralaks Photoshop yang kuat.
Poin penting yang perlu diperhatikan tentang plugin Photoshop adalah sering kali plugin tidak diperbarui, oleh karena itu Anda ingin melakukan penelitian sebelum mulai menggunakan plugin apa pun untuk parallax scrolling.
Parallax Scrolling menggunakan Parallax.js sederhana
Parallax.js menggunakan plugin Photoshop, kita bisa membuat efek parallax scrolling tanpa banyak kerepotan. Mempertimbangkan plugin jQuery membutuhkan penyertaan pustaka kelas atas seperti bootstrap. Perhatikan bahwa di bab ini akan ada tag HTML5 di dalam kode.
Mari kita lihat file HTML yang ditunjukkan di bawah ini -
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Parallax.js | Simple Parallax Scrolling Effect with jQuery</title>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
</head>
<body>
<section>
<div class = "container">
<h1>Example on Parallax.js</h1>
<p data-pg-collapsed>
This is an example of parallax scrolling using Parallax.js jQuery Plugin.
</p>
<br/>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-position = "top" data-bleed = "10"
data-image-src = "https://pixabay.com/get/ea31b90a2af5093ed1534705fb0938c9bd22ffd41cb2114595f9c67dae/clematis-3485218_1920.jpg"
data-natural-width = "1600" data-natural-height = "800" >
</div>
<section>
<div class = "container">
<h2 id = "sampleLorem">Sample Text Here</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
<br/>
<br/>
Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean
quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis
tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus
risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis
quis ligula lacinia aliquet. Mauris ipsum.
<br/>
<br/>
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nam nec
ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing
diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla.
Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.
Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu
magna luctus suscipit.
<br/>
<br/>
Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus
vitae pharetra auctor, sem massa mattis sem, at interdum magna augue
eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent
blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.
Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt
malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris.
Morbi in dui quis est pulvinar ullamcorper.
<br/>
<br/>
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed
aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis,
venenatis tristique, dignissim in, ultrices sit amet, augue. Proin
sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi
lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus,
accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium
blandit orci.
<br/>
<br/>
Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non,
convallis id, sagittis at, neque. Nullam mauris orci, aliquet et,
iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam
imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus
et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
nisi. Nulla quis sem at nibh elementum imperdiet.
<br/>
<br/>
</p>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-bleed = "10" data-speed = "0.2"
data-image-src = "https://pixabay.com/get/ea31b90620f0063ed1534705fb0938c9bd22ffd41cb2114594f0c37cae/chamomile-3489847_1920.jpg"
data-natural-width = "1600" data-natural-height = "801"
data-pg-name = "PARALLAX IMAGE 002">
</div>
</body>
</html>Kode Analisis
Cuplikan kode di atas menunjukkan kode untuk halaman dengan dua gambar dan contoh teks di antaranya.
Seperti yang Anda lihat, kode dimulai dengan <!DOCTYPE html>Ini adalah cara umum untuk memberi tahu browser bahwa kode tersebut berbasis HTML5.
itu <meta> tag dari line 4 to 6menunjukkan kode yang merupakan mesin untuk interpretasi. Anda tidak akan dapat melihat dampak dari kode ini. Hal penting yang perlu diperhatikan di sini adalah - denganmeta tag, pengembang web mendapatkan kontrol yang ditingkatkan atas data yang sedang ditampilkan.
Juga, aktif line 8 and 9, Kami telah menyertakan lembar gaya CSS bersama dengan Bootstrap. Untuk jenis font dan tipografi tertentu, Bootstrap adalah pustaka yang banyak digunakan.
Lines 10 and 11jaga perpustakaan Photoshop dan Parallax.js. Penting untuk menyertakan kontrol atas Parallax.js untuk mendapatkan efek gambar paralaks. Anda akan dapat menemukannyadata-parallax properti dengan div di line 21, Yang cukup untuk memanggil perpustakaan parallax.js untuk efek paralaks yang diperlukan.
Efek paralaks dapat dilihat pada kode di lines 21 dan line 40. Properti penting yang membuat efek ini terjadi dengan parallax.js adalah -data-parallax, data-image-src, data-natural-width, data-natural-height.
Dengan file CSS, kita hanya perlu menyediakan satu properti. Seperti yang ditunjukkan di bawah ini -
.parallax-container {
height: 500px;
width: 100%;
}Pada kode HTML di atas, kami telah membuat struktur khusus untuk file CSS. Kami akan memiliki folder bernamacss, yang akan memiliki file CSS - bootstrap.min.css dan style.css.
Setelah semuanya selesai dengan dokumen, Anda akan dapat melihat efek paralaks seperti yang ditunjukkan di bawah ini -
Parallaxator menggunakan Plugin Photoshop
Plugin Parallaxator terbaik dari Photoshop memberikan efek scrolling paralaks dan mudah digunakan. Anda dapat mengunduh plugin Parallaxator, file CSS dan JS-nya dari tautan ini - Parallaxator GitHub .
Setelah file CSS dan JS diunduh, Anda dapat menggunakan kode yang ditunjukkan di bawah ini untuk membuat kode HTML.
<!DOCTYPE html>
<html>
<head>
<title>Parallaxator Plugin</title>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
<link rel = "stylesheet" href = "fm.parallaxator.jquery.css">
<link rel = "stylesheet" href = "style.css">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "fm.parallaxator.jquery.js"></script>
</head>
<body>
<div class = "section1 parallaxator">
<img class = "parallax_child" src = "img/landscape.jpg" width = "100%">
<h1 class = "mega_text parallax_child">Nature</h1>
</div>
<div class = "section2 parallaxator">
<img class = "parallax_child" src = "img/architecture.jpg" width = "100%">
<h1 class = "mega_text parallax_child">
Architecture<br>
</h1>
</div>
<div class = "section3 parallaxator">
<img class = "parallax_child" src = "img/architecture1.jpg" width = "100%">
<h1 class = "mega_text parallax_child" data-parallaxator-reverse = "true" data-parallaxator-velocity = "0.35">
Architecture again!
</h1>
</div>
</body>
</html>Kode Analisis
Efek parallax disediakan oleh kelas parallax_child yang disediakan dengan setiap tag img. Parallax_child terhubung dengan file CSS dan JS yang disediakan di bawah ini.
Agar parallaxator plugin berfungsi, kami telah menyertakan fm.parallaxator.jquery.css dan fm.parallaxator.jquery.js. File-file ini harus tersedia di direktori yang sama dengan file HTML.
Kode untuk CSS ditunjukkan di bawah ini -
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.section1,.section2, .section3 {
border-bottom: 32px solid #fff;
padding-top: 40%;
}
.section1 {
background-color: #fdb;
}
.section2 {
background-color: #bdf;
}
.section3 {
background-color: #fbd;
}
.mega_text {
font-weight: bold;
font-size: 100px;
margin: 0;
text-shadow: 0 10px 100px #fff, 0 0 15px #fff;
padding: 64px;
display: block;
}Sebagai hasil dari kode di atas, Anda akan dapat melihat efek paralaks.
Plugin jQuery Stellar.js untuk Parallax Scrolling
Stellar.js adalah tambahan lain dari daftar plugin parallax Photoshop. Meski sudah tidak terawat, developer yang sudah menggunakan build stable-nya bisa menggunakan efek parallax scrolling dengan mudah. Ini kompatibel dengan versi terbaru Photoshop dan mudah diimplementasikan.
Anda perlu mengunduh jquery.stellar.js terbaru dari situs web resmi untuk plugin Stellar.js . Setelah diunduh, buat file plugin ini di folder yang sama dengan file HTML dan CSS Anda.
Mari kita lihat kode HTML.
<!doctype html>
<html>
<head>
<title>Stellar.js Demo</title>
<link href = "style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "jquery.stellar.js"></script>
<script>
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
</script>
</head>
<body>
<h1>Demo Site</h1>
<div class = "image architecture" data-stellar-background-ratio = "0.5">
<span>Architecture</span>
</div>
<div class = "image abstract" data-stellar-background-ratio = "0.5">
<span>Abstract</span>
</div>
<div class = "image landscape" data-stellar-background-ratio = "0.5">
<span>Landscape</span>
</div>
<div class = "image window" data-stellar-background-ratio = "0.5">
<span>Window</span>
</div>
</body>
</html>Kode Analisis
Agar Stellar.js berfungsi, kami telah menyertakan pustaka tepat setelah plugin Photoshop direferensikan di jquery.stellar.js line 6.
Fungsi untuk Stellar parallax dipanggil di tag script from line 8 to line 15. Dengan propertidata-stellar-background-ratio, Kami mengatur offset untuk gambar yang sedang ditampilkan. Ini dilakukan padalines 19,20,21 and 22.
Kode CSS diberikan di bawah ini -
body {
font-family: helvetica, arial;
padding-top: 40px;
}
h1 {
background-color: black;
color: white;
height: 40px;
font-size: 24px;
font-weight: normal;
left: 0;
line-height: 40px;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 1;
}
h1 a {
border-bottom: 1px solid white;
color: white;
display: inline-block;
line-height: 30px;
text-decoration: none;
}
.image {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.image span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
}
.architecture {
background-image: url(img/architecture.jpg);
}
.abstract {
background-image: url(img/ruin.jpg);
}
.landscape {
background-image: url(img/landscape.jpg);
}
.window {
background-image: url(img/window.jpg);
}Setelah kedua file dibuat dan stellar.js, file plugin disertakan dalam folder yang sama, Anda akan melihat efeknya seperti yang ditunjukkan pada gambar di bawah ini -
Bootstrap adalah kerangka kerja populer dengan banyak komponen siap pakai untuk dipilih. Bootstrap dapat mengoptimalkan kode untuk mengimplementasikan parallax scrolling.
Dalam bab ini, dengan sebuah contoh Mari kita bahas bagaimana kita akan menggunakan komponen Jumbotron untuk mengimplementasikan parallax scrolling.
Halaman Penuh dengan Parallax Bootstrap4 Jumbotron
Bayangkan sebuah situs web tempat pengguna ditampilkan dengan kotak besar "ajakan bertindak" dengan beberapa konten tentang diskon atau penjualan. Biasanya, Jumbotron menemukan penerapannya di tempat-tempat seperti itu. Ini adalah kotak besar yang berguna untuk menarik perhatian pengguna.
Karena kami hanya menggunakan satu komponen Bootstrap, kami tidak akan membuat file CSS terpisah untuk contoh ini. Mari kita selami langsung ke kode HTML.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin = "anonymous">
<style>
.jumbotron{
margin:15px 30px 0px 30px;
border-radius:10px;
background:
linear-gradient(
rgba(0, 0, 250, 0.25),
rgba(125, 250, 250, 0.45)),
url(img/ruin.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
color:white !important;
height:440px;
}
.page-scroll {
height:5000px;
}
.lead {
font-family:raleway;
font-weight:100;
margin-top:-10px;
}
</style>
</head>
<body>
<div class = "jumbotron jumbotron-fluid">
<div class = "container">
<h1 class = "display-2">Jumbotron Example</h1>
<p class = "lead">Example text for parallax using jumbotron</p>
</div>
</div>
<div class = "page-scroll"> </div>
</body>
</html>Kode Analisis
itu line 64 referensi pustaka Bootstrap. Kami menentukan margin dan radius batas untuk Jumbotron dariline 8 to 11.
Seperti yang bisa kita lihat line 33, Kami membuat div dengan kelas Jumbotron untuk menunjukkan kotak besar tempat gambar spesifik kami akan dimuat. Harap dicatat bahwa tidak ada URL langsung untuk gambar kali ini, kami akan menggunakan gambar yang diunduh. Anda dapat mengunduh gambar resolusi tinggi untuk contoh Anda dan menentukannya diline 16.
Output yang dapat Anda lihat ketika Anda menjalankan kode yang diberikan di atas ditunjukkan di bawah ini -
Dalam tutorial ini, kami telah mempelajari berbagai pustaka untuk membuat parallax scrolling. Kami telah mencakup semua aspek dari tingkat dasar hingga tingkat lanjutan di mana kami menggunakan Bootstrap CSS yang digunakan untuk pengembangan ujung depan. Kami menyarankan Anda untuk menerapkan keterampilan kreatif Anda untuk menghasilkan halaman web yang sulit untuk diabaikan. Ingatlah bahwa untuk parallax scrolling, ada banyak contoh online untuk memberi Anda inspirasi.
Pemanfaatan Parallax Scrolling
Seperti yang telah kita bahas di bab pengantar, Anda dapat menggunakan parallax scrolling untuk mendapatkan pengalaman pengguna yang luar biasa. Berikut adalah beberapa ide untuk situs tersebut, di mana Anda dapat menyertakan scrolling paralaks.
Garis waktu situs web
Jenis situs ini biasanya memiliki cerita untuk diceritakan tentang produk atau perusahaan atau hal lainnya. Anda dapat membuat efek paralaks untuk menampilkan cerita kepada pengunjung dan membuat mereka tetap terlibat dengan animasi yang berbeda.
Untuk situs timeline, akan bermanfaat untuk membuat latar belakang dan menampilkan konten teks di latar depan. Anda dapat bekerja sama dengan desainer grafis untuk membuat grafik yang sejalan dengan latar belakang.
Situs web Aplikasi Seluler
Saat ini, aplikasi seluler harus dimiliki untuk setiap penawaran produk / layanan. Ada banyak startup yang ingin membuat website aplikasi mobile yang memberikan penjelasan tentang apa yang bisa dan tidak bisa dilakukan aplikasi mobile.
App Store Apple, yang dikenal dengan pedoman pembuatan aplikasi yang ketat, menuntut aplikasi seluler untuk memiliki situs web dukungan. Situs web ini harus selalu menarik dan ramah pengguna.
Dengan menggunakan Parallax scrolling, Anda dapat menggunakan gambar seluler dan menunjukkan berbagai jenis fungsi saat pengguna menggulir ke bawah halaman. Salah satu contohnya sudah dibahas di Bab 4 tutorial ini.
Efek Mouse Over
Anda dapat menggunakan kekuatan parallax scrolling dan mouse over untuk membuat tingkat animasi berikutnya. Dengan mouse di atas, Anda dapat mengontrol arah scrolling dan membuat efek paralaks.
Dengan cara ini, ada banyak kemungkinan untuk menciptakan pengalaman yang luar biasa. Yang Anda butuhkan hanyalah ide dan seperangkat alat dan pustaka yang tepat.
Masa Depan UI Web
Dengan kekuatan teknologi dan elemen kreatif seperti parallax scrolling, ada persaingan yang belum pernah ada sebelumnya untuk menciptakan pengalaman pengguna yang luar biasa. Ini tidak hanya terbatas pada situs web tetapi juga telah diperluas ke situs seluler juga.
Sementara UI Web saat ini berada di puncaknya, memiliki halaman web yang kompatibel dengan perangkat seluler adalah membutuhkan waktu. Seperti yang telah kita lihat pada contoh untuk Bootstrap dan jQuery, situs web tidak dapat berumur panjang jika tidak didukung pada perangkat genggam.
Seiring dengan perpustakaan yang ada, masa depan pengalaman pengguna sangat menantikan Artificial Intelligence dan virtual reality juga. Ada beberapa halaman web yang dapat dilihat menggunakan perlengkapan VR. Dalam situasi seperti itu, tetap berhubungan dengan plugin terbaru dan juga mencari plugin baru benar-benar masuk akal.
Anda menerapkan pengetahuan yang diperoleh dalam tutorial ini untuk menciptakan pengalaman pengguna yang terbaik, semoga Anda beruntung dan sukses dalam perjalanan pengembangan web Anda!