This week was tough as the CSS animations could easily take up an entire semester on their own. I’d love to dive into them more and create sites specifically designed with CSS animations. <\/p>\n\n\n\n
From what I learned, it seems there are endless ways to make objects on your page move without JS. Of the properties that I learned, keyframes was the easiest to understand. I’ve worked with animations on my digital portfolio in Webflow so could see the similarities in how to accomplish the same thing in CSS. <\/p>\n\n\n\n
Parallax is one of those things that seem to be on every webpage nowadays, and with good reason\u2014it looks great! I enjoyed learning about parallax because I know I will be using it in future designs. It’s modern and adds extra flair to your site. I learned to be careful in how often it’s used, as it can take away from content if you’re not careful. <\/p>\n\n\n\n
Parallax would be perfect for a photographer or someone who wants to showcase a lot of images. The caveat is you would need to also understand how to properly optimize images so that they don’t take too long to load. Prof. Mead also mentioned that you are essentially forcing people to download images, so be cautious of how many you are using if they don’t add value to your site. <\/p>\n\n\n\n
For my final project, I’ve decided to go with Option 1, which was part of our midterm project. We created four one-page designs for desktop, tablet portrait, tablet landscape, and mobile in Figma. I’m curious how I can make what I created come to life in HTML & CSS. I want to follow the project all the way through. <\/p>\n\n\n\n
My midterm project is a spa site, and is already created in Figma. I am happy with what I came up with, but excited that I have another opportunity to create something entirely different with the second site I need to build. I’ve chosen to do a catering business because food brings me joy and I can envision the site being totally different from the original spa page, giving me some more creative license to do as I please. <\/p>\n","protected":false},"excerpt":{"rendered":"
CSS Animations This week was tough as the CSS animations could easily take up an entire semester on their own. I’d love to dive into them more and create sites specifically designed with CSS animations. From what I learned, it seems there are endless ways to make objects on your page move without JS. Of … Continue reading “Week 12: CSS Animations, Parallax, and Final Project”<\/span><\/a><\/p>\n","protected":false},"author":93,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[240],"tags":[],"class_list":["post-2076","post","type-post","status-publish","format-standard","hentry","category-aad-086-sp25"],"_links":{"self":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/2076","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\/93"}],"replies":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/comments?post=2076"}],"version-history":[{"count":1,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/2076\/revisions"}],"predecessor-version":[{"id":2077,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/2076\/revisions\/2077"}],"wp:attachment":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/media?parent=2076"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/categories?post=2076"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/tags?post=2076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}