The web trends I chose to create for this web page are Parallax Scrolling and Motion Design.
Before I created this project, I didn't know what Parallax Scrolling was, but I've seen it on many websites in the past and always wondered how it was created.
I knew that Motion Design had to do with animation effects such as moving words, images, and other objects in the code.
I managed to create my Parallax by using a div class called parallax and added a GIF image as the background-image.
The most difficult part was combining Parallax Scrolling with the animation effects.
The background image continuely moves up and down since it is a gif image.
I added CSS Animations to my header, social media icons, and added margin sizes to my parallax background image.
I learned when creating a Parallax Scrolling page, you need the background-attachment to be fixed since the background image will not scroll with the page.
I also learned that when creating with Motion Design, to get your animation to run, you'll need to add in an animation name and @keyframes to make your animations functional.
One Browser with Page Meeting Web Coding and Design Standards
One browser I used to complete this project was Google Chrome.
I used Google Chrome for my web browser when I created a web page and it does a great job with design standards.
For code validation, I used W3C Validation since it does a great job with catching any errors I might have in my HTML.
When validating my HTML, I had no errors.
If I had any errors in my code, the W3C Validator would give me error messages and the line it's happening on to fix it.
I believe I have web standards and design standards incorporated.
All of the code is created with HTML5 and CSS3.
Reflection
In this learning plan, I learned how to incorporate Parallax Scrolling With Motion Design.
When hearing the term Parallax Scrolling, I didn't know what it meant.
Parallax Scrolling is a web site trend where the background content is moved at a different speed than a foreground content while scrolling.
For example, when the background attachment of the image is fixed in the CSS, the background will not scroll with the content, it will stay flowing.
To incorporate a Parallax Scrolling content, I had to add a div class called parallax.
Then, I added the class name to my CSS and added the background.gif image to center my background-position, no-repeat to background, setting the height to 100%, and making my background-size to cover.
In the Motion Design, I added animation effects with names so that when I add the name to the @keyframes, it will animate the selector area where the name is shown.
For example, if I were to call my animation Patrick, then all you'll have to do is add some animation property and give it a value.
After that, you'll need to add the @keyframe with the name Patrick (@keyframes Patrick { {code here} }) and add the given properties and values you want to change.
I changed my animation with transition-duration when hovering over the social media icons, moving the margin from smallest to largest in the parallax background, changing the animation-durations of the header colors, and changing the font-sizes.
I used Media Queries for mobile size for users to view on all smartphones.
I really enjoyed creating a Parallax Scrolling Site With Motion Design because I learned that even though it's difficult to create, you can make it fun in the end.