Teknik Photoshop
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 -
