{"id":1360,"date":"2022-04-22T02:37:21","date_gmt":"2022-04-22T02:37:21","guid":{"rendered":"https:\/\/appliedartand.design\/lj\/?p=1360"},"modified":"2022-04-22T02:46:17","modified_gmt":"2022-04-22T02:46:17","slug":"parallax-universe","status":"publish","type":"post","link":"https:\/\/appliedartand.design\/lj\/2022\/04\/22\/parallax-universe\/","title":{"rendered":"Parallax Universe"},"content":{"rendered":"\n<p>For this journal entry, I will share a resource found on Github for a simple parallax scrolling effect nearly identical to the examples shown in this week&#8217;s lecture. The difference here is that it uses Javascript and jQuery.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>In our course, we have covered how to make this work using CSS. But if you are curious and want to experiment with other methods, read on.<\/p>\n\n\n\n<p>The author of <a href=\"https:\/\/pixelcog.github.io\/parallax.js\/\" data-type=\"URL\" data-id=\"https:\/\/pixelcog.github.io\/parallax.js\/\">this post uses public domain images taken from NASA to create a slow-reveal effect as you scroll down the page<\/a>. Look familiar?<\/p>\n\n\n\n<p>The downside here would be that adding a bunch of classes to style a page this way is that you are potentially using a lot of non-semantic HTML. But to each their own.<\/p>\n\n\n\n<p>With that said, I can&#8217;t help but think back to the <a href=\"https:\/\/rachelandrew.co.uk\/archives\/2019\/01\/30\/html-css-and-our-vanishing-industry-entry-points\/\" data-type=\"URL\" data-id=\"https:\/\/rachelandrew.co.uk\/archives\/2019\/01\/30\/html-css-and-our-vanishing-industry-entry-points\/\">article by Rachel Andrew that we read earlier in the course<\/a>, and I can see how it might be another case of making things more complicated than they need to be.<\/p>\n\n\n\n<p>Let me know if you found this interesting or plan to try it out.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"542\" src=\"https:\/\/appliedartand.design\/lj\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-21-at-7.35.54-PM-1024x542.png\" alt=\"\" class=\"wp-image-1361\" srcset=\"https:\/\/appliedartand.design\/lj\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-21-at-7.35.54-PM-1024x542.png 1024w, https:\/\/appliedartand.design\/lj\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-21-at-7.35.54-PM-300x159.png 300w, https:\/\/appliedartand.design\/lj\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-21-at-7.35.54-PM-768x407.png 768w, https:\/\/appliedartand.design\/lj\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-21-at-7.35.54-PM-1200x636.png 1200w, https:\/\/appliedartand.design\/lj\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-21-at-7.35.54-PM.png 1267w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>For this journal entry, I will share a resource found on Github for a simple parallax scrolling effect nearly identical to the examples shown in this week&#8217;s lecture. The difference here is that it uses Javascript and jQuery.<\/p>\n","protected":false},"author":51,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[178],"tags":[],"class_list":["post-1360","post","type-post","status-publish","format-standard","hentry","category-aad-086-sp22"],"_links":{"self":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1360","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/users\/51"}],"replies":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/comments?post=1360"}],"version-history":[{"count":4,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1360\/revisions"}],"predecessor-version":[{"id":1366,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1360\/revisions\/1366"}],"wp:attachment":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/media?parent=1360"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/categories?post=1360"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/tags?post=1360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}