Description: In this assignment, you will use get extensive experience with CSS. This assignment will introduce you to two new jQuery libraries: cycle and easing. You will use both of these libraries on this assignment. Additionally, you will embed videos within this assignment and use alpha layers to control transparency of elements to give the page a sense of depth and overlay. Finally, you will adjust CSS for given screen sizes so that when a user adjusts the width of the browser, the CSS will automatically adjust.
a newer jQuery file may work, but there's always a chance that something may break
Including files
Include the JS files in this order:
jQuery first
Cycle second
Easing third
Cycle
There are many different options for how we can cycle through items. You can cycle through images, or text, or other objects. It is not limited to images. You can find all of the options for cycle here: http://jquery.malsup.com/cycle/
We will use two of the cycle options: scrollLeft and fade
Both cycles you create will have a delay. One will use easing, one will not.
Easing
Easing is a method of transitioning. Think of a ball bouncing... the ball starts fast, but slows down as it loses momentum. This would be called easing out. You can find all of the options for easing here: http://gsgd.co.uk/sandbox/jquery/easing/
We will only use one instance of easing on this assignment: easeInOutBack
You should be able to see applications of easing on many things that you do outside of this assignment.
Video Embedding
Video embedding for this assignment is done using YouTube videos. For any video that you watch, there should be options for sharing that video, under which you will find options for embedding that video into another web page. That is what we are doing here. YouTube provides you with the code to copy and paste into your web page. The four videos that we are referencing in this project are located here:
This assignment has extensive CSS in it. The goal is to expose you to large amounts of CSS in order to increase your time spent writing CSS in hopes that writing it in the future will come more naturally to you.
CSS Alpha Layers
You can achieve semi-transparency by using alpha layers. You should first set the color using rgb and then set it again using rgba. This is a method of degrading gracefully. If rgba does not work for some reason, rgb should still work. Here are some examples:
Screen resizing in CSS can be done with statements similar to this:
@media screen and (min-width: 480px) { ... }
@media screen and (min-width: 768px) { ... }
This section of the CSS is given to you below so that you can copy and paste it. However, spend some time looking at it. I provided it to copy and paste because the rest of the code was already so long.
Validation:
Turn off accessibility validation for this one.
There will be HTML5 validation errors for frameborder within the iframe, that is ok for this one.
There should not be any other validation errors.
Code
Here is the code for this entire exercise. Proper use would be: look at the code to make sure you are approaching the assignment the correct way. Then try to do it on your own. Then use the code to make sure you've done it correctly. Improper use would be: copying without interpreting, which would result in not really learning what you're doing. The code is provided to help you be successful and so that you don't have to ask as many questions about the assignment.
