Interactive Writing & Design

Modernizr Rubric

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:

https://www.browserleaks.com/features

Here are some popular polyfills, although I can’t attest that any / all of these will work for our assignment:

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

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

Good Luck!

Posted in Uncategorized | Leave a comment

Parallax Rubric

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:

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.

Posted in Uncategorized | Comments Off on Parallax Rubric

Scroll Magic

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:

http://janpaepke.github.io/ScrollMagic/examples/

Posted in Uncategorized | Comments Off on Scroll Magic

Parallax Resources

A Stellar.js tutorial, pretty good:

https://webdesign.tutsplus.com/tutorials/create-a-parallax-scrolling-website-using-stellarjs–webdesign-7307

Some amazing parallax examples:

http://www.intacto10years.com/index_start.php

http://www.loisjeans.com/web2012/es

http://hobolobo.net/

How the hobolobo site was made:

http://www.creativebloq.com/javascript/building-parallax-scrolling-storytelling-framework-8112838

The stellar.js documentation:

http://markdalgleish.com/projects/stellar.js/docs/

Posted in Uncategorized | Comments Off on Parallax Resources

Student Examples: Parallax Project

Beatles:

http://student.elon.edu/ewilliams/stellar-js/indexFinished.html

Dinner:

http://student.elon.edu/tmackins/parallax/index.html

Kyrgyzstan (uses Skrollr):

http://student.elon.edu/mmcgowan5/kyrgyzstan/index.html

Holy Guacamole:

http://student.elon.edu/lbourne/parallaxProject/indexFinished.html

Big Hero 6:

http://student.elon.edu/akim6/bighero6/

Posted in Uncategorized | Comments Off on Student Examples: Parallax Project

Css Animation Rubric

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:

Posted in Uncategorized | Comments Off on Css Animation Rubric

The jQuery’s Have It

vote

Posted in Uncategorized | Comments Off on The jQuery’s Have It

3d Perspective in CSS Animation

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:

perspective

https://24ways.org/2010/intro-to-css-3d-transforms/

http://callmenick.com/post/css-transitions-transforms-animations-perspective

https://desandro.github.io/3dtransforms/docs/perspective.html

 

Posted in Uncategorized | Comments Off on 3d Perspective in CSS Animation

Cast Your Vote!

https://goo.gl/forms/KlnVvpP81S9FiTvm2

Posted in Uncategorized | Comments Off on Cast Your Vote!

Vh, Vw, and Animation

If ‘vh’ and ‘vw’ are confusing you, check out this excellent article explaining them:

Viewport units: vw, vh, vmin, vmax

Here’s a good explanation of the ‘::before’ and ‘::after’ pseudo-classes:

Learning To Use The :before And :after Pseudo-Elements In CSS

And some cool stuff those pseudo-elements can do:

A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

Here’s the great Mary Lou’s take on data attributes and pseudo-classes:

http://tympanus.net/codrops/2013/07/05/using-custom-data-attributes-and-pseudo-elements/

And here are the text fills we’ll do in class:

http://tympanus.net/codrops/2015/02/16/create-animated-text-fills/

Here’s a basic primer on CSS Animation:

https://webdesign.tutsplus.com/tutorials/a-beginners-introduction-to-css-animation–cms-21068

…and a list of all the CSS properties that can be animated:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

 

 

Posted in Uncategorized | Comments Off on Vh, Vw, and Animation