{"id":111376,"date":"2022-04-20T18:30:00","date_gmt":"2022-04-20T23:30:00","guid":{"rendered":"https:\/\/wpengine.com\/?post_type=resource&#038;p=111376"},"modified":"2025-05-13T12:00:34","modified_gmt":"2025-05-13T17:00:34","slug":"using-the-parallax-effect-on-your-wordpress-website","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/using-the-parallax-effect-on-your-wordpress-website\/","title":{"rendered":"Using the Parallax Effect on Your WordPress Website"},"content":{"rendered":"\n<p>Over time, even the most stylish website can start to feel a little stale. The ideal balance is to keep things interesting visually, without avoiding a complete redesign.&nbsp;<\/p>\n\n\n\n<p>Using a parallax effect can add a lot to your website\u2019s aesthetics. It can help your visual elements to stand out while also breaking up your text-based content. You may even notice that visitors stay on your site a bit longer due to increased engagement.<\/p>\n\n\n\n\n\n<p>In this guide, we\u2019ll talk about what the parallax effect is and some things to keep in mind when adding it to your site. Then we\u2019ll walk you through how to add this modern feature with or without using a plugin. Let\u2019s go!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is the parallax effect?<\/h2>\n\n\n\n<p>The parallax effect, or parallax scrolling, is when the background moves slower than the foreground\u2019s content as a user scrolls through a web page. This contrast in speed creates an illusion of depth and movement.&nbsp;<\/p>\n\n\n\n<p>Web designers often use this visual effect on different sections of their site, including home pages, landing pages, or any place where there are sections that could be broken up. It can be especially beneficial on one-page websites, as the novelty can encourage users to keep scrolling through the related content.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Considerations when adding parallax effects<\/h2>\n\n\n\n<p>The parallax scrolling effect can add a lot to your WordPress site, but when done incorrectly, it can take away from User Experience (UX). Accessibility can undoubtedly be impacted by this feature, as it can make reading difficult.<\/p>\n\n\n\n<p>When creating a parallax effect, you\u2019ll want to choose your background image carefully. Of course, you\u2019ll want high-quality images, but you don\u2019t want to use anything too distracting.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Select parallax WordPress themes<\/h2>\n\n\n\n<p>One way to get this trendy visual effect is to select a WordPress theme that comes with a parallax feature. There are a variety of accessible themes available that will enable you to add parallax scrolling quickly and easily:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/themetrust.com\/wordpress-themes\/create\/?ref=1395\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Create<\/strong><\/a><strong>:<\/strong> This theme includes several templates that incorporate a beautiful parallax effect. It\u2019s also a sound choice for building an eCommerce site.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.elegantthemes.com\/gallery\/divi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Divi<\/strong><\/a><strong>:<\/strong> Divi is a popular WordPress theme and page builder. This theme has plenty of niche demos with built-in parallax scrolling if you\u2019d prefer to import demo content.<\/li>\n\n\n\n<li><a href=\"https:\/\/themeforest.net\/item\/stockholm-a-genuinely-multiconcept-theme\/8819050\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Stockholm<\/strong><\/a><strong>:<\/strong> Stockholm is a flexible theme that comes bundled with a selection of premium plugins. You may want to have a look at this theme if you\u2019re building an online portfolio, as its simplicity keeps the focus on your content.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Of course, there are many more themes to choose from. However, these provide plenty to begin with, and also offer power in other areas too.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add the parallax effect to your WordPress site (with and without a plugin)<\/h2>\n\n\n\n<p>Even if your theme doesn\u2019t have built-in parallax, you can still add it to your site yourself. We\u2019ll show you how to do this with or without a plugin and break down both methods\u2019 steps.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Using WordPress parallax plugins<\/h2>\n\n\n\n<p>Using a plugin to add parallax scrolling is pretty straightforward. You\u2019ll install a plugin, configure your settings, and you\u2019re all set. Let\u2019s run through these steps in more detail.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Download a parallax plugin<\/h3>\n\n\n\n<p>There are a few plugins that can add parallax scrolling, but we recommend using <a href=\"https:\/\/wordpress.org\/plugins\/advanced-backgrounds\/\" target=\"_blank\" rel=\"noreferrer noopener\">Advanced WordPress Backgrounds<\/a> (AWB). This is a free WordPress parallax plugin that enables you to use images or video for your backgrounds:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/qBZwhkUaNvJBR8u-uDD_gu0YsiDxbpO4azTLvkySD6Z3t33948T1jlNOSX9YnqHGRtjVZyCrZoT55H4ggHdEjOehRwU33ar8Mn9iVtyyel9aRtcV479hbKAWEJ0_IrjvnekeGlRj\" alt=\"Using the Parallax Effect on Your WordPress Website. Advanced WordPress Backgrounds header image, wpbackgrounds.com\"\/><\/figure>\n\n\n\n<p>To <a href=\"https:\/\/wordpress.org\/support\/article\/managing-plugins\/\" target=\"_blank\" rel=\"noreferrer noopener\">download the plugin<\/a>, navigate to <em>Plugins &gt; Add New <\/em>and search for \u2018Advanced WordPress Backgrounds\u2019 as you would for any other.<\/p>\n\n\n\n<p>Once it\u2019s activated, you can move onto actually creating your parallax background.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Select an image<\/h3>\n\n\n\n<p>Here, navigate to the post or page where you\u2019d like the parallax effect to appear. AWB has its own Block, which you\u2019ll use to select your image and position the animated effect on the page:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/m80BMI4N72sDCGJOeid9LVPuZ8b7-hglTYmDwIoKJp83wiij9zpKJ7-70xEbg1VfWqda_Hjs_IbuPfMsMDgjLjz-Bqk6_QQOXCDNJlzrW3hE0kXbX131S7nkomSP3G3jDNi10xgA\" alt=\"Using the Parallax Effect on Your WordPress Website. AWB block in WordPress Block Editor image\"\/><\/figure>\n\n\n\n<p>In the <em>Block<\/em> menu, select the image or video you\u2019d like to use as your background from the Media Library. You can also use a solid color as a background if an image isn\u2019t appropriate for the application.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Enable parallax and select parallax type<\/h3>\n\n\n\n<p>While you\u2019re in the <em>Block<\/em> menu, you\u2019ll find options for the visual effect\u2019s behavior:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/xruAWEMhOuNyrpKku0aS8yRS1LoWM2JuZDwVqQ2BL3K01TUdGb66vM_DlchZVQ5A61TGX55CNwUxcT0I0I0Y2n5z30V8gV1UG7c7BWl5fw-7MqGwvlXbsttdAzxajqccSwk9mHGn\" alt=\"Using the Parallax Effect on Your WordPress Website. Image of how to enable Parallax and Select Parallax type behavior\"\/><\/figure>\n\n\n\n<p>Here, you\u2019re able to choose to have the background image\u2019s scale and opacity change as the user scrolls, rather than a more traditional parallax effect. This gives you greater control over how the effect displays on your website.<\/p>\n\n\n\n<p>Finally, you can elect to toggle the parallax option off for mobile devices, which tend to rely on swiping rather than scrolling for navigation (not to mention a potential affect to page load speeds).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Toggle the &#8220;mouse parallax&#8221; feature<\/h3>\n\n\n\n<p>Toggling on mouse parallax will add an effect that can be controlled by moving the mouse, rather than scrolling. As with other versions of this effect, you can adjust the size and speed, which determine the duration and intensity of the effect:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/C-DSHp96wfH4ZRdfgNusyzGdwqQz_Fd1XmuSSo1kxfoDc_f5jbiD8wAWbeV4ezBElAJmviulEkedxPkvxMDGOUYNHOW5eUfxmpM1TE1-rU__qVq8cArdMkolJUH-5GljBY1WLJdw\" alt=\"Image of how to toggle on the mouse parallax feature. Using the Parallax Effect on Your WordPress Website\"\/><\/figure>\n\n\n\n<p>If you have a one-page website, you may want to take advantage of this feature. Mouse parallax can create some fascinating visual effects with a little experimentation.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding parallax to WordPress using CSS<\/h2>\n\n\n\n<p>If you\u2019d rather not use a plugin, you can add parallax using CSS. You\u2019ll upload your background image, then add a bit of code to your site. Here\u2019s how to get the job done!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Upload image to your WordPress media library<\/h3>\n\n\n\n<p>From the WordPress dashboard, click on <em>Media &gt; Add New<\/em>. This will bring you to the Upload New Media page:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/jZR1b8ZsvwMNyEEycTpq3IhjWJVDS14hyjYl6JMGICtNJkc4YkmBSoLGpS-fQDv-0X2RPTGNId0mLSmeUgqYTpW2-JDqRd3k8vmopbqYuFv-rleDRfgdSXII0T6LbIjCQ2FzBd9j\" alt=\"Image of how to upload an image to your WordPress media library. Using the Parallax Effect on Your WordPress Website\"\/><\/figure>\n\n\n\n<p>Click on the <em>Select Files<\/em> button and find the image you\u2019d like to use for your background on your computer. Next, click <em>Open<\/em> and wait for the upload to complete.<\/p>\n\n\n\n<p>Once you\u2019ve uploaded your image, locate it in the media library by navigating to <em>Media &gt; Library<\/em> from the WordPress dashboard. Once you\u2019ve found your image, click on it and find the <em>File URL<\/em> in the window that opens:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/xat2zop5jQxod-XLuC-taMtBEQRCIfftCZ2ELNz2_nl0kyXgxDH2On3oIeYgbMtL-TiTUtI-gPepujrb3HT4jLJwbqfDqZjHBMBlcLViwA4YZ5jwcQ0vM0oSBFKcNJMpPlnurQe7\" alt=\"Image of how to copy the URL for an image in WordPress media library. Using the Parallax Effect on Your WordPress Website \"\/><\/figure>\n\n\n\n<p>Click on the <em>Copy URL<\/em> button to copy the link. Next, we\u2019ll add some code to your site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Add HTML into page\/post<\/h3>\n\n\n\n<p>Next, you\u2019ll add the <a href=\"https:\/\/looks-awesome.com\/add-parallax-effect-wordpress-website\" target=\"_blank\" rel=\"noreferrer noopener\">following HTML<\/a> into the page or post where you want the parallax effect to appear. If you\u2019re using the Block Editor, you can add this code using a Custom HTML block. However this could also be placed in the Text Editor for Classic Editor users:<\/p>\n\n\n\n<p><code>&lt;div class=\"parallax\"&gt;<\/code><\/p>\n\n\n\n<p><code>&lt;div class=\"parallax-content\"&gt;<\/code><\/p>\n\n\n\n<p><code>Your content here<\/code><\/p>\n\n\n\n<p><code>&lt;\/div&gt;<\/code><\/p>\n\n\n\n<p><code>&lt;\/div&gt;<\/code><\/p>\n\n\n\n<p>You\u2019ll want to replace the \u201cYour content here\u201d placeholder text with whatever content you\u2019d like and save your work.<\/p>\n\n\n\n<p>However, you won\u2019t see much on the front end yet as we still have one more step \u2013 adding Cascading StyleSheets (CSS) code to your theme.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Add CSS to your theme<\/h3>\n\n\n\n<p>Finally, you\u2019ll add some custom CSS to your theme using either the Theme Editor or the built-in CSS editor \u2013 it won\u2019t matter which option you choose.<\/p>\n\n\n\n<p>Add the <a href=\"https:\/\/looks-awesome.com\/add-parallax-effect-wordpress-website\" target=\"_blank\" rel=\"noreferrer noopener\">following CSS<\/a> to your theme, replacing the background image URL with the one you copied earlier:<\/p>\n\n\n\n<p><code>.parallax {&nbsp;<\/code><\/p>\n\n\n\n<p><code>background-image: url(\"http:\/\/example.com\/wp-content\/uploads\/2017\/08\/my-background-image.jpg\");<\/code><\/p>\n\n\n\n<p><code>height: 100%;<\/code><\/p>\n\n\n\n<p><code>background-attachment: fixed;<\/code><\/p>\n\n\n\n<p><code>background-position: center;<\/code><\/p>\n\n\n\n<p><code>background-repeat: no-repeat;<\/code><\/p>\n\n\n\n<p><code>background-size: cover;<\/code><\/p>\n\n\n\n<p><code>margin-left:-410px;<\/code><\/p>\n\n\n\n<p><code>margin-right:-410px;<\/code><\/p>\n\n\n\n<p><code>}<\/code><\/p>\n\n\n\n<p><code>.parallax-content {<\/code><\/p>\n\n\n\n<p><code>width:50%;<\/code><\/p>\n\n\n\n<p><code>margin:0 auto;<\/code><\/p>\n\n\n\n<p><code>color:#FFF;<\/code><\/p>\n\n\n\n<p><code>padding-top:50px;<\/code><\/p>\n\n\n\n<p><code>}<\/code><\/p>\n\n\n\n<p>Make sure you save your changes, then check the front end. You should now be able to see your parallax effect in action \u2013 all without plugins!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Customize your site with WP Engine<\/h2>\n\n\n\n<p>Using a parallax effect is an effective way of engaging your users. Whether you use it to break up the copy on a sales page or to make your one-page website into an immersive experience, parallax is a trend that may be worth your time.<\/p>\n\n\n\n<p>In this post, we went over what the parallax effect is and some things to think about before including it on your site. Then we showed you a few ways to implement the scrolling effect on your WordPress website.<\/p>\n\n\n\n<p><a href=\"https:\/\/wpengine.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">WP Engine<\/a> is all about enabling you to delight your customers. Check out <a href=\"https:\/\/wpengine.com\/wordpress-hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">WP Engine\u2019s managed platform for WordPress<\/a>, which can help you build remarkable digital experiences for your website visitors.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Over time, even the most stylish website can start to feel a little stale. The ideal balance is to keep things interesting visually, without avoiding a complete redesign.&nbsp; Using a parallax effect can add a lot to your website\u2019s aesthetics. It can help your visual elements to stand out while also breaking up your text-based<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":1,"featured_media":111377,"template":"","resource-topic":[904,901],"resource-role":[896],"resource-type":[916],"class_list":["post-111376","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Using the Parallax Effect on Your WordPress Website<\/title>\n<meta name=\"description\" content=\"Learn how to use the parallax effect on your WordPress website. Read on as we dive into how to implement this feature.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using the Parallax Effect on Your WordPress Website\" \/>\n<meta property=\"og:description\" content=\"Need assistance with using the parallax effect on your WordPress website? Read on as we dive into how to implement below.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/using-the-parallax-effect-on-your-wordpress-website\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-13T17:00:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2020\/10\/shutterstock_1071472322-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Using the Parallax Effect on Your WordPress Website\" \/>\n<meta name=\"twitter:description\" content=\"Need assistance with using the parallax effect on your WordPress website? Read on as we dive into how to implement below.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2020\/10\/shutterstock_1071472322-1.jpg\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/using-the-parallax-effect-on-your-wordpress-website\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/using-the-parallax-effect-on-your-wordpress-website\/\",\"name\":\"Using the Parallax Effect on Your WordPress Website\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2022-04-20T23:30:00+00:00\",\"dateModified\":\"2025-05-13T17:00:34+00:00\",\"description\":\"Learn how to use the parallax effect on your WordPress website. Read on as we dive into how to implement this feature.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/using-the-parallax-effect-on-your-wordpress-website\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/using-the-parallax-effect-on-your-wordpress-website\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/using-the-parallax-effect-on-your-wordpress-website\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Using the Parallax Effect on Your WordPress Website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using the Parallax Effect on Your WordPress Website","description":"Learn how to use the parallax effect on your WordPress website. Read on as we dive into how to implement this feature.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"Using the Parallax Effect on Your WordPress Website","og_description":"Need assistance with using the parallax effect on your WordPress website? Read on as we dive into how to implement below.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/using-the-parallax-effect-on-your-wordpress-website\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2025-05-13T17:00:34+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2020\/10\/shutterstock_1071472322-1.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_title":"Using the Parallax Effect on Your WordPress Website","twitter_description":"Need assistance with using the parallax effect on your WordPress website? Read on as we dive into how to implement below.","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2020\/10\/shutterstock_1071472322-1.jpg","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/using-the-parallax-effect-on-your-wordpress-website\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/using-the-parallax-effect-on-your-wordpress-website\/","name":"Using the Parallax Effect on Your WordPress Website","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2022-04-20T23:30:00+00:00","dateModified":"2025-05-13T17:00:34+00:00","description":"Learn how to use the parallax effect on your WordPress website. Read on as we dive into how to implement this feature.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/using-the-parallax-effect-on-your-wordpress-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/using-the-parallax-effect-on-your-wordpress-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/using-the-parallax-effect-on-your-wordpress-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"Using the Parallax Effect on Your WordPress Website"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2020\/10\/shutterstock_1071472322-2.jpg","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Developer","topic":"<strong>Topics:<\/strong> Marketing, WordPress","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/111376","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/111377"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=111376"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=111376"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=111376"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=111376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}