{"id":6036,"date":"2021-03-25T01:00:00","date_gmt":"2021-03-25T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/how-to-create-a-parallax-effect-with-css-only\/"},"modified":"2025-05-27T10:50:30","modified_gmt":"2025-05-27T08:50:30","slug":"how-to-create-a-parallax-effect-with-css-only","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/how-to-create-a-parallax-effect-with-css-only\/","title":{"rendered":"How to create a parallax effect with CSS only"},"content":{"rendered":"<h2 class=\"wp-block-heading\" id=\"how-to-create-a-parallax-effect-with-css-only\">How to create a parallax effect with CSS only<\/h2>\n\n\n<p>The parallax effect is one of the niftiest little tricks that you can use on your landing page to attract the attention of your visitors. CSS has matured a lot over the past few years, and this means that there\u2019s a lot of flexibility as to how something should be done. Hacky tricks like <code>background-position<\/code> are quite difficult to maintain however. This article will demonstrate how you can use modern CSS to create a easy to maintain beautiful parallax effect.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"the-theory-behind-the-parallax-effect\">The theory behind the parallax effect<\/h2>\n\n\n<p>Understanding the conditions required to create a parallax effect helps to implement it correctly. However, if you want to skip and get to writing some code instead, head on over to the <a href=\"#\">next topic<\/a>. The parallax effect is to make two (for the sake of explaining) layers on top of each other moving at a constant speed appear like the layer on top is moving relatively faster than the one beneath it.<\/p>\n\n\n\n<p>You might have seen applications of the parallax effect as early as 2D games where the background appears to shift slower in comparison to the foreground. You might have observed the parallax effect while you\u2019re in the car where objects further away seem to move slower than other cars in the road.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/cdn.jsdelivr.net\/gh\/alvarotrigo\/blog-assets\/videos\/parallax-pure-css.gif\" alt=\"firewatch website scrolling down\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<p>So putting it simply, the conditions that have to be satisfied for a parallax effect to be created are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Alter the way the parallax layer is perceived in such a way that it looks like it&#8217;s moving relatively faster or slower, without deviating from its original size.<\/li>\n\n\n\n<li>Do not alter the position or speed.<\/li>\n<\/ul>\n\n\n\n<p>To achieve both these conditions, we have to increase the perceivable distance between the user and the layer, then shift it along the negative Z-axis. Because perceivable distance is increased, the layer may appear smaller. To counter this decrease in size we can scale it back to its original size. This means we will be making use of mainly two CSS properties: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/perspective\" target=\"_blank\" rel=\"noopener nofollow\">perspective<\/a> and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/transform\" target=\"_blank\" rel=\"noopener nofollow\">transform<\/a>. We will be making use of <code>translateZ()<\/code> and <code>scale()<\/code> transformations.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"putting-together-some-markup\">Putting together some markup<\/h2>\n\n\n<p>First off, we need some HTML. Create a file named <code>index.html<\/code> and copy\/paste the following code:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1.0\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Pure CSS Parallax Effect<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"no-parallax\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Fun fact:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"parallax bg\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n          The sound that occurs when you snap your fingers is made by your\n          middle finger hitting your palm!\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"no-parallax\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Have a nice day!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This will create 3 sections of which only the 2nd will have the parallax effect. It is easier to notice the difference when there are 2 static\/non-parallax sections to compare against. Now, create a <code>styles.css<\/code> file and then link it to the HTML file by putting the following code in the <code>&lt;head&gt;<\/code> tag:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"styles.css\"<\/span> \/&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<h2 class=\"wp-block-heading\" id=\"implementing-parallax-using-css\">Implementing parallax using CSS<\/h2>\n\n\n<p>The markup doesn&#8217;t look all that appealing right now, so before implementing the parallax effect, paste the following code in your previously created <code>styles.css<\/code> file:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">body<\/span> {\n  <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n}\n\n<span class=\"hljs-selector-tag\">main<\/span> {\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100vh<\/span>;\n  <span class=\"hljs-attribute\">overflow-x<\/span>: hidden;\n  <span class=\"hljs-attribute\">overflow-y<\/span>: auto;\n}\n\n<span class=\"hljs-selector-tag\">section<\/span> {\n  <span class=\"hljs-attribute\">position<\/span>: relative;\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100vh<\/span>;\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n  <span class=\"hljs-attribute\">align-items<\/span>: center;\n  <span class=\"hljs-attribute\">justify-content<\/span>: center;\n  <span class=\"hljs-attribute\">color<\/span>: white;\n}\n\n<span class=\"hljs-selector-class\">.no-parallax<\/span> {\n  <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#111<\/span>;\n  <span class=\"hljs-attribute\">z-index<\/span>: <span class=\"hljs-number\">999<\/span>;\n}\n\n<span class=\"hljs-selector-tag\">section<\/span> <span class=\"hljs-selector-tag\">h1<\/span> {\n  <span class=\"hljs-attribute\">text-align<\/span>: center;\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">4rem<\/span>;\n  <span class=\"hljs-attribute\">font-family<\/span>: sans-serif;\n}\n\n<span class=\"hljs-selector-class\">.parallax<\/span> <span class=\"hljs-selector-tag\">h1<\/span> {\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">60%<\/span>;\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">2rem<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The <code>&lt;main&gt;<\/code> and <code>section<\/code> elements will both take at least the same height of the viewport. The section element makes use of <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Flexible_Box_Layout\/Basic_Concepts_of_Flexbox\" target=\"_blank\" rel=\"noopener nofollow\">CSS3 Flexbox<\/a> in order to center the elements inside it vertically and horizontally.<\/p>\n\n\n\n<p>The next step is to increase the perceivable distance between the user and the <code>main<\/code> element, for which we will use the <code>perspective<\/code> property. The smaller the value the more subtle and natural the parallax effect will seem.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">main<\/span> {\n  <span class=\"hljs-comment\">\/*...Collapsed...*\/<\/span>\n  <span class=\"hljs-attribute\">overflow-y<\/span>: auto;\n  <span class=\"hljs-attribute\">perspective<\/span>: <span class=\"hljs-number\">2px<\/span>; <span class=\"hljs-comment\">\/* &lt;-- This line *\/<\/span>\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Now, we have to transform the parallax layer along the negative Z-axis, and then increase its scale to counter for the decrease in size because we previously altered the perspective. This is because when perspective is applied to a parent, the children of that parent will be affected.<\/p>\n\n\n\n<p>If the child has a Z value greater than 0, it will appear larger, and if it is smaller than 0, it will appear smaller. The Z property moves the element on the 3d space by bringing it closer to us (looking larger) or away from us (looking smaller).<\/p>\n\n\n\n<p>First of all, we&#8217;ll need to apply the <code>transform-style: preserve-3d;<\/code> to the parent of the element in which we want to apply the Z transformation. This will make sure its children elements are positioned on the 3d space instead of on the 2d flattened plane:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.section<\/span>{\n  <span class=\"hljs-comment\">\/* Added *\/<\/span> \n  <span class=\"hljs-attribute\">transform-style<\/span>: preserve-<span class=\"hljs-number\">3<\/span>d;\n\n  <span class=\"hljs-attribute\">position<\/span>: relative;\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100vh<\/span>;\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n  <span class=\"hljs-attribute\">align-items<\/span>: center;\n  <span class=\"hljs-attribute\">justify-content<\/span>: center;\n  <span class=\"hljs-attribute\">color<\/span>: white;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Now, we will place the image that will have the parallax effect. We can use a <code>div<\/code> or an <code>img<\/code> or any other element, but for the matter of this tutorial we&#8217;ll just use the pseudo-selector <code>::after<\/code> element, just because we can \ud83d\ude42<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.parallax<\/span><span class=\"hljs-selector-pseudo\">::after<\/span> {\n  <span class=\"hljs-attribute\">content<\/span>: <span class=\"hljs-string\">' '<\/span>;\n  <span class=\"hljs-attribute\">position<\/span>: absolute;\n  <span class=\"hljs-attribute\">top<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">right<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">bottom<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">left<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateZ<\/span>(-<span class=\"hljs-number\">1px<\/span>) <span class=\"hljs-built_in\">scale<\/span>(<span class=\"hljs-number\">1.5<\/span>);\n  <span class=\"hljs-attribute\">background-size<\/span>: <span class=\"hljs-number\">100%<\/span>;\n  <span class=\"hljs-attribute\">z-index<\/span>: -<span class=\"hljs-number\">1<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Below we add the <code>background-image<\/code> to it, which is a random image picked from <code>picsum.photos<\/code>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.bg<\/span><span class=\"hljs-selector-pseudo\">::after<\/span> {\n  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">url<\/span>(<span class=\"hljs-string\">'https:\/\/picsum.photos\/1080\/720'<\/span>);\n  <span class=\"hljs-attribute\">background-size<\/span>: cover;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>To make it even better, we&#8217;ll be adding a dark layer on top of the image so the white text can be more readable. To do so, we add the <code>linear-gradient<\/code> to our <code>background-image<\/code> property:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.bg<\/span><span class=\"hljs-selector-pseudo\">::after<\/span> {\n  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">linear-gradient<\/span>(rgba(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0.5<\/span>), <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0.5<\/span>)),\n    <span class=\"hljs-built_in\">url<\/span>(<span class=\"hljs-string\">'https:\/\/picsum.photos\/1080\/720'<\/span>);\n  <span class=\"hljs-attribute\">background-size<\/span>: cover;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>With that done, we should be able to notice the parallax effect when scrolling up and down. It will appear as if the font is fixed and the background image is moving beneath it slowly. If it doesn&#8217;t look like it&#8217;s working, take a look at the following Codepen and cross-reference your code with the code in it:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_OJxOrOg\" data-src=\"\/\/codepen.io\/anon\/embed\/OJxOrOg?height=450&amp;theme-id=1&amp;slug-hash=OJxOrOg&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OJxOrOg\" title=\"CodePen Embed OJxOrOg\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The effect that we\u2019ve implemented is fairly simple and appealing but if you need more control over how the effect should look like then you should try out the <a href=\"https:\/\/alvarotrigo.com\/fullPage\/extensions\/parallax.html\">fullPage.js parallax extension<\/a>!<\/p>\n\n\n\n<p>\n    <a href=\"https:\/\/alvarotrigo.com\/fullPage\/extensions\/parallax.html\">\n        <video width=\"680\" height=\"382\" muted autoplay loop playsinline>\n        <source src= \"https:\/\/cdn.jsdelivr.net\/gh\/alvarotrigo\/blog-assets\/videos\/parallax-fullpage.webm\" type=\"video\/webm\"\/>\n        <source src= \"https:\/\/cdn.jsdelivr.net\/gh\/alvarotrigo\/blog-assets\/videos\/parallax-fullpage.mp4\" type=\"video\/mp4\" \/>\n        Your browser does not support the video tag.\n        <\/source><\/source><\/video>\n    <\/a>\n<\/p>\n\n\n\n<p>Whether you plan on creating a single-page site with snap scroll or you just want a fancy parallax effect that works both vertically and horizontally, the extension\u2019s got your back. It also comes with built-in support for CMS\u2019 like WordPress via editors like <a href=\"https:\/\/alvarotrigo.com\/fullPage\/wordpress-plugin-elementor\/\">Elementor<\/a> and <a href=\"https:\/\/alvarotrigo.com\/fullPage\/wordpress-plugin-gutenberg\/\/\">Gutenberg<\/a>.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n<p>Effects like the parallax effect are a relatively simple method to boost the appeal and grab the user&#8217;s attention. It is however important to remember that to make things look good, you should never sacrifice user experience, or in other words, you should use effects sparingly where you can maximize its potential.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The parallax effect is one of the niftiest little tricks that you can use on your landing page to attract the attention of your visitors.<\/p>\n","protected":false},"author":1,"featured_media":6035,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[106],"tags":[10,18,29],"class_list":["post-6036","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-javascript","tag-jquery","tag-performance"],"acf":[],"_links":{"self":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/6036","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/comments?post=6036"}],"version-history":[{"count":6,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/6036\/revisions"}],"predecessor-version":[{"id":18285,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/6036\/revisions\/18285"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media\/6035"}],"wp:attachment":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media?parent=6036"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/categories?post=6036"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/tags?post=6036"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}