As a reminder, this assignment does not require that you rely on Modernizr to solve any or all of the browser compatibility issues – your challenge is to make the page’s features work in every browser. That’s all I’ll be checking.
There are 11 features on the page that are not fully supported by all browsers. By using Modernizr, polyfills, and creativity, try to solve as many as you can. (We covered how to solve one of these in class, so that’s your ‘gimme.’)
You will be graded on a scale of 1 (problem solved!), 2 (problem partially solved) and 3 (problem not solved at all).
Here’s a list of the features detected by Modernizr:
Here are some popular polyfills, although I can’t attest that any / all of these will work for our assignment:
WHAT YOU CAN NOT DO
Do not edit the HTML and CSS to no longer use the features described – you can add data-attributes, classes and IDs to the HTML, but that’s all.
WHAT TO TEST IN
- Edge 14
- Firefox 50
- Chrome 54
- Safari 10
- iOS 10
- Android 53
I would like everyone to make a website that uses a JS/JQ plugin which changes the appearance of your page upon either scrolling, mouse position, keyboard commands, or something similar. Examples include:
- Stellar.js, for a vertically scrolling site
- Skrollr, as an alternative to Stellar
- jQuery.parallax (another alternative)
- Parallax Image Scroll (yet another)
- jQuery ScrollPath – that wacky one that scrolls in all directions, based on a path you design
- Scrollorama, or Super Scrollorama (recommended), or Scroll Magic, which can do parallax, rotating, zooms, you name it
- WOW.js, alone or in combination with other plugins
For any of the above plugins, I’d like you to control the narrative, to try to tell a ‘story,’ in a very loose sense. If there is a progression of ideas as the user scrolls, for instance, that’d be great. Remember Jess & Russ?
Alternately, you are more than welcome to design your personal portfolio as a parallax website (I guess that tells your story?). If you do not have all of your desired content for an online portfolio, you can substitute dummy content / ipsum.
If you’re looking for a parallax plugin to use, consider using Scroll Magic – it can really do anything. Here’s a demo page that helps you learn to do different things on scroll, including (but not limited to) parallax:
This rubric is pretty short and straightforward, as this assignment is really geared toward creativity, which I do not want to restrict.
- Create three CSS animations, on three separate HTML pages
- Make sure your animations are different from each other, and are also different from the content we made in class and is on the server. Again, this project is all about creativity, so please don’t minimally adjust existing content.
- Feel free to make: an interactive infographic, a lo-fi representation of the analog world, a website that relies on animated elements, or anything like what we have on the server.
- Feel free to re-create reality, or be totally abstract. You can also re-create your favorite video game.
- If you have a practical use for a CSS animation on a website, make it!
- Does not have to be responsive
Some inspirational ideas:
Remember that rotating, 3D cube we saw in class? It’s an animation that relies on perspective. I’ll go over perspective briefly at the start of Monday’s class, but here’s a bunch of examples and tutorials on how to use it – and how to make that cube: