Plus fou que jQuery ScrollTo, jQuery ScrollPath vous permet de décider de l’interactivité déclenchée par la molette de la souris. Voici la documentation et une série de sites assez spectaculaires.

jQuery ScrollPath

Documentation

http://joelb.me/scrollpath/

https://github.com/JoelBesada/scrollpath

Links

http://activatedrinks.com

http://www.protest.eu

http://sf-langstrasse.hvo.ch

http://ala.ch/

http://lamoulade.com

http://inze.it/

http://dentsunetwork.com

http://bdw3.com/

http://www.soupagency.it (+http://www.soupmag.it)

http://nizoapp.com/

http://store.sophywong.com (Scrollpath on background in Store / Horizontal Scrolling in lookbook)

http://www.artofflightmovie.com/

http://benthebodyguard.com

Maintenant que vous avez vus des applications de scrolls horizontaux ou verticaux avec jQuery ScrollTo, imaginez ce que vous pouvez faire avec les 2 directions ! 
Des exemples ci-dessous.

jQuery Scrollto

http://demos.flesler.com/jquery/scrollTo/
http://www.google.be/search?q=tutorial+javascript+get+scroll+position

https://www.google.fr/search?sourceid=chrome&ie=UTF-8&q=websites+using+jquery+scrollto
http://www.underworldmagazines.com/weekly-inspiration-18-creative-websites-using-jquery-n-24/
http://www.onextrapixel.com/2009/06/26/24-superb-sites-that-use-horizontal-vertical-or-multi-directional-jquery-scrolling-effect/
http://css-tricks.com/fancy-scrolling-sites/
http://www.webdesignweb.fr/webdesign/10-web-design-de-qualite-2-1557

Horizontal + Vertical Scrolling

http://unfold.no

http://captaindash.com

http://www.jandk.fr/

http://www.serialcut.com/ (VIEW ALL: http://www.serialcut.com/overview)

http://imagemechanics.com.au/

jQuery Scrollto

http://demos.flesler.com/jquery/scrollTo/
http://www.google.be/search?q=tutorial+javascript+get+scroll+position

https://www.google.fr/search?sourceid=chrome&ie=UTF-8&q=websites+using+jquery+scrollto
http://www.underworldmagazines.com/weekly-inspiration-18-creative-websites-using-jquery-n-24/
http://www.onextrapixel.com/2009/06/26/24-superb-sites-that-use-horizontal-vertical-or-multi-directional-jquery-scrolling-effect/
http://css-tricks.com/fancy-scrolling-sites/
http://www.webdesignweb.fr/webdesign/10-web-design-de-qualite-2-1557

Vertical Scrolling

http://2009.legworkstudio.com

http://www.sacredjune.com/

http://www.iamyuna.com/

http://www.toby-powell.co.uk/

http://tedxportland.com/ (scrolls to top and starts video)

http://www.guidetotheappgalaxy.com

http://www.redcrownstudio.com/

http://www.pojeta.cz/

http://designinsocial.com/

Le scroll horizontal est depuis longtemps à la mode, notamment dans les portfolios. Avec jQuery ScrollTo, de nombreux sites web tirent parti de l’utilisation du scroll pour une meilleure expérience intéractive de l’internaute. Voici de la documentation et des exemples, la plupart trouvés au printemps 2012 ; il y aurait certainement   depuis de nombreux autres sites à montrer.

jQuery Scrollto

http://demos.flesler.com/jquery/scrollTo/
http://www.google.be/search?q=tutorial+javascript+get+scroll+position

https://www.google.fr/search?sourceid=chrome&ie=UTF-8&q=websites+using+jquery+scrollto
http://www.underworldmagazines.com/weekly-inspiration-18-creative-websites-using-jquery-n-24/
http://www.onextrapixel.com/2009/06/26/24-superb-sites-that-use-horizontal-vertical-or-multi-directional-jquery-scrolling-effect/
http://css-tricks.com/fancy-scrolling-sites/
http://www.webdesignweb.fr/webdesign/10-web-design-de-qualite-2-1557

Horizontal Scrolling

http://www.thedestination.co.za/

http://www.head2heart.us/

http://www.prettyproduction.com/

http://enterrodagata.aaum.pt/ (Viewport / Flipbook effect)

http://www.duchyoriginals.com/

http://kineticshadows.com/

http://www.gavincastleton.com/

http://vanityclaire.com/

http://www.drivingfutures.com/

http://carrotcreative.com (-> Careers)

http://www.atlanticbt.com/

http://www.artist-in-design.de/

http://www.bluezonesproject.com/ (-> Original Areas)

33 sites au total.
Année 5  DNSEP : 20 étudiants,
année 4 : 2 étudiants, 
année 3 DNAP : 7 étudiants,
année 2 : 4 étudiants.
Option Art (19) : Objet => 12 / Autre => 7.
Option Communication (12) :  Communication Graphique => 7 / Illustration => 5. 
Option Design : 2.

WORDPRESS (4)

nerougissezpas.fr

Collectif, Julia Chantel, diplômée de Communication Graphique ESADS 2012

- Thème WordPress sur mesure, sur le cahier des charges défini en collaboration avec Julia.
Fonctionnalités :
- jQuery pour tous les effets.
- Logo du site en aléatoire
- les couleurs changent dynamiquement en fonction des catégories.
- Les articles “news” de l’accueil se présentent sous la forme de fenêtres “post-it” déplaçables et fermables, elles changent de position aléatoirement dans un espace défini en rechargeant la page.
- Un bouton “ScrollToTop” en bas à gauche pour remonter en haut de page.
- Le blog s’appuie sur Isotope Relayout (http://isotope.metafizzy.co/demos/relayout.html) : chargement long (beaucoup d’images) puis un clic agrandit l’image sélectionnée et ré-organise la “planche” de vignettes. La “mécanique” de la page consiste dans un roulement sur 3 taille d’images définies, l’agrandissement correspond aussi à 3 tailles définies. Intégrer ce roulement de tailles était en soit plus un challenge qu’implémenter Isotope Relayout.

evgeniabobonevert.com

Evgenia Bobonevert, Année 5 Communication Graphique ESADS 2012

- WordPress s’appuyant sur Zoomooz (http://janne.aukia.com/zoomooz/), permet de zoomer sur un image.

En cours de développement, long à charger pour l’instant.

camillebrisset.fr

Camille Brisset, diplômée Option Art Matériaux Souples ESADS 2012

- Thème WordPress personnalisé,

- après inscription, Camille délivre un code d’accès, les utilisateurs sont redirigés sur une page offrant une prévision de chiffres du tiercé.

Un wordpress extrêmement simple et personnalisé dans la mesure où presque toutes les fonctionnalités sont enlevées ou masquées. La redirection et gestion des utilisateurs se fait avec le plugin Peter’s Login Redirect (http://wordpress.org/extend/plugins/peters-login-redirect/).

Pas très spectaculaire à regarder, en effet.

nicolas-andre.com

Nicolas André, Diplômé d’Illustration ESADS 2012

- Thème WordPress personnalisé en très peu de temps (3h), nécessite une optimisation.

Développement personnalisé mySQL / PHP (2)

lysiane.com, déjà demain

Lysiane Bollenbach, Diplômée de Communication Graphique ESADS 2012

Un questionnaire sur plusieurs thèmes permet de construire dynamiquement un magazine en ligne dont les articles correspondent aux réponses effectuées.

- jQuery pour tous les effets,

- jQuery ScrollTo pour les déplacements des “slides” du questionnaire,

- Isotope Filtering pour l’affichage des rubriques du magazine.

- Développement personnalisé Javascript pour la gestion des choix aux questions,

- Développement personnalisé mySQL et Php pour stocker les choix et générer dynamiquement le magazine.

benjaminjust.com

Benjamin Just, Année 2 Bois ESADS 2012

- développement personnalisé, marche avec l’outil Webfolio

- Flexcroll pour les barres de scroll personnalisées : http://www.hesido.com/web.php?page=customscrollbar

- jQuery pour tous les effets,

- Anything Slider (rubrique Presse) : http://css-tricks.com/anythingslider-jquery-plugin/ . Très compliqué à implémenter et personnaliser, je ne le recommande à personne !

INDEXHIBIT très personnalisés (5)

laetitiaoser.com

Laetitia Oser, Diplômée de l’Option Art Atelier Livre ESADS 2012

- Indexhibit, Google Web Fonts, personnalisation des feuilles de styles.

- Création d’un modèle de galerie personnalisé pour l’accueil, et d’une combinaison sur mesure de “horizontal” et “slideshow”.

- Menus déroulants personnalisés à l’horizontal et centré, affichage d’images à la place des noms des rubriques.

jeromeagez.com

Jérôme Agez, Année 4 Design ESADS 2012

- Indexhibit, personnalisation des feuilles de styles : 3 colonnes, centré horizontalement dans le navigateur,

colonnes du menu et de la description (droite) fixes.

- Logo en image.

- Jérôme se sert de la rubrique news comme d’un blog avec l’ajoût d’images sur un modèle qu’il a créé.

- Menu déroulant personnalisé.

- Optimisation du format pour iPhone / iPad.

agouala.com

Axel Gouala, Année 3 Terre, Diplômé DNAP ESADS 2012

- Indexhibit, Google Web Fonts, personnalisation des feuilles de styles.

- Page d’accueil avec fond plein écran qui s’adapte à la taille de la fenêtre.

- Menus déroulants personnalisés.

- Création d’un modèle personnalisé en implémentant jquery exposure dans indexhibit :

http://exposureforjquery.wordpress.com/demo/ (de fortes chances que personne d’autre ne l’ait fait vu la complexité ! Le but était de relever le challenge).

gauthieralice.com

Alice Gauthier, Année 3 Livre, Diplômée DNAP ESADS 2012

- Indexhibit, Google Web Fonts, personnalisation des feuilles de styles.

- Menus déroulants, transparence sur le menu.

- Page d’accueil des projets en “format vignettes”.

- De nombreuses ruses pour afficher le menu des projets seulement lorsque souhaité, donnant l’impression qu’il y a un sous-niveau supplémentaire à cet indexhibit.

noemiekukiel.com

Noémie Kukielczynski, Diplômée de l’Option Art Atelier Livre ESADS 2012

- Indexhibit, Google Web Fonts, personnalisation des feuilles de styles.

- Menus déroulants, transparence sur le menu.

- Création d’un modèle horizontal stylé sur mesure dans lequel on se déplace horizontalement avec la molette de la souris, et d’un modèle pour les vidéos.

- Ajout des vidéos avec flv-player.net (ne passe pas par Youtube etc, compresse les FLV elle-même).

INDEXHIBIT personnalisés (8)

floriefrayssinet.com

Florie Frayssinet, Année 4 Communication Graphique ESADS 2012

- Indexhibit, Google Web Fonts, personnalisation des feuilles de styles.

- Menus déroulants personnalisés.

- insertion de videos (embed, Vimeo)

- insertions de iframe appelant des pages créées à la main (ex : Interactivité > Virelangue)

giuliafrancini.com

Giulia Francini, Année 3 Métal, Diplômée DNAP ESADS 2012

- Indexhibit, Google Web Fonts, personnalisation des feuilles de styles.

- Menus déroulants, transparence sur le menu.

- Création d’un modèle horizontal stylé sur mesure et d’un modèle pour les vidéos.

- Ajout des vidéos avec flv-player.net (ne passe pas par Youtube etc, compresse les FLV elle-même).

camillelouzon.com

Camille Louzon, Diplômée d’Illustration ESADS 2012

- Indexhibit, Google Web Fonts, personnalisation des feuilles de styles.

- Logo en image.

-Menus déroulants.

laura-ancona.com

Laura Ancona, Diplômée d’Illustration ESADS 2012

- Indexhibit, Google Web Fonts, personnalisation des feuilles de styles.

- Logo en image.

- Menu déroulant centré verticalement.

- Création d’un modèle en déroulement horizontal dont le contenu est centré verticalement dans la page.

marineange.com

Marine Angé, Diplômée d’Art ESADS 2012

- Indexhibit, Google Web Fonts, personnalisation des feuilles de styles.

J’ai installé indexhibit, Marine a fait la personnalisation elle-même.

maikoshinagawa.com

Maiko Shinagawa, Année 5 Option Art Atelier Bijoux ESADS 2012

Indexhibit, Google Web Fonts, personnalisation des feuilles de styles.

mariusponsdevincent.com

Marius Pons de Vincent, Diplômé d’Art ESADS 2012

Indexhibit, Google Web Fonts, personnalisation des feuilles de styles.

baptistedesjardin.com

Baptiste Desjardin, Année 2 Option Art / Objet ESADS 2012

- Indexhibit, personnalisation des feuilles de styles.

- Logo en image.

INDEXHIBIT peu ou pas personnalisés (5)

elisa-martin.com
Elisa Martin, Diplômée d’Art ESADS 2012

- Indexhibit, personnalisation des feuilles de styles.
- Ajout d’une page d’accueil avant le portfolio indexhibit.

elsafarbos.com
Elisa Martin, Diplômée d’Art / Objet ESADS 2012

juliettesteiner.com
Juliette Steiner, Art / L’Atelier ESADS 2012

johnmirabel.com
John MIrabel, Art / Equipe 1 ESADS 2012

charlinecollette.com
Charline Collette, Diplômée d’Illustration ESADS 2012

guillaumedeloizon.com
Guillaume Deloizon, Diplômée d’Illustration ESADS 2012

baptistedelespinay.fr

Baptiste de L’Espinay, Diplômé de Communication Graphique ESADS 2012

perrinedetrie.com

Perrine Détrie, Diplômé de Communication Graphique ESADS 2012

juliegaland.fr

Julie Galand, Diplômé de Communication Graphique ESADS 2012

lecollectifdelheurebleue.com
Collectif, Irène Tchernooutsan, Diplômée de Design ESADS 2012

melodiemeslet.com
Mélodie Meslet-Tourneux, Année 3 Diplômée Art DNAP ESADS 2012

marineventura.com
Marine Ventura, Année 3 Diplômée Art DNAP ESADS 2012

clementdebras.com
Clément Debras, Année 2 Art / Métal ESADS 2012

agathekervadec.com
Agathe Kervadec, Année 2 Art / Pôle 2 ESADS 2012

Julian Totino Tedesco
Blogspot:
http://www.totinotedesco.blogspot.fr/
@Deviant:
http://juliantotinotedesco.deviantart.com/

Sam’s Infatuations
Sam Hiti’s Blog
http://samhiti.tumblr.com/

Chris Stevens
@Deviant:
http://chriss2d.deviantart.com/
@Comic Art Fans:
http://www.comicartfans.com/gallerydetail.asp?gcat=10163

Ryan Sook
http://www.ryansook.com/
Among other great art, Ryan’s art from the featurette from Action Comics #900 can be seen complete in the 2011 Art Gallery page (no dialogue).

Dale Eaglesham
Official website:
http://www.daleeaglesham.com/
@Comic Art Fans:
http://www.comicartfans.com/searchresult.asp?txtsearch=Dale%20Eaglesham

John Watson Art
http://www.johnwatsonart.com

Ordster’s Random Thoughts
Jerry Ordway’s blog
http://ordstersrandomthoughts.blogspot.fr/

Ryan Berger
Freelance Illustration & Concept Design
http://ryanbarger.net/

Dan Panosian
Blog:
http://www.urbnbarbarian.blogspot.fr/
Gallery:
http://www.danpanosian.com

Debris #1, Riley Rossmo

The Defenders #6, Terry & Rachel Dodson

The Incredible Hulk #7.1, Michael Komarck

The Incredible Hulk #8, Michael Komarck

The Invincible Iron Man #517, Salvador Larroca

John Carter, The Gods of Mars #3, Julian Totino Tedesco

Marvel Zombies Destroy! #1, Michael Del Mundo

Mystery in Space#1, Michael Allred

Queen Sonja #29, Lucio Parrillo

The Amazing Spider-Man Movie #1

Ultimate Comics X-Men #11, Kaare Andrews

Ultimate Comics The Ultimates #11, Kaare Andrews

Vampirella #19, Lucio Parrillo

Warlord of Mars Dejah Thoris #12, Paul Renaud

Wolverine and The X-Men #10, Bachalo, Townsend

X-O Manowar #3, Jelena Kevix Djurdjevic and Mico Suayan

Crime Boss
Crime Comic Books of the 1940s and 1950s
http://www.crimeboss.com/

First Look: John Romita’s Amazing Spider-Man Artist’s Edition at IDW
http://vimeo.com/36253146

“Original Comic Art” at Big Glee
http://bigglee.blogspot.fr/search/label/original%20comic%20art
Big Glee, The Albert Bryan Bigley Archives
Blogspot
Nice comparisons between the original art and the finished versions, mostly covers but also interior pages.

Flashback Universe,
Where the Golden Age Meets The Digital Age!
http://flashbackuniverse.blogspot.fr/
A lot of great covers and articles about old comics.

1935-Present, A Comics Odyssey
Nathan P. Mahney’s blogspot
http://comicsodyssey.blogspot.fr/
Comics articles chronologically from 1935, a great resource.

Comics History

theComicBooks.com – The History of Comic Books
http://www.thecomicbooks.com/old/index.html

Cartoonmovement.com
There Is More Than One Truth

“The Internet’s #1 publishing platform for high quality political cartoons and comics journalism”

100 Riffs (A Brief History of Rock N’ Roll) from Chicago Music Exchange on Vimeo.

Alex Chadwick plays 100 famous guitar riffs in one take giving you a chronological history of rock n’ roll.

See the full detailed list of all the artists, keys, and year of each song played in the 100 riffs: http://www.chicagomusicexchange.com/100riffs

Alex plays a 1958 Fender Strat: http://goo.gl/g37oT

1 Mr. Sandman – Chet Atkins
2 Folsom Prison Blues – Johnny Cash
3 Words of Love – Buddy Holly
4 Johnny B Goode – Chuck Berry
5 Rumble – Link Wray
6 Summertime Blues – Eddie Cochran
7 Pipeline – The Chantays
8 Miserlou – Dick Dale
9 Wipeout – Surfaris
10 Daytripper – The Beatles
11 Can’t Explain – The Who
12 Satisfaction – The Rolling Stones
13 Purple Haze – Jimi Hendrix
14 Black Magic Woman – Santana
15 Helter Skelter – The Beatles
16 Oh Well – Fleetwood Mac
17 Crossroads – Cream
18 Communication Breakdown – Led Zeppelin
19 Paranoid – Black Sabbath
20 Fortunate Son – Creedence Clearwater Revival
21 Funk 49 – James Gang
22 Immigrant Song – Led Zeppelin
23 Bitch – Rolling Stones
24 Layla – Derek and the Dominos
25 School’s Out – Alice Cooper
26 Smoke on the Water – Deep Purple
27 Money – Pink Floyd
28 Jessica – Allman Brothers
29 La Grange – ZZ Top
30 20th Century Boy – T. Rex
31 Scarlet Begonias – Grateful Dead
32 Sweet Home Alabama – Lynyrd Skynyrd
33 Walk This Way – Aerosmith
34 Bohemian Rhapsody – Queen
35 Stranglehold – Ted Nugent
36 Boys Are Back in Town – Thin Lizzy
37 Don’t Fear the Reaper – Blue Oyster Cult
38 Carry on My Wayward Son – Kansas
39 Blitzkreig Bop – The Ramones
40 Barracuda – Heart
41 Runnin’ with the Devil – Van Halen
42 Sultans of Swing – Dire Straits
43 Message in a Bottle – The Police
44 Hey Hey, My My (Into the Black) – Neil Young
45 Back in Black – AC/DC
46 Crazy Train – Ozzy Osbourne
47 Spirit of Radio – Rush
48 Pride and Joy – Stevie Ray Vaughan
49 Owner of a Lonely Heart – Yes
50 Holy Diver – Dio
51 Beat It – Michael Jackson
52 Hot For Teacher – Van Halen
53 What Difference Does It Make – The Smiths
54 Glory Days – Bruce Springsteen
55 Money For Nothing – Dire Straits
56 You Give Love a Bad Name – Bon Jovi
57 The One I Love – REM
58 Where the Streets Have No Name – U2
59 Welcome to the Jungle – Guns N’ Roses
60 Sweet Child ‘O Mine – Guns N’ Roses
61 Girls, Girls, Girls – Motley Crue
62 Cult of Personality -Living Colour
63 Kickstart My Heart – Motley Crue
64 Running Down a Dream – Tom Petty
65 Pictures of Matchstick Men – Camper Van Beethoven
66 Thunderstruck – AC/DC
67 Twice as Hard – Black Crowes
68 Cliffs of Dover – Eric Johnson
69 Enter Sandman – Metallica
70 Man in the Box – Alice in Chains
71 Smells Like Teen Spirit – Nirvana
72 Give it Away – Red Hot Chili Peppers
73 Even Flow – Pearl Jam
74 Outshined – Soundgarden
75 Killing in the Name – Rage Against the Machine
76 Sex Type Thing – Stone Temple Pilots
77 Are You Gonna Go My Way – Lenny Kravitz
78 Welcome to Paradise – Green Day
79 Possum Kingdom – Toadies
80 Say it Ain’t So – Weezer
81 Zero – Smashing Pumpkins
82 Monkey Wrench – Foo Fighters
83 Sex and Candy – Marcy Playground
84 Smooth – Santana
85 Scar Tissue – Red Hot Chili Peppers
86 Short Skirt, Long Jacket – Cake
87 Turn a Square – The Shins
88 Seven Nation Army – White Stripes
89 Hysteria – Muse
90 I Believe in a Thing Called Love – The Darkness
91 Blood and Thunder – Mastodon
92 Are You Gonna Be My Girl – Jet
93 Reptilia – The Strokes
94 Take Me Out – Franz Ferdinand
95 Float On – Modest Mouse
96 Blue Orchid – White Stripes
97 Boulevard of Broken Dreams – Green Day
98 Steady As She Goes – The Raconteurs
99 I Got Mine – Black Keys
100 Cruel – St. Vincent

*Shot on a Nikon