- art388 [art_on_the_internet] sp2013 -
instructor : ryanSmith
Week #12
MONDAY
continue looking at Project C
Ask about Project D ideas
Another jQuery Slideshow
start talking about HTML 5
HTML5 Introduction
http://www.w3schools.com/html/html5_intro.asp
HTML Reference - (HTML5 Compliant)
http://www.w3schools.com/tags/default.asp
Responsive Web design
- 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
another fun site:
http://activatedrinks.com/
CSS3
http://www.w3schools.com/css3/default.asp
Get started with "scrolling" effects:
demo (view page source ) uses jQuery
useful links :
"floating-navigation-menu"
"smooth-scrolling.js"
WEDNESDAY
test
**rS Demo
7 Web Design Trends (That Won't Go Away)
Good designs:
christhurman.com | plinestudios.com | www.shopify.com | techcrunch.com | lowdi.com | tracycostopoulos.com
Zoom Stuff :
Image Example
jQuery
<script type="text/javascript">
jQuery(document).ready(function($){
$('#image1').addimagezoom({ // single image zoom
zoomrange: [3, 5],
magnifiersize: [300,300],
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