{"id":1240,"date":"2023-09-06T16:22:06","date_gmt":"2023-09-06T16:22:06","guid":{"rendered":"https:\/\/thoth.dk\/?p=1240"},"modified":"2025-12-10T21:11:26","modified_gmt":"2025-12-10T21:11:26","slug":"animeret-forside-med-parallax","status":"publish","type":"post","link":"https:\/\/thoth.dk\/index.php\/2023\/09\/06\/animeret-forside-med-parallax\/","title":{"rendered":"Animation and parallax &#8211; custom code in WordPress"},"content":{"rendered":"\n<!-- CDN: Rellax Js Lib -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/rellax\/1.12.1\/rellax.min.js\"><\/script>\n\n\n\n<div class=\"wp-block-cover alignfull is-light has-parallax wp-duotone-blue-orange\" style=\"min-height:100vh;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"><\/span><div class=\"wp-block-cover__image-background wp-image-941 has-parallax\" style=\"background-position:50% 50%;background-image:url(https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/manga-band.jpeg)\"><\/div><div class=\"wp-block-cover__inner-container has-global-padding is-layout-constrained wp-block-cover-is-layout-constrained\">\n<h1 class=\"wp-block-heading has-text-align-center has-base-color has-text-color has-x-large-font-size\">Animations, Effects and Custom Code in WordPress<\/h1>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover alignfull is-light has-contrast-color has-text-color has-link-color wp-elements-63ed9b239d16c638db7a961165c57741 wp-duotone-midnight\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"><\/span><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"512\" class=\"wp-block-cover__image-background wp-image-944\" alt=\"\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/band.jpeg\" data-object-fit=\"cover\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/band.jpeg 512w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/band-300x300.jpeg 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/band-150x150.jpeg 150w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/band-450x450.jpeg 450w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/band-100x100.jpeg 100w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><div class=\"wp-block-cover__inner-container has-global-padding is-layout-constrained wp-block-cover-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-text-align-center animated backInLeft delay-500ms has-pale-cyan-blue-color has-text-color has-large-font-size\">Animations and Parallax<\/h2>\n\n\n\n<p class=\"has-text-align-center animated fadeInBottomLeft fast has-base-color has-text-color wp-block-paragraph\"><strong>Plugin:<\/strong> Blocks Animation &#8211; CSS Animations for Gutenberg Blocks<\/p>\n<\/div><\/div>\n\n\n\n<!-- Put the cover inside a div element -->\n<div class=\"rellax\" data-rellax-speed=\"3\" style=\"width:100vw;\">\n\n\n\n<div class=\"wp-block-cover alignfull is-light has-parallax wp-duotone-blue-orange\" style=\"min-height:430px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"><\/span><div class=\"wp-block-cover__image-background wp-image-961 has-parallax\" style=\"background-position:50% 50%;background-image:url(https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-3.png)\"><\/div><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<h2 class=\"wp-block-heading alignfull has-text-align-center has-base-color has-text-color has-large-font-size\">Parallax Javascript Library<\/h2>\n\n\n\n<p class=\"has-text-align-center has-base-color has-text-color wp-block-paragraph\">Rellax.js<\/p>\n<\/div><\/div>\n\n\n\n<!-- this will end the rellax box - so the cover should be animated -->\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Rellax.js<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here you can download Rellax.js:<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/dixonandmoe.com\/rellax\/\">All about Rellax.js<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/rellax\/1.12.1\/rellax.min.js\">Rellax CDN<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Rellax need this script at the end of your page or post:<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code has-text-color has-small-font-size\" style=\"color:#308abe\"><code>&lt;!-- initiate Rellax Js --&gt;\n&lt;script&gt;\n  \/\/ Place this script at the end of the page.\n  \/\/ Start Rellax\n  var rellax = new Rellax('.rellax');\n  \/\/ Destroy and create again parallax with previous settings\n  \/\/ rellax.refresh();\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">How can I give a &lt;div&gt; or similar container elements full width?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Here you have to have a closer look at the WP code. In your browser try to inspect a div, and note it&#8217;s width. If you do this you can see, that the div has a class named <em>alignfull<\/em>. Add this class to the WP markup:<\/p>\n\n\n\n<div style=\"height:33px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code has-text-color\" style=\"color:#3b84af\"><code>&lt;!-- Put the cover inside a div element --&gt;\n&lt;div class=\"rellax <strong>alignfull<\/strong>\" data-rellax-speed=\"3\" style=\"width:100vw;\"&gt;<\/code><\/pre>\n\n\n\n<div style=\"height:180px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-cover alignfull is-light animated rotateInDownRight slow wp-duotone-midnight\" style=\"margin-top:0;padding-top:48px;padding-right:48px;padding-bottom:48px;padding-left:48px;min-height:66vh;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-30 has-background-dim\"><\/span><img decoding=\"async\" class=\"wp-block-cover__image-background wp-image-335\" alt=\"\" src=\"https:\/\/pd.w.org\/2021\/12\/12261b91fba359867.64939140.jpg\" data-object-fit=\"cover\"\/><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div class=\"wp-block-group has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-b3a9afdc wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-text-align-left has-white-color has-text-color\" style=\"font-size:clamp(50.171px, 3.136rem + ((1vw - 3.2px) * 4.885), 100px);font-style:normal;font-weight:700;letter-spacing:0px;line-height:1;text-transform:uppercase\">Don&#8217;t tell it.<\/h2>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-left has-white-color has-text-color\" style=\"font-size:clamp(50.171px, 3.136rem + ((1vw - 3.2px) * 4.885), 100px);font-style:normal;font-weight:700;letter-spacing:0px;line-height:1;text-transform:uppercase\">Show it!<\/h2>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-left is-nowrap is-layout-flex wp-container-core-buttons-is-layout-78bee44f wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-font-size is-style-outline is-style-outline--1\" style=\"font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.196), 16px);font-style:normal;font-weight:600;letter-spacing:0px;text-transform:uppercase\"><a class=\"wp-block-button__link has-white-color has-text-color wp-element-button\" style=\"padding-top:24px;padding-right:48px;padding-bottom:24px;padding-left:48px\">Bam !!<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure data-rellax-speed=\"3\" class=\"rellax wp-block-image size-full\" style=\"position:relative;left:123px;transform:rotate(23deg);\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"768\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-3.png\" alt=\"\" class=\"wp-image-961\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-3.png 768w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-3-300x300.png 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-3-150x150.png 150w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-3-450x450.png 450w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-3-600x600.png 600w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-3-100x100.png 100w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<figure data-rellax-speed=\"5\" class=\"rellax wp-block-image size-full\" style=\"position:relative;left:67px;transform:rotate(-33deg);\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"512\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-4.png\" alt=\"\" class=\"wp-image-968\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-4.png 512w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-4-300x300.png 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-4-150x150.png 150w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-4-450x450.png 450w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-4-100x100.png 100w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-cover alignfull is-light has-parallax\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"><\/span><div class=\"wp-block-cover__image-background wp-image-944 has-parallax\" style=\"background-position:50% 50%;background-image:url(https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/band.jpeg)\"><\/div><div class=\"wp-block-cover__inner-container has-global-padding is-layout-constrained wp-block-cover-is-layout-constrained\">\n<p class=\"has-text-align-center has-base-color has-text-color has-large-font-size wp-block-paragraph\">CSS animations<\/p>\n\n\n\n<p class=\"has-text-align-center has-base-color has-text-color wp-block-paragraph\">How to add custom code<br>e.g. from jsFiddle or CodePen<\/p>\n<\/div><\/div>\n\n\n\n<div><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/petj\/5hd9Lxbw\/45\/embedded\/\" allowfullscreen=\"allowfullscreen\" allowpaymentrequest frameborder=\"0\"><\/iframe>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Custom Code: CSS, HTML and JavaScript<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">And yes &#8211; in this particular order:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add a custom HTML block.<\/li>\n\n\n\n<li>Copy the CSS and place it in a &lt;style&gt; element.<\/li>\n\n\n\n<li>Next insert the HTML<\/li>\n\n\n\n<li>After the HTML-element(s) add theJavaScript.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">In the Custom HTML block the code above could look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code has-text-color has-small-font-size\" style=\"border-width:1px;color:#1e79ae;padding-top:0;padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)\"><code>&lt;style&gt;\n#square {\n  background-color: yellow;\n  width: 125px;\n  height: 125px;\n  border: 3px solid black;\n}\n@keyframes example {\n  from {left: 0px;}\n  to {left: 200px}\n}\n.animate {\n  position: relative;\n  animation-name: example;\n  animation-duration: 4s;\n}\n&lt;\/style&gt;\n&lt;!-- Her f\u00f8lger HTML --&gt;\n&lt;div id=\"square\"&gt;&lt;\/div&gt;\n&lt;h3&gt;Click the yellow square&lt;\/h3&gt;\n&lt;script&gt;\nlet runAnimation = function(){\n  square.classList.add(\"animate\");\n  setTimeout(clearClass, 4000);\n}\n\/\/ element.addEventListener(\"click\", myAddClassFunction);\nsquare.addEventListener(\"click\", runAnimation);\n\/\/\nlet clearClass = function(){\n  square.classList.remove(\"animate\");\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<style>\n#square {\n  background-color: yellow;\n  width: 125px;\n  height: 125px;\n  border: 3px solid black;\n}\n@keyframes example {\n  from {left: 0px;}\n  to {left: 200px}\n}\n.animate {\n  position: relative;\n  animation-name: example;\n  animation-duration: 4s;\n}\n<\/style>\n<!-- Her f\u00f8lger HTML -->\n<div id=\"square\"><\/div>\n<h3>Click the yellow square!<\/h3>\n<script>\nlet runAnimation = function(){\n  square.classList.add(\"animate\");\n  setTimeout(clearClass, 4000);\n}\n\/\/ element.addEventListener(\"click\", myAddClassFunction);\nsquare.addEventListener(\"click\", runAnimation);\n\/\/\nlet clearClass = function(){\n  square.classList.remove(\"animate\");\n}\n<\/script>\n\n\n\n<div class=\"wp-block-cover alignfull is-light has-parallax animated bounceIn delay-200ms fast\" style=\"min-height:75vh;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"><\/span><div class=\"wp-block-cover__image-background wp-image-628 has-parallax\" style=\"background-position:50% 50%;background-image:url(https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/superwoman-coder.jpeg)\"><\/div><div class=\"wp-block-cover__inner-container has-global-padding is-layout-constrained wp-block-cover-is-layout-constrained\">\n<h2 class=\"wp-block-heading alignfull has-text-align-center has-base-color has-text-color\">Custom Code in WP<\/h2>\n\n\n\n<p class=\"has-text-align-center has-base-color has-text-color has-large-font-size wp-block-paragraph\">Animations<br>Parallax<br>CSS<br>JavaScript<\/p>\n\n\n\n<p class=\"has-text-align-center has-base-color has-text-color has-large-font-size wp-block-paragraph\">Maps<\/p>\n\n\n\n<p class=\"has-text-align-center has-base-color has-text-color has-large-font-size wp-block-paragraph\">&#8230; and much more &#8230;<br>Q.E.D.<\/p>\n<\/div><\/div>\n\n\n\n<!-- initiate Rellax Js -->\n<script>\n  \/\/ Place this script at the end of the page.\n  \/\/ Start Rellax\n  var rellax = new Rellax('.rellax');\n  \/\/ Destroy and create again parallax with previous settings\n  rellax.refresh();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Rellax.js Here you can download Rellax.js: Rellax need this script at the end of your page or post: How can I give a &lt;div&gt; or similar container elements full width? Here you have to have a closer look at the WP code. In your browser try to inspect a div, and note it&#8217;s width. If [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":941,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[31,24,23,20],"tags":[80,197,196,83,49],"class_list":["post-1240","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-multimediedesign","category-programming","category-tutorials","category-eng","tag-animation","tag-css-libraries","tag-javascript-libraries","tag-parallax","tag-tilpasset-kode"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Animation and parallax - custom code in WordPress - Wordpress og WooCommerce<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thoth.dk\/index.php\/2023\/09\/06\/animeret-forside-med-parallax\/\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animation and parallax - custom code in WordPress - Wordpress og WooCommerce\" \/>\n<meta property=\"og:description\" content=\"Rellax.js Here you can download Rellax.js: Rellax need this script at the end of your page or post: How can I give a &lt;div&gt; or similar container elements full width? Here you have to have a closer look at the WP code. In your browser try to inspect a div, and note it&#8217;s width. If [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thoth.dk\/index.php\/2023\/09\/06\/animeret-forside-med-parallax\/\" \/>\n<meta property=\"og:site_name\" content=\"Wordpress og WooCommerce\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-06T16:22:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-10T21:11:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/manga-band.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Per Thykj\u00e6r Jensen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Skrevet af\" \/>\n\t<meta name=\"twitter:data1\" content=\"Per Thykj\u00e6r Jensen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimeret l\u00e6setid\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/09\\\/06\\\/animeret-forside-med-parallax\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/09\\\/06\\\/animeret-forside-med-parallax\\\/\"},\"author\":{\"name\":\"Per Thykj\u00e6r Jensen\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/#\\\/schema\\\/person\\\/d94ae14e2a45089632b96d9f633fac06\"},\"headline\":\"Animation and parallax &#8211; custom code in WordPress\",\"datePublished\":\"2023-09-06T16:22:06+00:00\",\"dateModified\":\"2025-12-10T21:11:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/09\\\/06\\\/animeret-forside-med-parallax\\\/\"},\"wordCount\":206,\"image\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/09\\\/06\\\/animeret-forside-med-parallax\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/manga-band.jpeg\",\"keywords\":[\"Animation\",\"CSS Libraries\",\"JavaScript Libraries\",\"Parallax\",\"Tilpasset kode\"],\"articleSection\":[\"Multimediedesign\",\"Programming\",\"Tutorials\",\"\ud83c\uddec\ud83c\udde7 English Tutorials\"],\"inLanguage\":\"da-DK\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/09\\\/06\\\/animeret-forside-med-parallax\\\/\",\"url\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/09\\\/06\\\/animeret-forside-med-parallax\\\/\",\"name\":\"Animation and parallax - custom code in WordPress - Wordpress og WooCommerce\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/09\\\/06\\\/animeret-forside-med-parallax\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/09\\\/06\\\/animeret-forside-med-parallax\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/manga-band.jpeg\",\"datePublished\":\"2023-09-06T16:22:06+00:00\",\"dateModified\":\"2025-12-10T21:11:26+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/#\\\/schema\\\/person\\\/d94ae14e2a45089632b96d9f633fac06\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/09\\\/06\\\/animeret-forside-med-parallax\\\/#breadcrumb\"},\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/09\\\/06\\\/animeret-forside-med-parallax\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/09\\\/06\\\/animeret-forside-med-parallax\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/manga-band.jpeg\",\"contentUrl\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/manga-band.jpeg\",\"width\":512,\"height\":512},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/09\\\/06\\\/animeret-forside-med-parallax\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thoth.dk\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animation and parallax &#8211; custom code in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/#website\",\"url\":\"https:\\\/\\\/thoth.dk\\\/\",\"name\":\"Wordpress og WooCommerce\",\"description\":\"Syv kreative dage med WordPress og WooCommerce\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thoth.dk\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"da-DK\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/#\\\/schema\\\/person\\\/d94ae14e2a45089632b96d9f633fac06\",\"name\":\"Per Thykj\u00e6r Jensen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0c742a8215d5628ce5ef34c45460dd1c5211c693c0613635306baeec5c28d7a9?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0c742a8215d5628ce5ef34c45460dd1c5211c693c0613635306baeec5c28d7a9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0c742a8215d5628ce5ef34c45460dd1c5211c693c0613635306baeec5c28d7a9?s=96&d=mm&r=g\",\"caption\":\"Per Thykj\u00e6r Jensen\"},\"description\":\"P\u00e5 Thoth.dk kan du finde tutorials og artikler om udvikling af websites med WordPress og online shopping med WooCommerce. Der er fokus p\u00e5 de nyeste blokbaserede temaer og metoder. Materialer og tutorials er udviklet af Per Thykj\u00e6r Jensen, lektor p\u00e5 Multimediedesigneruddannelsen ved Erhvervsakademi Aarhus.\",\"sameAs\":[\"https:\\\/\\\/thoth.dk\"],\"url\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/author\\\/per\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Animation and parallax - custom code in WordPress - Wordpress og WooCommerce","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:\/\/thoth.dk\/index.php\/2023\/09\/06\/animeret-forside-med-parallax\/","og_locale":"da_DK","og_type":"article","og_title":"Animation and parallax - custom code in WordPress - Wordpress og WooCommerce","og_description":"Rellax.js Here you can download Rellax.js: Rellax need this script at the end of your page or post: How can I give a &lt;div&gt; or similar container elements full width? Here you have to have a closer look at the WP code. In your browser try to inspect a div, and note it&#8217;s width. If [&hellip;]","og_url":"https:\/\/thoth.dk\/index.php\/2023\/09\/06\/animeret-forside-med-parallax\/","og_site_name":"Wordpress og WooCommerce","article_published_time":"2023-09-06T16:22:06+00:00","article_modified_time":"2025-12-10T21:11:26+00:00","og_image":[{"width":512,"height":512,"url":"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/manga-band.jpeg","type":"image\/jpeg"}],"author":"Per Thykj\u00e6r Jensen","twitter_card":"summary_large_image","twitter_misc":{"Skrevet af":"Per Thykj\u00e6r Jensen","Estimeret l\u00e6setid":"2 minutter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thoth.dk\/index.php\/2023\/09\/06\/animeret-forside-med-parallax\/#article","isPartOf":{"@id":"https:\/\/thoth.dk\/index.php\/2023\/09\/06\/animeret-forside-med-parallax\/"},"author":{"name":"Per Thykj\u00e6r Jensen","@id":"https:\/\/thoth.dk\/#\/schema\/person\/d94ae14e2a45089632b96d9f633fac06"},"headline":"Animation and parallax &#8211; custom code in WordPress","datePublished":"2023-09-06T16:22:06+00:00","dateModified":"2025-12-10T21:11:26+00:00","mainEntityOfPage":{"@id":"https:\/\/thoth.dk\/index.php\/2023\/09\/06\/animeret-forside-med-parallax\/"},"wordCount":206,"image":{"@id":"https:\/\/thoth.dk\/index.php\/2023\/09\/06\/animeret-forside-med-parallax\/#primaryimage"},"thumbnailUrl":"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/manga-band.jpeg","keywords":["Animation","CSS Libraries","JavaScript Libraries","Parallax","Tilpasset kode"],"articleSection":["Multimediedesign","Programming","Tutorials","\ud83c\uddec\ud83c\udde7 English Tutorials"],"inLanguage":"da-DK"},{"@type":"WebPage","@id":"https:\/\/thoth.dk\/index.php\/2023\/09\/06\/animeret-forside-med-parallax\/","url":"https:\/\/thoth.dk\/index.php\/2023\/09\/06\/animeret-forside-med-parallax\/","name":"Animation and parallax - custom code in WordPress - Wordpress og WooCommerce","isPartOf":{"@id":"https:\/\/thoth.dk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thoth.dk\/index.php\/2023\/09\/06\/animeret-forside-med-parallax\/#primaryimage"},"image":{"@id":"https:\/\/thoth.dk\/index.php\/2023\/09\/06\/animeret-forside-med-parallax\/#primaryimage"},"thumbnailUrl":"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/manga-band.jpeg","datePublished":"2023-09-06T16:22:06+00:00","dateModified":"2025-12-10T21:11:26+00:00","author":{"@id":"https:\/\/thoth.dk\/#\/schema\/person\/d94ae14e2a45089632b96d9f633fac06"},"breadcrumb":{"@id":"https:\/\/thoth.dk\/index.php\/2023\/09\/06\/animeret-forside-med-parallax\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thoth.dk\/index.php\/2023\/09\/06\/animeret-forside-med-parallax\/"]}]},{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/thoth.dk\/index.php\/2023\/09\/06\/animeret-forside-med-parallax\/#primaryimage","url":"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/manga-band.jpeg","contentUrl":"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/manga-band.jpeg","width":512,"height":512},{"@type":"BreadcrumbList","@id":"https:\/\/thoth.dk\/index.php\/2023\/09\/06\/animeret-forside-med-parallax\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thoth.dk\/"},{"@type":"ListItem","position":2,"name":"Animation and parallax &#8211; custom code in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/thoth.dk\/#website","url":"https:\/\/thoth.dk\/","name":"Wordpress og WooCommerce","description":"Syv kreative dage med WordPress og WooCommerce","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thoth.dk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"da-DK"},{"@type":"Person","@id":"https:\/\/thoth.dk\/#\/schema\/person\/d94ae14e2a45089632b96d9f633fac06","name":"Per Thykj\u00e6r Jensen","image":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/secure.gravatar.com\/avatar\/0c742a8215d5628ce5ef34c45460dd1c5211c693c0613635306baeec5c28d7a9?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/0c742a8215d5628ce5ef34c45460dd1c5211c693c0613635306baeec5c28d7a9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c742a8215d5628ce5ef34c45460dd1c5211c693c0613635306baeec5c28d7a9?s=96&d=mm&r=g","caption":"Per Thykj\u00e6r Jensen"},"description":"P\u00e5 Thoth.dk kan du finde tutorials og artikler om udvikling af websites med WordPress og online shopping med WooCommerce. Der er fokus p\u00e5 de nyeste blokbaserede temaer og metoder. Materialer og tutorials er udviklet af Per Thykj\u00e6r Jensen, lektor p\u00e5 Multimediedesigneruddannelsen ved Erhvervsakademi Aarhus.","sameAs":["https:\/\/thoth.dk"],"url":"https:\/\/thoth.dk\/index.php\/author\/per\/"}]}},"_links":{"self":[{"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/posts\/1240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/comments?post=1240"}],"version-history":[{"count":14,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/posts\/1240\/revisions"}],"predecessor-version":[{"id":3608,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/posts\/1240\/revisions\/3608"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/media\/941"}],"wp:attachment":[{"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/media?parent=1240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/categories?post=1240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/tags?post=1240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}