{"id":759,"date":"2023-03-06T10:05:20","date_gmt":"2023-03-06T10:05:20","guid":{"rendered":"https:\/\/thoth.dk\/?p=759"},"modified":"2025-12-10T21:12:13","modified_gmt":"2025-12-10T21:12:13","slug":"rellax-demo","status":"publish","type":"post","link":"https:\/\/thoth.dk\/index.php\/2023\/03\/06\/rellax-demo\/","title":{"rendered":"Parallax Effects by Rellax Js"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Demonstration of the Rellax Js Library.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Add Parallax Effects to any WordsPress Page or Post\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/pE5bDxuGWCE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\">Per&#8217;s Rellax Tutorial (ca. 7 minutes)<\/figcaption><\/figure>\n\n\n\n<figure class=\"rellax wp-block-image size-full\" data-rellax-speed=\"-4\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"512\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/witch.jpeg\" alt=\"\" class=\"wp-image-707\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/witch.jpeg 512w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/witch-300x300.jpeg 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/witch-150x150.jpeg 150w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<figure class=\"rellax wp-block-image size-full\" data-rellax-speed=\"7\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"512\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/wizard-pc-04.jpeg\" alt=\"\" class=\"wp-image-710\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/wizard-pc-04.jpeg 512w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/wizard-pc-04-300x300.jpeg 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/wizard-pc-04-150x150.jpeg 150w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/gh\/dixonandmoe\/rellax@master\/rellax.min.js\"><\/script>\n<script>\n  \/\/ Accepts any class name\n  var rellax = new Rellax('.rellax');\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Stray &lt;p&gt; tags<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you have whitespace in the code WP will add &lt;p&gt; tags, and such tags may ruin you JavaScript &#8211; or at least throw errors in the console. This will happen as soon as you save the page or post. This is most annoying.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That&#8217;s why there is no space between the tags in the code above. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In your editor you can install a plugin that will remove whitespace in the code. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can animate any HTML element, be it &lt;p&gt;, &lt;img&gt;, &lt;article&gt;, &lt;figure&gt; etc.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Demonstration of the Rellax Js Library. Stray &lt;p&gt; tags If you have whitespace in the code WP will add &lt;p&gt; tags, and such tags may ruin you JavaScript &#8211; or at least throw errors in the console. This will happen as soon as you save the page or post. This is most annoying. That&#8217;s why [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":18,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[20],"tags":[80,83,49],"class_list":["post-759","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-eng","tag-animation","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>Parallax Effects by Rellax Js - 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\/03\/06\/rellax-demo\/\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Parallax Effects by Rellax Js - Wordpress og WooCommerce\" \/>\n<meta property=\"og:description\" content=\"Demonstration of the Rellax Js Library. Stray &lt;p&gt; tags If you have whitespace in the code WP will add &lt;p&gt; tags, and such tags may ruin you JavaScript &#8211; or at least throw errors in the console. This will happen as soon as you save the page or post. This is most annoying. That&#8217;s why [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thoth.dk\/index.php\/2023\/03\/06\/rellax-demo\/\" \/>\n<meta property=\"og:site_name\" content=\"Wordpress og WooCommerce\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-06T10:05:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-10T21:12:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/01\/mozart.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=\"1 minut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/03\\\/06\\\/rellax-demo\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/03\\\/06\\\/rellax-demo\\\/\"},\"author\":{\"name\":\"Per Thykj\u00e6r Jensen\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/#\\\/schema\\\/person\\\/d94ae14e2a45089632b96d9f633fac06\"},\"headline\":\"Parallax Effects by Rellax Js\",\"datePublished\":\"2023-03-06T10:05:20+00:00\",\"dateModified\":\"2025-12-10T21:12:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/03\\\/06\\\/rellax-demo\\\/\"},\"wordCount\":123,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/03\\\/06\\\/rellax-demo\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/mozart.jpeg\",\"keywords\":[\"Animation\",\"Parallax\",\"Tilpasset kode\"],\"articleSection\":[\"\ud83c\uddec\ud83c\udde7 English Tutorials\"],\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/03\\\/06\\\/rellax-demo\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/03\\\/06\\\/rellax-demo\\\/\",\"url\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/03\\\/06\\\/rellax-demo\\\/\",\"name\":\"Parallax Effects by Rellax Js - Wordpress og WooCommerce\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/03\\\/06\\\/rellax-demo\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/03\\\/06\\\/rellax-demo\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/mozart.jpeg\",\"datePublished\":\"2023-03-06T10:05:20+00:00\",\"dateModified\":\"2025-12-10T21:12:13+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/#\\\/schema\\\/person\\\/d94ae14e2a45089632b96d9f633fac06\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/03\\\/06\\\/rellax-demo\\\/#breadcrumb\"},\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/03\\\/06\\\/rellax-demo\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/03\\\/06\\\/rellax-demo\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/mozart.jpeg\",\"contentUrl\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/mozart.jpeg\",\"width\":512,\"height\":512},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2023\\\/03\\\/06\\\/rellax-demo\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thoth.dk\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Parallax Effects by Rellax Js\"}]},{\"@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":"Parallax Effects by Rellax Js - 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\/03\/06\/rellax-demo\/","og_locale":"da_DK","og_type":"article","og_title":"Parallax Effects by Rellax Js - Wordpress og WooCommerce","og_description":"Demonstration of the Rellax Js Library. Stray &lt;p&gt; tags If you have whitespace in the code WP will add &lt;p&gt; tags, and such tags may ruin you JavaScript &#8211; or at least throw errors in the console. This will happen as soon as you save the page or post. This is most annoying. That&#8217;s why [&hellip;]","og_url":"https:\/\/thoth.dk\/index.php\/2023\/03\/06\/rellax-demo\/","og_site_name":"Wordpress og WooCommerce","article_published_time":"2023-03-06T10:05:20+00:00","article_modified_time":"2025-12-10T21:12:13+00:00","og_image":[{"width":512,"height":512,"url":"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/01\/mozart.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":"1 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thoth.dk\/index.php\/2023\/03\/06\/rellax-demo\/#article","isPartOf":{"@id":"https:\/\/thoth.dk\/index.php\/2023\/03\/06\/rellax-demo\/"},"author":{"name":"Per Thykj\u00e6r Jensen","@id":"https:\/\/thoth.dk\/#\/schema\/person\/d94ae14e2a45089632b96d9f633fac06"},"headline":"Parallax Effects by Rellax Js","datePublished":"2023-03-06T10:05:20+00:00","dateModified":"2025-12-10T21:12:13+00:00","mainEntityOfPage":{"@id":"https:\/\/thoth.dk\/index.php\/2023\/03\/06\/rellax-demo\/"},"wordCount":123,"commentCount":0,"image":{"@id":"https:\/\/thoth.dk\/index.php\/2023\/03\/06\/rellax-demo\/#primaryimage"},"thumbnailUrl":"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/01\/mozart.jpeg","keywords":["Animation","Parallax","Tilpasset kode"],"articleSection":["\ud83c\uddec\ud83c\udde7 English Tutorials"],"inLanguage":"da-DK","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/thoth.dk\/index.php\/2023\/03\/06\/rellax-demo\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/thoth.dk\/index.php\/2023\/03\/06\/rellax-demo\/","url":"https:\/\/thoth.dk\/index.php\/2023\/03\/06\/rellax-demo\/","name":"Parallax Effects by Rellax Js - Wordpress og WooCommerce","isPartOf":{"@id":"https:\/\/thoth.dk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thoth.dk\/index.php\/2023\/03\/06\/rellax-demo\/#primaryimage"},"image":{"@id":"https:\/\/thoth.dk\/index.php\/2023\/03\/06\/rellax-demo\/#primaryimage"},"thumbnailUrl":"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/01\/mozart.jpeg","datePublished":"2023-03-06T10:05:20+00:00","dateModified":"2025-12-10T21:12:13+00:00","author":{"@id":"https:\/\/thoth.dk\/#\/schema\/person\/d94ae14e2a45089632b96d9f633fac06"},"breadcrumb":{"@id":"https:\/\/thoth.dk\/index.php\/2023\/03\/06\/rellax-demo\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thoth.dk\/index.php\/2023\/03\/06\/rellax-demo\/"]}]},{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/thoth.dk\/index.php\/2023\/03\/06\/rellax-demo\/#primaryimage","url":"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/01\/mozart.jpeg","contentUrl":"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/01\/mozart.jpeg","width":512,"height":512},{"@type":"BreadcrumbList","@id":"https:\/\/thoth.dk\/index.php\/2023\/03\/06\/rellax-demo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thoth.dk\/"},{"@type":"ListItem","position":2,"name":"Parallax Effects by Rellax Js"}]},{"@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\/759","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=759"}],"version-history":[{"count":18,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/posts\/759\/revisions"}],"predecessor-version":[{"id":3038,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/posts\/759\/revisions\/3038"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/media\/18"}],"wp:attachment":[{"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/media?parent=759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/categories?post=759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/tags?post=759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}