- week 12 -
QUIZ : 9:30AM - NOVEMBER 14th
**Ask about Project C Presentations
**
Ask about homework : Collect printed project proposals
"Project D" - Designing & building a marketing website for a product
aBookApart.com
Amazon.com
Project D Examples :
Neck Basket | Game Boy | ??? | Dream Catcher | "SolaFeet" | "Man-Stache"
HTML5 Introduction
http://www.w3schools.com/html/html5_intro.asp
HTML Reference - (HTML5 Compliant)
http://www.w3schools.com/tags/default.asp
- my example
More fun HTML5 stuff:
http://css-tricks.com/examples/VerticalMediaQueries/bootstrap.html
http://johnpolacek.github.com/scrollorama/
http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/
parallax scrollling
http://richardshepherd.com/smashing/parallax/background.html
Get started with "scrolling" effects:
demo (view page source ) uses jQuery
useful links :
"smooth-scrolling.js"
7 Web Design Trends (That Won't Go Away)
Good designs:
christhurman.com | shopify.com | lowdi.com | tracycostopoulos.com
More fun HTML5 stuff:
Responsive Web design
"floating-navigation-menu"
- dwuser.com/.../complete.html
**rS Demo
Zoom Stuff :
Image Example
jQuery
<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8">
/* jquery version 1.11.0 */
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#image1').addimagezoom({ // single image zoom
zoomrange: [3, 5],
magnifiersize: [300,300], //width & height of box
magnifierpos: 'right',
cursorshade: true,
largeimage: 'zoom/PhillyCityScape_big.jpg' //<-- No comma after last option!
})
})
</script>
HTML :
<img id="image1" border="0" src="zoom/PhillyCityScape_100px.jpg" style="height:100px">
Source :
http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm
Other Source :
http://www.tripwiremagazine.com/2012/12/jquery-image-zoom.html
HOME WORK
- finish "Project D"