{"id":1272,"date":"2022-03-22T05:57:07","date_gmt":"2022-03-22T05:57:07","guid":{"rendered":"https:\/\/appliedartand.design\/lj\/?p=1272"},"modified":"2022-03-22T05:57:07","modified_gmt":"2022-03-22T05:57:07","slug":"inspirations-and-ambitions-with-css","status":"publish","type":"post","link":"https:\/\/appliedartand.design\/lj\/2022\/03\/22\/inspirations-and-ambitions-with-css\/","title":{"rendered":"Inspirations and Ambitions with CSS"},"content":{"rendered":"\n<p>While peer reviewing other student&#8217;s websites I&#8217;ve gained some new ideas and aspirations for what I want my Finals to look like. I figured I&#8217;d share some of these concepts in the minor chance that it might also inspire others. <\/p>\n\n\n\n<!--more-->\n\n\n\n<p>The first concept that was brought to me in a peer review was having an individual section with its own scrolling content, similar to a slideshow gallery. I thought that this was quite clever, especially in a microsite, as it could save a lot of vertical space and possibly allow for more creative freedom.<\/p>\n\n\n\n<p>Here are some resources that explain how to integrate slide-scrolling and slideshows into a website:<br><a rel=\"noreferrer noopener\" href=\"https:\/\/codeburst.io\/how-to-create-horizontal-scrolling-containers-d8069651e9c6\" data-type=\"URL\" data-id=\"https:\/\/codeburst.io\/how-to-create-horizontal-scrolling-containers-d8069651e9c6\" target=\"_blank\">Horizontal Scrolling Containers<\/a> &amp; <a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/howto\/howto_js_slideshow.asp\" data-type=\"URL\" data-id=\"https:\/\/www.w3schools.com\/howto\/howto_js_slideshow.asp\" target=\"_blank\">Slideshows<\/a> (this one involves JavaScript)<\/p>\n\n\n\n<p>Another idea that I found from browsing through real websites of similar topics from mine was &#8220;Parallax Scrolling&#8221;. <a rel=\"noreferrer noopener\" href=\"https:\/\/safehavenwildlife.com\" data-type=\"URL\" data-id=\"https:\/\/safehavenwildlife.com\" target=\"_blank\">This<\/a> website in particular uses it quite well in my opinion, so I wanted to also see if I could pull this concept of in my own project. While researching, I&#8217;ve noticed that there&#8217;s a few different versions of Parallax scrolling. Some involve the background moving more slowly than the foreground, while others have the background stay completely still.<\/p>\n\n\n\n<p>Here are some more beginner-friendly resources that I&#8217;ve found and plan on using:<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/alvarotrigo.com\/blog\/how-to-create-a-parallax-effect-with-css-only\/\" data-type=\"URL\" data-id=\"https:\/\/alvarotrigo.com\/blog\/how-to-create-a-parallax-effect-with-css-only\/\" target=\"_blank\">Parallax Scrolling<\/a> with CSS only &amp; <a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/howto\/howto_css_parallax.asp\" data-type=\"URL\" data-id=\"https:\/\/www.w3schools.com\/howto\/howto_css_parallax.asp\" target=\"_blank\">Another Version<\/a> of Parallax Scrolling.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>While peer reviewing other student&#8217;s websites I&#8217;ve gained some new ideas and aspirations for what I want my Finals to look like. I figured I&#8217;d share some of these concepts in the minor chance that it might also inspire others.<\/p>\n","protected":false},"author":60,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[178],"tags":[],"class_list":["post-1272","post","type-post","status-publish","format-standard","hentry","category-aad-086-sp22"],"_links":{"self":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1272","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\/60"}],"replies":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/comments?post=1272"}],"version-history":[{"count":2,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1272\/revisions"}],"predecessor-version":[{"id":1274,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1272\/revisions\/1274"}],"wp:attachment":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/media?parent=1272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/categories?post=1272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/tags?post=1272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}