{"id":9089,"date":"2024-01-19T17:58:00","date_gmt":"2024-01-19T17:58:00","guid":{"rendered":"https:\/\/codehim.com\/?p=9089"},"modified":"2024-01-22T15:59:06","modified_gmt":"2024-01-22T10:59:06","slug":"header-image-parallax-scrolling-effect-with-css","status":"publish","type":"post","link":"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/","title":{"rendered":"Header Image Parallax Scrolling Effect with CSS"},"content":{"rendered":"<p>This code creates a Header Image Parallax Scrolling Effect with CSS. It allows an image to move at a different speed while scrolling, creating an eye-catching visual effect. The code positions and manipulates the images based on scroll position for a simple, responsive design. It&#8217;s helpful for creating engaging headers with parallax effects using HTML and CSS.<\/p>\n<p>You can use this code on your website&#8217;s header to add a captivating <a href=\"https:\/\/codehim.com\/vanilla-javascript\/simple-parallax-effect-in-vanilla-javascript\/\" target=\"_blank\" rel=\"noopener\">parallax scrolling effect<\/a>. It&#8217;s easy to implement, requiring only HTML and CSS, and it offers a responsive design. Furthermore, it ensures working well on various screen sizes.<\/p>\n<h2>How to Create Header Image Parallax Scrolling Effect with CSS<\/h2>\n<p>1. First, create an HTML file and set up the basic structure for your website. Inside the <code>&lt;header&gt;<\/code> element, you&#8217;ll need to add two sets of image elements: one for the background and one for the foreground. These images will create the parallax effect. Here&#8217;s how to structure each image element:<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;header class=\"hero center-bottom\"&gt;\r\n\r\n  &lt;div class=\"hero-image hero-image-background\"&gt;\r\n    &lt;picture&gt;\r\n      &lt;source srcset=\"https:\/\/source.unsplash.com\/1280x720?natural\"&gt;\r\n      &lt;img src=\"https:\/\/source.unsplash.com\/1280x720?natural\" alt=\"background\" width=\"1920\" height=\"1280\"&gt;\r\n    &lt;\/picture&gt;\r\n  &lt;\/div&gt;\r\n\r\n  &lt;div class=\"hero-image hero-image-foreground\"&gt;\r\n    &lt;picture&gt;\r\n      &lt;source srcset=\"https:\/\/source.unsplash.com\/1280x720?natural\"&gt;\r\n      &lt;img src=\"https:\/\/source.unsplash.com\/1280x720?natural\" alt=\"foreground\" width=\"1920\" height=\"1280\"&gt;\r\n    &lt;\/picture&gt;\r\n  &lt;\/div&gt;\r\n\r\n  &lt;div class=\"hero-darken\"&gt;&lt;\/div&gt;\r\n\r\n&lt;\/header&gt;\r\n\r\n\r\n&lt;!-- only for demonstration --&gt;\r\n\r\n&lt;main&gt;\r\n\r\n&lt;!-- Your content goes here --&gt;\r\n&lt;\/main&gt;\r\n\r\n&lt;nav&gt;\r\n  &lt;ul&gt;\r\n    &lt;li&gt;&lt;a href=\"#what\"&gt;What&lt;\/a&gt;&lt;\/li&gt;\r\n    &lt;li&gt;&lt;a href=\"#why\"&gt;Why&lt;\/a&gt;&lt;\/li&gt;\r\n    &lt;li&gt;&lt;a href=\"#align\"&gt;Align&lt;\/a&gt;&lt;\/li&gt;\r\n    &lt;li&gt;&lt;a href=\"#extend\"&gt;Extend&lt;\/a&gt;&lt;\/li&gt;\r\n  &lt;\/ul&gt;\r\n&lt;\/nav&gt;\r\n<\/pre>\n<p>2. Copy and paste the provided CSS code into your stylesheet. This CSS code defines the parallax scrolling effect, positioning, and responsiveness of the images. It&#8217;s important to keep the CSS classes and IDs consistent with your HTML structure.<\/p>\n<pre class=\"prettyprint linenums lang-css\">\/* fonts *\/\r\n\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Sofia+Sans+Condensed:wght@400;700&amp;family=Sofia+Sans:ital@0;1&amp;display=swap');\r\n\r\n\/* resets *\/\r\n\r\n*,\r\n*:before,\r\n*:after {\r\n  margin: 0;\r\n  padding: 0;\r\n\tbox-sizing: border-box;\r\n}\r\n\r\n\r\n\/* styles \u2013 required *\/\r\n\r\nhtml,\r\nbody {\r\n\theight: 100%;\r\n  scroll-behavior: smooth;\r\n}\r\n\r\n.hero {\r\n  position: relative;\r\n  height: 100vh !important;\r\n\toverflow: hidden;\r\n   width: 100%;\r\n}\r\n\r\n.hero .hero-image {\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n}\r\n\r\n.hero .hero-image img {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n}\r\n\r\n.hero.left-top .hero-image img {\r\n  object-position: left top;\r\n}\r\n\r\n.hero.center-top .hero-image img {\r\n  object-position: center top;\r\n}\r\n\r\n.hero.right-top .hero-image img {\r\n  object-position: right top;\r\n}\r\n\r\n.hero.left-bottom .hero-image img {\r\n  object-position: left bottom;\r\n}\r\n\r\n.hero.center-bottom .hero-image img {\r\n  object-position: center bottom;\r\n}\r\n\r\n.hero.right-bottom .hero-image img {\r\n  object-position: right bottom;\r\n}\r\n\r\n.hero .hero-darken {\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  background-color: rgba(0,0,0,.1);\r\n}\r\n\r\n\r\n\/* styles \u2013 only for demonstration *\/\r\n\r\nhtml {\r\n  font-family: 'Sofia Sans', sans-serif;\r\n  font-size: calc(1rem + 0.2 * ((100vw - 20rem) \/ 50));\r\n  line-height: 1.4rem;\r\n}\r\n\r\nh1,\r\nh2 {\r\n  font-family: 'Sofia Sans Condensed', sans-serif;\r\n  font-weight: 700;\r\n  line-height: 2.4rem;\r\n  margin-bottom: 1.4rem;\r\n}\r\n\r\np {\r\n  margin-bottom: 1.4rem;\r\n}\r\n\r\na {\r\n  color: black;\r\n}\r\n\r\na.anchor {\r\n  display: block;\r\n  position: relative;\r\n  top: -100px;\r\n  visibility: hidden;\r\n}\r\n\r\nem {\r\n  opacity: .5;\r\n}\r\n\r\nmain {\r\n  width: 90%;\r\n  max-width: 720px;\r\n  margin: 3em auto 6em auto;\r\n}\r\n\r\nnav {\r\n  position: absolute;\r\n  z-index: 2;\r\n  top: 30px;\r\n  left: 50%;\r\n  transform: translate(-50%, 0);\r\n  width: 80%;\r\n  max-width: 540px;\r\n  background-color: black;\r\n  border-radius: 12px;\r\n  text-align: center;\r\n}\r\n\r\nnav ul {\r\n  list-style: none;\r\n}\r\n\r\nnav ul li {\r\n  display: inline;\r\n}\r\n\r\nnav ul li a {\r\n  display: inline-block;\r\n  font-family: 'Sofia Sans Condensed', sans-serif;\r\n  font-weight: 400;\r\n  letter-spacing: .1em;\r\n  padding: .5em;\r\n  color: white;\r\n  text-decoration: none;\r\n  text-transform: uppercase;\r\n}\r\n\r\n@media screen and (min-width: 30em) {\r\n\r\n  nav ul li a {\r\n    padding: .5em 1em;\r\n    letter-spacing: .15em;\r\n    opacity: .75;\r\n  }\r\n\r\n  nav ul li a:hover {\r\n    opacity: 1;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* scroll animation *\/\r\n\r\n.hero .hero-darken:before,\r\n.hero .hero-darken:after {\r\n  content: '';\r\n  position: absolute;\r\n  right: 0;\r\n  left: 0;\r\n  margin-left: auto;\r\n  margin-right: auto;\r\n  text-align: center;\r\n}\r\n\r\n.hero .hero-darken:before {\r\n  top: 104px;\r\n  width: 30px;\r\n  height: 50px;\r\n  border: 2px solid black;\r\n  border-radius: 12px;\r\n}\r\n\r\n.hero .hero-darken:after {\r\n  top: 112px;\r\n  width: 2px;\r\n  height: 12px;\r\n  background-color: black;\r\n  border-radius: 1px;\r\n  animation: scroll 2s infinite linear;\r\n}\r\n\r\n@keyframes scroll {\r\n\r\n  from {\r\n    top: 112px;\r\n  }\r\n\r\n  to {\r\n    top: 122px;\r\n  }\r\n\r\n}<\/pre>\n<p>You can customize the parallax effect further by adjusting the CSS properties, such as object position and image size, to achieve your desired look. Experiment with different images to find what works best for your website.<\/p>\n<p>3. Finally, include the following JavaScript code to make the parallax effect work. Place it just before the closing <code>&lt;\/body&gt;<\/code> tag:<\/p>\n<pre class=\"prettyprint linenums lang-js\">document.addEventListener('DOMContentLoaded', function() {\r\n  var backgroundElements = document.querySelectorAll('.hero-image-background');\r\n  var foregroundElements = document.querySelectorAll('.hero-image-foreground');\r\n\r\n  window.addEventListener('scroll', function() {\r\n    var scrollPosWin = window.scrollY;\r\n    var factorBackground = scrollPosWin * 0.4;\r\n    var factorForeground = scrollPosWin * 0.2;\r\n\r\n    backgroundElements.forEach(function(element) {\r\n      element.style.top = factorBackground + 'px';\r\n      element.style.bottom = -factorBackground + 'px';\r\n    });\r\n\r\n    foregroundElements.forEach(function(element) {\r\n      element.style.top = factorForeground + 'px';\r\n      element.style.bottom = -factorForeground + 'px';\r\n    });\r\n  });\r\n});\r\n<\/pre>\n<p>That&#8217;s all! hopefully, you have successfully created the header image parallax scrolling effect. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This code creates a Header Image Parallax Scrolling Effect with CSS. It allows an image to move at a different&#8230;<\/p>\n","protected":false},"author":1,"featured_media":9097,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[63],"tags":[107,78],"class_list":["post-9089","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css3","tag-parallax","tag-scrolling"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Header Image Parallax Scrolling Effect with CSS &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Header Image Parallax Scrolling Effect with CSS. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Header Image Parallax Scrolling Effect with CSS &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Header Image Parallax Scrolling Effect with CSS. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-19T17:58:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T10:59:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Header-Image-Parallax-Scrolling-Effect-with-CSS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Header Image Parallax Scrolling Effect with CSS\",\"datePublished\":\"2024-01-19T17:58:00+00:00\",\"dateModified\":\"2024-01-22T10:59:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/\"},\"wordCount\":288,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Header-Image-Parallax-Scrolling-Effect-with-CSS.png\",\"keywords\":[\"Parallax\",\"Scrolling Effects\"],\"articleSection\":[\"HTML5 &amp; CSS3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/\",\"url\":\"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/\",\"name\":\"Header Image Parallax Scrolling Effect with CSS &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Header-Image-Parallax-Scrolling-Effect-with-CSS.png\",\"datePublished\":\"2024-01-19T17:58:00+00:00\",\"dateModified\":\"2024-01-22T10:59:06+00:00\",\"description\":\"Here is a free code snippet to create a Header Image Parallax Scrolling Effect with CSS. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Header-Image-Parallax-Scrolling-Effect-with-CSS.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Header-Image-Parallax-Scrolling-Effect-with-CSS.png\",\"width\":1280,\"height\":960,\"caption\":\"Header Image Parallax Scrolling Effect with CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 &amp; CSS3\",\"item\":\"https:\/\/codehim.com\/category\/html5-css3\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Header Image Parallax Scrolling Effect with CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Header Image Parallax Scrolling Effect with CSS &#8212; CodeHim","description":"Here is a free code snippet to create a Header Image Parallax Scrolling Effect with CSS. You can view demo and download the source code.","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:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/","og_locale":"en_US","og_type":"article","og_title":"Header Image Parallax Scrolling Effect with CSS &#8212; CodeHim","og_description":"Here is a free code snippet to create a Header Image Parallax Scrolling Effect with CSS. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-19T17:58:00+00:00","article_modified_time":"2024-01-22T10:59:06+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Header-Image-Parallax-Scrolling-Effect-with-CSS.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Header Image Parallax Scrolling Effect with CSS","datePublished":"2024-01-19T17:58:00+00:00","dateModified":"2024-01-22T10:59:06+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/"},"wordCount":288,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Header-Image-Parallax-Scrolling-Effect-with-CSS.png","keywords":["Parallax","Scrolling Effects"],"articleSection":["HTML5 &amp; CSS3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/","url":"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/","name":"Header Image Parallax Scrolling Effect with CSS &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Header-Image-Parallax-Scrolling-Effect-with-CSS.png","datePublished":"2024-01-19T17:58:00+00:00","dateModified":"2024-01-22T10:59:06+00:00","description":"Here is a free code snippet to create a Header Image Parallax Scrolling Effect with CSS. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Header-Image-Parallax-Scrolling-Effect-with-CSS.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Header-Image-Parallax-Scrolling-Effect-with-CSS.png","width":1280,"height":960,"caption":"Header Image Parallax Scrolling Effect with CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/html5-css3\/header-image-parallax-scrolling-effect-with-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"HTML5 &amp; CSS3","item":"https:\/\/codehim.com\/category\/html5-css3\/"},{"@type":"ListItem","position":3,"name":"Header Image Parallax Scrolling Effect with CSS"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":1913,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9089","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=9089"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9089\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/9097"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=9089"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=9089"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=9089"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}