{"id":1084,"date":"2025-07-24T02:40:16","date_gmt":"2025-07-24T02:40:16","guid":{"rendered":"https:\/\/lspdigi.com\/blog\/?p=1084"},"modified":"2025-07-24T02:40:36","modified_gmt":"2025-07-24T02:40:36","slug":"tutorial-membuat-parallax-scrolling","status":"publish","type":"post","link":"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/","title":{"rendered":"Tutorial Membuat Parallax Scrolling"},"content":{"rendered":"\n<p>Tutorial Membuat Parallax Scrolling, Parallax scrolling adalah salah satu teknik desain web yang bisa membuat tampilan website jadi lebih dinamis dan interaktif. <\/p>\n\n\n\n<p>Efek ini memberikan kesan kedalaman (depth) dengan membuat latar belakang dan elemen lainnya bergerak dengan kecepatan berbeda saat pengguna melakukan scroll. <\/p>\n\n\n\n<p>Teknik ini sangat populer di kalangan web designer karena memberikan pengalaman visual yang menarik bagi pengunjung.<\/p>\n\n\n\n<p>Dalam tutorial membuat parallax scrolling kali ini, kita akan membahas langkah-langkah dasar, elemen penting yang dibutuhkan, serta tips optimasi agar efek parallax tidak mengganggu performa website. Gaya penjelasannya dibuat santai dan mudah dipahami, cocok untuk pemula maupun yang ingin menyempurnakan proyek web-nya.<\/p>\n\n\n\n<p>Memiliki <a href=\"https:\/\/lspdigi.com\/blog\/sertifikasi-web-developer\/\">Sertifikasi Web Developer <\/a>menjadi bukti bahwa kamu tidak hanya menguasai bahasa pemrograman, tetapi juga memahami standar pengembangan web yang dibutuhkan industri saat ini<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/#Apa_Itu_Parallax_Scrolling\" >Apa Itu Parallax Scrolling?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/#Keuntungan_Menggunakan_Parallax_Scrolling_di_Website\" >Keuntungan Menggunakan Parallax Scrolling di Website<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/#Tools_dan_Bahasa_yang_Dibutuhkan\" >Tools dan Bahasa yang Dibutuhkan<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/#1_Struktur_HTML_Sederhana\" >1. Struktur HTML Sederhana<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/#Menambahkan_Efek_Parallax_dengan_CSS\" >Menambahkan Efek Parallax dengan CSS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/#1_CSS_Background_Attachment_Fixed\" >1. CSS Background Attachment Fixed<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/#Efek_Parallax_Lebih_Dinamis_dengan_JavaScript\" >Efek Parallax Lebih Dinamis dengan JavaScript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/#1_Scroll_Event_Listener\" >1. Scroll Event Listener<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/#Menggunakan_Library_untuk_Parallax_Scrolling\" >Menggunakan Library untuk Parallax Scrolling<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/#1_Menggunakan_AOS_Library\" >1. Menggunakan AOS Library<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/#Tips_Optimasi_Parallax_agar_Tidak_Berat\" >Tips Optimasi Parallax agar Tidak Berat<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/#1_Responsive_Design_Tetap_Prioritas\" >1. Responsive Design Tetap Prioritas<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/#Kesimpulan\" >Kesimpulan<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Apa_Itu_Parallax_Scrolling\"><\/span><strong>Apa Itu Parallax Scrolling?<\/strong><strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Sebelum masuk ke tahap praktik, penting untuk benar-benar memahami apa itu parallax scrolling. Parallax scrolling adalah efek visual yang digunakan untuk menciptakan ilusi kedalaman dengan menggerakkan beberapa lapisan elemen di kecepatan berbeda saat halaman digulir ke bawah.<\/p>\n\n\n\n<p>Dalam implementasi web, efek ini biasanya melibatkan latar belakang yang bergerak lebih lambat dibandingkan konten di depannya. Dengan mengikuti tutorial membuat parallax scrolling ini, kamu akan paham cara kerjanya dan bagaimana menggunakannya untuk memperkuat tampilan dan daya tarik situs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Keuntungan_Menggunakan_Parallax_Scrolling_di_Website\"><\/span><strong>Keuntungan Menggunakan Parallax Scrolling di Website<\/strong><strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Efek parallax tidak hanya memberikan estetika yang keren, tapi juga memiliki beberapa keuntungan seperti meningkatkan waktu tinggal pengunjung (dwell time), memperkuat storytelling visual, dan membuat website lebih berkesan. Namun, penggunaan efek ini harus tetap bijak agar tidak memperlambat loading page.<\/p>\n\n\n\n<p>Bagi kamu yang tertarik untuk meningkatkan kualitas desain web, mengikuti tutorial membuat parallax scrolling ini adalah langkah awal yang tepat.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tools_dan_Bahasa_yang_Dibutuhkan\"><\/span><strong>Tools dan Bahasa yang Dibutuhkan<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Untuk memulai tutorial membuat parallax scrolling, kamu perlu beberapa tools dan pengetahuan dasar HTML, CSS, dan JavaScript. Jika kamu menggunakan framework seperti React atau library GSAP, maka efek ini bisa lebih mudah dikustomisasi.<\/p>\n\n\n\n<p>Saran tools:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Code editor (seperti VSCode)<\/li>\n\n\n\n<li>Browser (untuk preview)<\/li>\n\n\n\n<li>Library tambahan (opsional, seperti AOS, ScrollMagic, atau GSAP)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Struktur_HTML_Sederhana\"><\/span>1. <strong>Struktur HTML Sederhana<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Langkah pertama dalam tutorial membuat parallax scrolling adalah membuat struktur HTML. Berikut contoh dasarnya:<\/p>\n\n\n\n<p>&lt;section class=&#8221;parallax&#8221;&gt;&lt;\/section&gt;<\/p>\n\n\n\n<p>&lt;section class=&#8221;content&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&lt;h2&gt;Judul Konten&lt;\/h2&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&lt;p&gt;Isi teks atau konten utama di sini.&lt;\/p&gt;<\/p>\n\n\n\n<p>&lt;\/section&gt;<\/p>\n\n\n\n<p>Pastikan setiap bagian memiliki class yang bisa kamu target di CSS untuk efek parallax-nya.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Menambahkan_Efek_Parallax_dengan_CSS\"><\/span><strong>Menambahkan Efek Parallax dengan CSS<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Sekarang kita akan menambahkan efek dasar parallax dengan CSS. Ini cara yang paling simpel dan banyak digunakan untuk halaman dengan latar gambar tetap.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_CSS_Background_Attachment_Fixed\"><\/span><strong>1. CSS Background Attachment Fixed<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Gunakan properti background-attachment: fixed&nbsp;untuk membuat efek dasar parallax:<\/p>\n\n\n\n<p>.parallax {<\/p>\n\n\n\n<p>&nbsp;&nbsp;background-image: url(&#8216;gambar.jpg&#8217;);<\/p>\n\n\n\n<p>&nbsp;&nbsp;height: 100vh;<\/p>\n\n\n\n<p>&nbsp;&nbsp;background-attachment: fixed;<\/p>\n\n\n\n<p>&nbsp;&nbsp;background-position: center;<\/p>\n\n\n\n<p>&nbsp;&nbsp;background-repeat: no-repeat;<\/p>\n\n\n\n<p>&nbsp;&nbsp;background-size: cover;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>Dengan kode ini, latar belakang akan tetap diam saat pengguna scroll halaman, menciptakan efek parallax sederhana.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Efek_Parallax_Lebih_Dinamis_dengan_JavaScript\"><\/span><strong>Efek Parallax Lebih Dinamis dengan JavaScript<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Kalau kamu ingin efek yang lebih kompleks, tutorial membuat parallax scrolling dengan JavaScript akan sangat membantu. Dengan JavaScript, kamu bisa mengontrol kecepatan, arah, dan animasi elemen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Scroll_Event_Listener\"><\/span><strong>1. Scroll Event Listener<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Gunakan window.addEventListener(&#8220;scroll&#8221;)&nbsp;untuk mendeteksi scroll, lalu ubah posisi elemen berdasarkan scroll value:<\/p>\n\n\n\n<p>window.addEventListener(&#8220;scroll&#8221;, function() {<\/p>\n\n\n\n<p>&nbsp;&nbsp;let scroll = window.scrollY;<\/p>\n\n\n\n<p>&nbsp;&nbsp;document.querySelector(&#8220;.parallax&#8221;).style.backgroundPositionY = -(scroll * 0.5) + &#8220;px&#8221;;<\/p>\n\n\n\n<p>});<\/p>\n\n\n\n<p>Dengan cara ini, kamu bisa menciptakan efek parallax yang lebih fleksibel dan smooth.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Menggunakan_Library_untuk_Parallax_Scrolling\"><\/span><strong>Menggunakan Library untuk Parallax Scrolling<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Jika kamu lebih suka cara praktis, kamu bisa menggunakan library JavaScript yang sudah jadi. Salah satu rekomendasi dalam tutorial membuat parallax scrolling ini adalah ScrollMagic atau AOS (Animate on Scroll).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Menggunakan_AOS_Library\"><\/span><strong>1. Menggunakan AOS Library<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>AOS sangat populer karena ringan dan mudah dipakai. Kamu tinggal include AOS di HTML dan tambahkan atribut pada elemen yang ingin dianimasi.<\/p>\n\n\n\n<p>&lt;section data-aos=&#8221;fade-up&#8221;&gt;Konten dengan efek parallax&lt;\/section&gt;<\/p>\n\n\n\n<p>Pastikan untuk memanggil inisialisasi AOS di JavaScript:<\/p>\n\n\n\n<p>AOS.init();<\/p>\n\n\n\n<p>Ini adalah cara cepat untuk menciptakan pengalaman parallax-style dengan sedikit usaha.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tips_Optimasi_Parallax_agar_Tidak_Berat\"><\/span><strong>Tips Optimasi Parallax agar Tidak Berat<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Efek visual memang keren, tapi jangan sampai mengorbankan performa website. Dalam tutorial membuat parallax scrolling ini, kami juga berbagi tips penting:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Kompres gambar latar agar lebih ringan<\/li>\n\n\n\n<li>Gunakan lazy loading jika perlu<\/li>\n\n\n\n<li>Hindari terlalu banyak elemen animasi sekaligus<\/li>\n\n\n\n<li>Tes kecepatan loading dengan tools seperti PageSpeed Insights<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Responsive_Design_Tetap_Prioritas\"><\/span><strong>1. Responsive Design Tetap Prioritas<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pastikan desain parallax kamu tetap responsif. Gunakan media queries untuk menyesuaikan efek atau bahkan menonaktifkannya di perangkat mobile jika terlalu berat.<\/p>\n\n\n\n<p>@media (max-width: 768px) {<\/p>\n\n\n\n<p>&nbsp;&nbsp;.parallax {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;background-attachment: scroll;<\/p>\n\n\n\n<p>&nbsp;&nbsp;}<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>Dengan begitu, kamu tetap menjaga pengalaman pengguna yang optimal.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Kesimpulan\"><\/span><strong>Kesimpulan<\/strong><strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Parallax scrolling bisa menjadi nilai tambah visual untuk website kamu jika diterapkan dengan tepat. Dalam tutorial membuat parallax scrolling ini, kita sudah membahas dari dasar HTML, CSS, JavaScript, hingga penggunaan library dan optimasi performa.<\/p>\n\n\n\n<p>Efek parallax membuat desain web lebih hidup dan interaktif. Namun, penting untuk menggunakannya secara seimbang agar tidak mengganggu user experience. Cobalah eksperimen dengan berbagai teknik yang sudah dibahas dan temukan gaya parallax yang paling cocok untuk proyekmu.<\/p>\n\n\n\n<p>Semoga tutorial membuat parallax scrolling ini bermanfaat dan bisa langsung kamu terapkan!<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tutorial Membuat Parallax Scrolling, Parallax scrolling adalah salah satu teknik desain web yang bisa membuat tampilan website jadi lebih dinamis dan interaktif. Efek ini memberikan kesan kedalaman (depth) dengan membuat latar belakang dan elemen lainnya bergerak dengan kecepatan berbeda saat pengguna melakukan scroll. Teknik ini sangat populer di kalangan web designer karena memberikan pengalaman visual [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1085,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[41],"tags":[242,153],"class_list":["post-1084","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-developer","tag-parallax","tag-website"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tutorial Membuat Parallax Scrolling - Sertifikasi Informasi Teknologi Pilihan<\/title>\n<meta name=\"description\" content=\"Dalam tutorial membuat parallax scrolling ini, kita sudah membahas dari dasar HTML, CSS, JavaScript, hingga penggunaan library dan optimasi performa.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial Membuat Parallax Scrolling - Sertifikasi Informasi Teknologi Pilihan\" \/>\n<meta property=\"og:description\" content=\"Dalam tutorial membuat parallax scrolling ini, kita sudah membahas dari dasar HTML, CSS, JavaScript, hingga penggunaan library dan optimasi performa.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/\" \/>\n<meta property=\"og:site_name\" content=\"Sertifikasi Informasi Teknologi Pilihan\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-24T02:40:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-24T02:40:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/lspdigi.com\/blog\/wp-content\/uploads\/2025\/07\/LSPDIGI-58.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/\",\"url\":\"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/\",\"name\":\"Tutorial Membuat Parallax Scrolling - Sertifikasi Informasi Teknologi Pilihan\",\"isPartOf\":{\"@id\":\"https:\/\/lspdigi.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/lspdigi.com\/blog\/wp-content\/uploads\/2025\/07\/LSPDIGI-58.png\",\"datePublished\":\"2025-07-24T02:40:16+00:00\",\"dateModified\":\"2025-07-24T02:40:36+00:00\",\"author\":{\"@id\":\"https:\/\/lspdigi.com\/blog\/#\/schema\/person\/c607fd673d76234c85d88a2f08363911\"},\"description\":\"Dalam tutorial membuat parallax scrolling ini, kita sudah membahas dari dasar HTML, CSS, JavaScript, hingga penggunaan library dan optimasi performa.\",\"breadcrumb\":{\"@id\":\"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/#primaryimage\",\"url\":\"https:\/\/lspdigi.com\/blog\/wp-content\/uploads\/2025\/07\/LSPDIGI-58.png\",\"contentUrl\":\"https:\/\/lspdigi.com\/blog\/wp-content\/uploads\/2025\/07\/LSPDIGI-58.png\",\"width\":600,\"height\":400,\"caption\":\"Tutorial Membuat Parallax Scrolling\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/lspdigi.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial Membuat Parallax Scrolling\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/lspdigi.com\/blog\/#website\",\"url\":\"https:\/\/lspdigi.com\/blog\/\",\"name\":\"Sertifikasi Informasi Teknologi Pilihan\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/lspdigi.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/lspdigi.com\/blog\/#\/schema\/person\/c607fd673d76234c85d88a2f08363911\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/lspdigi.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/52efc5d4a4e4491740ecd3081978c18cffc55ba5877da30e595a7bc67cc111bf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/52efc5d4a4e4491740ecd3081978c18cffc55ba5877da30e595a7bc67cc111bf?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/lspdigi.com\"],\"url\":\"https:\/\/lspdigi.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial Membuat Parallax Scrolling - Sertifikasi Informasi Teknologi Pilihan","description":"Dalam tutorial membuat parallax scrolling ini, kita sudah membahas dari dasar HTML, CSS, JavaScript, hingga penggunaan library dan optimasi performa.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/","og_locale":"en_US","og_type":"article","og_title":"Tutorial Membuat Parallax Scrolling - Sertifikasi Informasi Teknologi Pilihan","og_description":"Dalam tutorial membuat parallax scrolling ini, kita sudah membahas dari dasar HTML, CSS, JavaScript, hingga penggunaan library dan optimasi performa.","og_url":"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/","og_site_name":"Sertifikasi Informasi Teknologi Pilihan","article_published_time":"2025-07-24T02:40:16+00:00","article_modified_time":"2025-07-24T02:40:36+00:00","og_image":[{"width":600,"height":400,"url":"https:\/\/lspdigi.com\/blog\/wp-content\/uploads\/2025\/07\/LSPDIGI-58.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/","url":"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/","name":"Tutorial Membuat Parallax Scrolling - Sertifikasi Informasi Teknologi Pilihan","isPartOf":{"@id":"https:\/\/lspdigi.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/#primaryimage"},"image":{"@id":"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/#primaryimage"},"thumbnailUrl":"https:\/\/lspdigi.com\/blog\/wp-content\/uploads\/2025\/07\/LSPDIGI-58.png","datePublished":"2025-07-24T02:40:16+00:00","dateModified":"2025-07-24T02:40:36+00:00","author":{"@id":"https:\/\/lspdigi.com\/blog\/#\/schema\/person\/c607fd673d76234c85d88a2f08363911"},"description":"Dalam tutorial membuat parallax scrolling ini, kita sudah membahas dari dasar HTML, CSS, JavaScript, hingga penggunaan library dan optimasi performa.","breadcrumb":{"@id":"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/#primaryimage","url":"https:\/\/lspdigi.com\/blog\/wp-content\/uploads\/2025\/07\/LSPDIGI-58.png","contentUrl":"https:\/\/lspdigi.com\/blog\/wp-content\/uploads\/2025\/07\/LSPDIGI-58.png","width":600,"height":400,"caption":"Tutorial Membuat Parallax Scrolling"},{"@type":"BreadcrumbList","@id":"https:\/\/lspdigi.com\/blog\/tutorial-membuat-parallax-scrolling\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/lspdigi.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tutorial Membuat Parallax Scrolling"}]},{"@type":"WebSite","@id":"https:\/\/lspdigi.com\/blog\/#website","url":"https:\/\/lspdigi.com\/blog\/","name":"Sertifikasi Informasi Teknologi Pilihan","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/lspdigi.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/lspdigi.com\/blog\/#\/schema\/person\/c607fd673d76234c85d88a2f08363911","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/lspdigi.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/52efc5d4a4e4491740ecd3081978c18cffc55ba5877da30e595a7bc67cc111bf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/52efc5d4a4e4491740ecd3081978c18cffc55ba5877da30e595a7bc67cc111bf?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/lspdigi.com"],"url":"https:\/\/lspdigi.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/lspdigi.com\/blog\/wp-json\/wp\/v2\/posts\/1084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lspdigi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lspdigi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lspdigi.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lspdigi.com\/blog\/wp-json\/wp\/v2\/comments?post=1084"}],"version-history":[{"count":2,"href":"https:\/\/lspdigi.com\/blog\/wp-json\/wp\/v2\/posts\/1084\/revisions"}],"predecessor-version":[{"id":1087,"href":"https:\/\/lspdigi.com\/blog\/wp-json\/wp\/v2\/posts\/1084\/revisions\/1087"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lspdigi.com\/blog\/wp-json\/wp\/v2\/media\/1085"}],"wp:attachment":[{"href":"https:\/\/lspdigi.com\/blog\/wp-json\/wp\/v2\/media?parent=1084"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lspdigi.com\/blog\/wp-json\/wp\/v2\/categories?post=1084"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lspdigi.com\/blog\/wp-json\/wp\/v2\/tags?post=1084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}