{"id":1452,"date":"2025-07-18T03:33:45","date_gmt":"2025-07-18T03:33:45","guid":{"rendered":"https:\/\/kompetendigital.com\/blog\/?p=1452"},"modified":"2025-07-18T03:33:46","modified_gmt":"2025-07-18T03:33:46","slug":"tutorial-membuat-parallax-scrolling","status":"publish","type":"post","link":"https:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/","title":{"rendered":"Tutorial Membuat Parallax Scrolling"},"content":{"rendered":"\n<p>Ingin membuat tampilan website yang lebih menarik dan dinamis? Salah satu trik seru yang bisa kamu coba adalah parallax scrolling, yaitu efek geser yang bikin tampilan website kelihatan lebih dinamis dan keren.Efek ini memberikan kesan kedalaman dan pergerakan yang elegan, sehingga pengalaman pengguna jadi lebih interaktif. Di artikel ini, kita bakal bahas cara bikin parallax scrolling dengan langkah yang simpel dan gampang langsung dicoba.<\/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:\/\/kompetendigital.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:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/#Persiapan_Sebelum_Membuat_Parallax_Scrolling\" >Persiapan Sebelum Membuat 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-3\" href=\"https:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/#1_Struktur_HTML_Dasar\" >1. Struktur HTML Dasar<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/#2_Menambahkan_Gaya_CSS\" >2. Menambahkan Gaya CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/#3_Alternatif_dengan_JavaScript\" >3. Alternatif dengan JavaScript<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/#Tips_Tambahan_Agar_Parallax_Lebih_Optimal\" >Tips Tambahan Agar Parallax Lebih Optimal<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/kompetendigital.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>Apa Itu Parallax Scrolling?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"495\" src=\"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/pity-cute-sad-asian-girl-brunette-grimacing-pulling-sorrow-upset-face-frowning-bothered-pointing-fin-1024x495.jpg\" alt=\"Tutorial Membuat Parallax Scrolling\" class=\"wp-image-1136\" srcset=\"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/pity-cute-sad-asian-girl-brunette-grimacing-pulling-sorrow-upset-face-frowning-bothered-pointing-fin-1024x495.jpg 1024w, https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/pity-cute-sad-asian-girl-brunette-grimacing-pulling-sorrow-upset-face-frowning-bothered-pointing-fin-300x145.jpg 300w, https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/pity-cute-sad-asian-girl-brunette-grimacing-pulling-sorrow-upset-face-frowning-bothered-pointing-fin-768x372.jpg 768w, https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/pity-cute-sad-asian-girl-brunette-grimacing-pulling-sorrow-upset-face-frowning-bothered-pointing-fin-1536x743.jpg 1536w, https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/pity-cute-sad-asian-girl-brunette-grimacing-pulling-sorrow-upset-face-frowning-bothered-pointing-fin-2048x991.jpg 2048w, https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/pity-cute-sad-asian-girl-brunette-grimacing-pulling-sorrow-upset-face-frowning-bothered-pointing-fin-432x209.jpg 432w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Parallax scrolling itu efek visual di mana background bergerak lebih pelan dari bagian depan pas halaman digulir, jadi kelihatan lebih dinamis dan keren.Efek ini menciptakan ilusi kedalaman dan membuat tampilan situs jadi lebih hidup.<\/p>\n\n\n\n<p>Efek parallax sering digunakan dalam desain website modern untuk:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Menarik perhatian pengunjung<\/li>\n\n\n\n<li>Memberikan pengalaman visual yang menarik<\/li>\n\n\n\n<li>Memperkuat cerita visual dalam satu halaman<\/li>\n<\/ul>\n\n\n\n<p>Meski terlihat kompleks, sebenarnya efek ini cukup mudah diimplementasikan, apalagi dengan bantuan HTML, CSS, dan sedikit JavaScript.<\/p>\n\n\n\n<p>Kalau kamu ingin memperkuat skill coding dan diakui secara profesional, ikut <strong><a href=\"https:\/\/kompetendigital.com\/blog\/contoh-soal-sertifikasi-web-developer\/\">sertifikasi Web Developer<\/a><\/strong> bisa jadi langkah tepat. Sertifikasi ini menunjukkan bahwa kamu menguasai teknologi web dan siap bersaing di industri digital.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Persiapan_Sebelum_Membuat_Parallax_Scrolling\"><\/span>Persiapan Sebelum Membuat Parallax Scrolling<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Sebelum kita masuk ke bagian teknis, ada beberapa hal yang perlu disiapkan:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pengetahuan dasar HTML dan CSS<\/li>\n\n\n\n<li>Text editor (seperti VS Code atau Sublime Text)<\/li>\n\n\n\n<li>Browser untuk preview hasil<\/li>\n<\/ul>\n\n\n\n<p>Sekarang, mari kita mulai langkah-langkah membuat efek parallax secara bertahap.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Struktur_HTML_Dasar\"><\/span>1. Struktur HTML Dasar<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Langkah pertama adalah membuat struktur dasar HTML. Misalnya:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp; &lt;title&gt;Parallax Demo&lt;\/title&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp; &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;\/head&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp; &lt;div class=\"parallax\"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp; &lt;div class=\"content\"&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp; &lt;h1&gt;Selamat Datang&lt;\/h1&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp; &lt;p&gt;Ini adalah contoh parallax scrolling yang sederhana.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp; &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp; &lt;div class=\"parallax\"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;\/body&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Menambahkan_Gaya_CSS\"><\/span>2. Menambahkan Gaya CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Berikut contoh CSS untuk menciptakan efek parallax sederhana:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body, html {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp; margin: 0;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp; padding: 0;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp; height: 100%;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>.parallax {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp; background-image: url('gambar.jpg');<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp; height: 500px;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp; background-attachment: fixed;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp; background-position: center;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp; background-repeat: no-repeat;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp; background-size: cover;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>.content {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp; height: 400px;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp; background-color: white;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp; text-align: center;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp; padding: 50px;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>}<\/code><\/pre>\n\n\n\n<p>Penjelasan:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>background-attachment: fixed;<\/code> adalah kunci dari efek parallax.<\/li>\n\n\n\n<li>Gambar latar akan tetap pada posisinya saat konten di-scroll.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Alternatif_dengan_JavaScript\"><\/span>3. Alternatif dengan JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Jika ingin lebih fleksibel atau membuat efek yang lebih kompleks, kamu bisa gunakan JavaScript. Berikut contoh dasar:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>window.addEventListener('scroll', function() {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp; const parallax = document.querySelector('.parallax');<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp; let scrollPosition = window.pageYOffset;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp; parallax.style.backgroundPositionY = scrollPosition * 0.5 + 'px';<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>});<\/code><\/pre>\n\n\n\n<p>Dengan pendekatan ini, kamu bisa mengatur kecepatan efek parallax secara lebih presisi.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tips_Tambahan_Agar_Parallax_Lebih_Optimal\"><\/span>Tips Tambahan Agar Parallax Lebih Optimal<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Gunakan gambar berkualitas tinggi<\/strong>, tapi pastikan tidak terlalu besar agar tidak memperlambat loading.<\/li>\n\n\n\n<li><strong>Uji di berbagai perangkat<\/strong>, karena efek parallax bisa terasa berbeda di desktop dan mobile.<\/li>\n\n\n\n<li><strong>Gunakan secara proporsional<\/strong>, jangan terlalu banyak efek parallax dalam satu halaman karena bisa membuat pengguna cepat lelah.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Kesimpulan\"><\/span>Kesimpulan<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Parallax scrolling itu trik desain web yang bikin tampilan lebih keren dan kelihatan profesional, tapi bikinnya nggak ribet. Dengan modal HTML, CSS, dan sedikit JavaScript, kamu udah bisa bikin efek ini dan kasih pengalaman scroll yang menarik buat pengunjung websitemu.<\/p>\n\n\n\n<p>Jangan ragu untuk mencoba berbagai variasi efek dan menyesuaikannya dengan gaya visual brand atau proyek yang sedang kamu kerjakan. Selamat bereksperimen!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ingin membuat tampilan website yang lebih menarik dan dinamis? Salah satu trik seru yang bisa kamu coba adalah parallax scrolling, yaitu efek geser yang bikin tampilan website kelihatan lebih dinamis&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1455,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[36],"tags":[190],"class_list":["post-1452","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-developer","tag-tutorial-membuat-parallax-scrolling","article","has-background","has-excerpt","has-avatar","has-author","has-date","has-comment-count","has-category-meta","has-read-more","has-post-media","thumbnail-"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tutorial Membuat Parallax Scrolling -<\/title>\n<meta name=\"description\" content=\"Yuk ikuti tutorial membuat parallax scrolling dan pelajari cara bikin efek scroll keren yang bikin tampilan websitemu makin hidup!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kompetendigital.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 -\" \/>\n<meta property=\"og:description\" content=\"Yuk ikuti tutorial membuat parallax scrolling dan pelajari cara bikin efek scroll keren yang bikin tampilan websitemu makin hidup!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-18T03:33:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-18T03:33:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-22-2.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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/\",\"url\":\"https:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/\",\"name\":\"Tutorial Membuat Parallax Scrolling -\",\"isPartOf\":{\"@id\":\"https:\/\/kompetendigital.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-22-2.png\",\"datePublished\":\"2025-07-18T03:33:45+00:00\",\"dateModified\":\"2025-07-18T03:33:46+00:00\",\"author\":{\"@id\":\"https:\/\/kompetendigital.com\/blog\/#\/schema\/person\/793420f392d4b738adf327fe83e870c4\"},\"description\":\"Yuk ikuti tutorial membuat parallax scrolling dan pelajari cara bikin efek scroll keren yang bikin tampilan websitemu makin hidup!\",\"breadcrumb\":{\"@id\":\"https:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/#primaryimage\",\"url\":\"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-22-2.png\",\"contentUrl\":\"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-22-2.png\",\"width\":600,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kompetendigital.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial Membuat Parallax Scrolling\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kompetendigital.com\/blog\/#website\",\"url\":\"https:\/\/kompetendigital.com\/blog\/\",\"name\":\"\",\"description\":\"Jadi Profesional Setinggi Langit\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kompetendigital.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/kompetendigital.com\/blog\/#\/schema\/person\/793420f392d4b738adf327fe83e870c4\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/kompetendigital.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/620de75cd82a4e61ac250270ac94d652ceae998e47a5c532726a07aafe1aa197?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/620de75cd82a4e61ac250270ac94d652ceae998e47a5c532726a07aafe1aa197?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/kompetendigital.com\"],\"url\":\"https:\/\/kompetendigital.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial Membuat Parallax Scrolling -","description":"Yuk ikuti tutorial membuat parallax scrolling dan pelajari cara bikin efek scroll keren yang bikin tampilan websitemu makin hidup!","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:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/","og_locale":"en_US","og_type":"article","og_title":"Tutorial Membuat Parallax Scrolling -","og_description":"Yuk ikuti tutorial membuat parallax scrolling dan pelajari cara bikin efek scroll keren yang bikin tampilan websitemu makin hidup!","og_url":"https:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/","article_published_time":"2025-07-18T03:33:45+00:00","article_modified_time":"2025-07-18T03:33:46+00:00","og_image":[{"width":600,"height":400,"url":"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-22-2.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/","url":"https:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/","name":"Tutorial Membuat Parallax Scrolling -","isPartOf":{"@id":"https:\/\/kompetendigital.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/#primaryimage"},"image":{"@id":"https:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/#primaryimage"},"thumbnailUrl":"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-22-2.png","datePublished":"2025-07-18T03:33:45+00:00","dateModified":"2025-07-18T03:33:46+00:00","author":{"@id":"https:\/\/kompetendigital.com\/blog\/#\/schema\/person\/793420f392d4b738adf327fe83e870c4"},"description":"Yuk ikuti tutorial membuat parallax scrolling dan pelajari cara bikin efek scroll keren yang bikin tampilan websitemu makin hidup!","breadcrumb":{"@id":"https:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/#primaryimage","url":"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-22-2.png","contentUrl":"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-22-2.png","width":600,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/kompetendigital.com\/blog\/tutorial-membuat-parallax-scrolling\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kompetendigital.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tutorial Membuat Parallax Scrolling"}]},{"@type":"WebSite","@id":"https:\/\/kompetendigital.com\/blog\/#website","url":"https:\/\/kompetendigital.com\/blog\/","name":"","description":"Jadi Profesional Setinggi Langit","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kompetendigital.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/kompetendigital.com\/blog\/#\/schema\/person\/793420f392d4b738adf327fe83e870c4","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kompetendigital.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/620de75cd82a4e61ac250270ac94d652ceae998e47a5c532726a07aafe1aa197?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/620de75cd82a4e61ac250270ac94d652ceae998e47a5c532726a07aafe1aa197?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/kompetendigital.com"],"url":"https:\/\/kompetendigital.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/posts\/1452","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/comments?post=1452"}],"version-history":[{"count":1,"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/posts\/1452\/revisions"}],"predecessor-version":[{"id":1456,"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/posts\/1452\/revisions\/1456"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/media\/1455"}],"wp:attachment":[{"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/media?parent=1452"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/categories?post=1452"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/tags?post=1452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}