SmartScroll

Mauris rutrum feugiat

Relief

Ut vel commodo dolor. Fusce sed ipsum vitae nunc auctor venenatis nec scelerisque nisl. Vivamus tempus quam nec dui imperdiet dapibus. Mauris rutrum feugiat nibh at volutpat. Suspendisse vitae tortor tellus, eget euismod nibh. Suspendisse vestibulum tellus et leo fringilla vehicula. Nam aliquet nisi sit amet lectus eleifend pulvinar. Sed eget justo at lacus laoreet iaculis eget euismod elit. Etiam sit amet dui ligula, ac mollis purus. Maecenas ultrices augue ac elit ultrices ornare. Duis enim libero, vulputate nec eleifend a, dapibus id sem. Ut hendrerit dui dapibus nibh commodo scelerisque. Maecenas ac viverra eros. Nullam non nisl nisl. Fusce interdum imperdiet arcu a imperdiet. Sed at ipsum nulla, quis vestibulum arcu. Donec et neque enim. Donec id dapibus nibh.

Climat

Sed quis nunc ligula, aliquam convallis leo. Donec et quam ultrices augue lacinia consectetur. Vivamus lobortis dapibus massa, sed vehicula tellus pellentesque ac. Proin sed elit ac tellus consectetur porttitor. Aliquam erat volutpat. Duis eu metus sit amet massa tempor posuere. In nec viverra magna. Curabitur aliquam libero at est ultrices eu pretium lectus dignissim. Donec condimentum dapibus sem ac egestas. Duis porttitor sollicitudin risus nec dictum. Etiam tincidunt volutpat orci nec vulputate.

Donec quis sagittis magna. Ut molestie, risus id porttitor volutpat, justo est tincidunt augue, convallis aliquet nulla ante ac nunc. In aliquam fermentum nunc vel vehicula. Nam rutrum sodales orci, et lobortis dolor ultricies sit amet. Sed sapien felis, blandit nec mollis ut, porttitor quis sapien. Donec ornare nibh sed nisl euismod quis adipiscing magna rutrum.

Suspendisse mauris magna, pharetra at euismod consectetur, luctus sit amet ipsum. Duis nec faucibus quam. Nam eget egestas odio.

Donec consectetur justo eu nisi interdum ac condimentum risus consectetur. Nunc ultricies, tortor id venenatis tempus, justo augue suscipit metus, vel vestibulum dolor enim nec neque. Donec laoreet cursus diam id mattis. Nunc congue varius tortor, vitae luctus justo tempor in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus vitae nulla urna, ac viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec posuere placerat lorem, vitae imperdiet ligula adipiscing sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras eget convallis dolor. Donec ornare sagittis eros, at convallis libero scelerisque sit amet. Curabitur ac ipsum lacus, sed tristique arcu.

Hydrographie

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec posuere placerat lorem, vitae imperdiet ligula adipiscing sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras eget convallis dolor. Donec ornare sagittis eros, at convallis libero scelerisque sit amet. Curabitur ac ipsum lacus, sed tristique arcu.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus vitae nulla urna, ac viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec posuere placerat lorem, vitae imperdiet ligula adipiscing sed.

Design

Introduction

Le design est une discipline visant à représenter concrètement, une pensée, un concept ou une intention en tenant compte éventuellement d'une ou des contraintes fonctionnelles, structurelles, esthétiques, didactiques, symboliques, techniques et productives. Ces représentations peuvent être tangibles ou virtuelles et s'inscrivent de préférence dans un contexte social, économique, culturel.

Étymologie et évolution

À la Renaissance, disegno (en italien) est l'un des concepts majeurs de la théorie de l'art. Il signifie à la fois dessin et projet. Au XVIIe siècle en France, les théoriciens de l'art le traduisent par dessein et conservent le double sens (l'idée et sa représentation).

En 1712, Shaftesbury introduit dans la théorie anglaise de l'art[1] le concept de design fidèle au sens de disegno. Ainsi, nous avons drawing pour le dessin en tant que tracé et design signifiant l'idée et sa représentation, le projet et son graphisme.

Néanmoins, ce double sens de design va se disjoindre rapidement pour suivre les théories de l'art dominantes de l'époque. Car c'est en 1750 en France que la distinction apparaît pour donner deux champs sémantiques distincts, celui du dessin (la pratique) et du dessein (l'idée) marquant une rupture fondamentale qui n'est pas sans rappeler la dualité matière/esprit de Descartes. À l'Académie royale de peinture et de sculpture, on enseigne désormais les arts du dessin et non plus du dessein.

C'est seulement au début du XXe siècle, alors en plein essor de l'industrialisation, que l'on assiste à l'émergence internationale du terme design dans le sens de disegno, c'est-à-dire, la conception et la mise en forme. Cette définition moderne se concrétise dans le travail effectué au Bauhaus.

Aussi, le design est souvent confondu avec le stylisme d'objet lorsque l'exercice consiste à embellir un objet dans le but de séduire des consommateurs. D'ailleurs, en 1994, le ministre de la Culture français Jacques Toubon présente un projet de loi pour remplacer l'anglicisme design par stylique, provoquant l'incrédulité et les moqueries de la presse française, notamment Le Nouvel Observateur[réf. nécessaire]. La loi Toubon sera fortement édulcorée dans son application, par le Conseil constitutionnel et cette disposition concernant le mot design, rendue caduque.

Sollicité par le marketing depuis les années 2000, ce mot est peu à peu devenu un argument publicitaire. Design est devenu un adjectif qualificatif signifiant un style aux formes simples et une apparence épurée. ex : une lampe design. Il succède ainsi au style rustique des années 1990.

Des définitions multiples

Il n'existe pas de définition unique du design. Son sens varie selon les époques, les cultures et les individus. C'est cette complexité qui le caractérise. En dehors des interprétations variées selon les cultures, le design peut se concevoir soit comme un art appliqué (exécution créative), soit comme une discipline autonome (dans la pratique et la théorie).

Pour les Anglo-Saxons, le design est davantage une conception, une idée, une intention ou un projet. En français, c'est une recherche d'harmonie entre les formes et les fonctions de l'objet. En Italie et en Allemagne, le design revêt une importance plus nette puisque l'industrie et l'artisanat de qualité en ont fait leurs credo pour valoriser leurs productions.

Dès le début de l'histoire du design, on remarque deux grandes visions (deux idéaux qui correspondent aux idéologies dominantes) qui s'opposent et se croisent tout au long du XXe siècle. On peut ainsi situer le design entre ces deux extrêmes :

- D'un côté, il y aurait un design d'auteur : privilégiant un travail à taille humaine, une proximité avec des artisans ou techniciens très qualifiés de différents métiers. Le savoir-faire (et donc sa sauvegarde) a une grande importance. Les pièces réalisés en petites séries sont souvent très onéreuses, car le travail (savoir-faire) a un prix. La pièce finale n'aurait pas pu exister indépendamment de l'ouvrier. On peut le rapprocher du mouvement Arts & Crafts de William Morris. C'est un design qui est du côté de la réalisation et qui définit le citoyen davantage comme un travailleur

- De l'autre, il y aurait un design industriel : agissant au sein d'une entreprise, ce design collectif se situe en amont du projet, c'est-à-dire dans la phase de conception. les produits sont tirés en grande série pour diminuer les coût initiaux des moules de fonderies, d'injections, de presses, etc. La quantité de matière et les procédés de fabrication sont optimisés pour aboutir à un produit au plus économique. Au moment de la production, un employé sans qualification est suffisant, pour réduire là aussi les coûts. La pièce existe indépendamment des employés car ils sont interchangeables. C'est un design qui conçoit, qui projette. C'est un design qui est du côté de la conception et le citoyen se définit davantage comme un client.

Proin sed elit

Relief

Climat

Suspendisse mauris magna, pharetra at euismod consectetur, luctus sit amet ipsum. Duis nec faucibus quam. Nam eget egestas odio.

Hydrographie

Suspendisse vitae tortor

Relief

Climat

Suspendisse mauris magna, pharetra at euismod consectetur, luctus sit amet ipsum. Duis nec faucibus quam. Nam eget egestas odio.

Hydrographie

Customize your Scrollbar in 5 min.
Use Smart mode to enhance your content.
Support MouseWheel with "Mouse Wheel Extension" by Brandon Aaron
Inspired by the Three-Oh Scroll
by Aaron Boodman
Nice degradation when JS is disable
Tested on Firefox, Chrome, Safari, IE7+
contains minified and uncompressed
SmartScroll jQuery Plugin by Pissoort Denis is licensed under a Creative Commons Attribution 3.0 Unported License.

Share |

Install

First, you have to download the "Mouse Wheel Extension" by Brandon Aaron and the SmartScroll Plugin.
Then insert the following code in the <HEAD> of your HTML document :

<!-- Head of your html document -->

<head>

<!-- Add jQuery -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>

<!-- Add MouseWheel Extension -->

<script src="path to MouseWheel" type="text/javascript"></script>

<!-- Add SmartScroll  -->

<script src="path to SmartScroll" type="text/javascript"></script>

<!-- Add Css -->

<link href="path to your css file" rel="stylesheet" type="text/css" /> 

<!-- SmartScroll Activation Here -->

Activation

Add this few lines after the previous code.

<!-- Activate SmartScroll -->

<script type='text/javascript'>

$(document).ready(function(){

  $('#MyTarget').smartScroll({

    prefix: 'v1', // add a prefix classname to each created element  

    width:30, // scrollbar's width

    height:500, // scrollbar's height

    mode:'drag-vertical', //only mode avaible now

    fx:'normal', // 'normal' or 'tips'

    wheelGap:40, // distance in pixels ;

    smart:true, // smart mode enable

    fixWidth:0, // fix IE7 float bug if your SmartScroll target has margin

                        // see setup for more information

  }); 

});

</script>

</head>

prefix : STRING add a prefix classname to each created element.

width : INTEGER scrollbar's width.

height : INTEGER scrollbar's height.

mode : STRING At this moment, the only avaible mode is "drag-vertical"

fx : STRING "normal" or "tips" apply an Fx.

wheelGap : INTEGER distance in pixels that scrolls the content when mousewheel is trigger.

smart : BOOLEAN enable smart mode.

fixWidth : INTEGER fix IE7 float bug if your SmartScroll target has margin.

Setup

1Wireframe

First, you need to know the structure created by SmartScroll. Take a look on the figure below.

2Simple demo

In this demo I explain how to apply "SmartScroll" on a simple <p> tag.

BEFORE

This is a simple demo text.

Donec consectetur justo eu nisi interdum ac condimentum risus consectetur. Nunc ultricies, tortor id venenatis tempus, justo augue suscipit metus, vel vestibulum dolor enim nec neque. Donec laoreet cursus diam id mattis. Nunc congue varius tortor, vitae luctus justo tempor in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus vitae nulla urna, ac viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec posuere placerat lorem, vitae imperdiet ligula adipiscing sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

AFTER

Source

<p>

This is a simple demo text.<br />

<br />

Donec consectetur justo eu nisi interdum ac condimentum risus consectetur. Nunc ultricies, tortor id venenatis tempus, justo augue suscipit metus, vel vestibulum dolor enim nec neque. Donec laoreet cursus diam id mattis. Nunc congue varius tortor, vitae luctus justo tempor in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus vitae nulla urna, ac viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec posuere placerat lorem, vitae imperdiet ligula adipiscing sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

</p>

Source

<head> 

<script type='text/javascript'>
   $(document).ready(function(){
      $('#MyTarget').smartScroll({
         prefix:'MyPrefix',
         height:140,
         smart:false,
         fixWidth:1
      });
   });
</script>
</head>

<div id='MyTarget'>
<p>

This is a simple demo text.<br />

<br />

Donec consectetur justo eu nisi interdum ac condimentum risus consectetur. Nunc ultricies, tortor id venenatis tempus, justo augue suscipit metus, vel vestibulum dolor enim nec neque. Donec laoreet cursus diam id mattis. Nunc congue varius tortor, vitae luctus justo tempor in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus vitae nulla urna, ac viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec posuere placerat lorem, vitae imperdiet ligula adipiscing sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

</p>

</div>

It's really easy to add smartScroll on your website. You just have to encapsulated your content with a "container" and give it an ID.
Then activate it and it's ready. (see highlighted lines)

Let's take a look on the css :

/*CSS SIMPLE DEMO*/

/*THE TARGET*/

div#MyTarget{ width:240px; height:140px;}

/*SMARTSCROLL TARGET CONTAINER*/

div.MyPrefix_targetContainer{ border:1px dotted #ccc;}

/*SMARTSCROLL TARGET*/

div.MyPrefix_target{

height:auto;

margin-bottom:10px; /*adjust the height of the scrollTarget if it wasn't calculated correctly.

                      You can also use padding to do that*/

}

/*SMARTSCROLL SCROLLBAR*/

div.MyPrefix_sliderBackground{ background:#0CF;}

div.MyPrefix_cursor{ height:26px; background:#09F; }

/*END*/

3Smart mode

By default, SmartScroll uses the smart functionality. So if you don't use it, don't forget to set : {smart:false}
When you have smart mode activated you can choose between two "fx" parameters : "normal" and "tips"

"normal" : no fx, all "span" are visible.
"tips" : all "span" have a nice effect like a tips.

Then you have to indicate to SmartScroll where are the tips that you want to add. To do that simply add a title attribute on a direct child of your "div#MyTarget".

<!-- HTML DOCUMENT -->

<div id='MyTarget'>

<!-- You must specify a title on the first direct child. Then add other title attribute where you want -->

<p title='Span #01' class='bigBlue'>SPAN #01</p>
<p>FAKE BLOCK</p>

<p>FAKE BLOCK</p>

<p title='Span #02' class='smallBlue'>SPAN #02</p>
<p>FAKE BLOCK</p>

<p title='Span #03' class='bigBlue'>SPAN #03</p>
<p>FAKE BLOCK</p>

<p>FAKE BLOCK</p>

<p title='Span #04' class='smallBlue'>SPAN #04</p>
<p>FAKE BLOCK</p>

<p>FAKE BLOCK</p>

<p>FAKE BLOCK</p>

<p>FAKE BLOCK</p>

<p title='Span #05' class='smallBlue'>SPAN #05</p>
<p>FAKE BLOCK</p>

<p>FAKE BLOCK</p>

<p>FAKE BLOCK</p>

<p>FAKE BLOCK</p>

</div>

You can obtain something like this :

FX = "normal"

SPAN #01

FAKE BLOCK

SPAN #02

FAKE BLOCK

SPAN #03

FAKE BLOCK

SPAN #04

FAKE BLOCK

SPAN #05

FAKE BLOCK

FX = "tips"

SPAN #01

FAKE BLOCK

SPAN #02

FAKE BLOCK

SPAN #03

FAKE BLOCK

SPAN #04

FAKE BLOCK

SPAN #05

FAKE BLOCK

Credits

Thanks to
Brandon Aaron for the "Mouse Wheel Extension" and Aaron Boodman for the Three-Oh Scroll wich inspired me a lot.

Pixeline who give me some good feedbacks.

And of course The authors of jQuery

SmartScroll

jQuery Plugin

Mauris rutrum feugiat

Relief

Climat

Hydrographie

Design

Introduction

Étymologie et évolution

Des définitions multiples

Proin sed elit

Relief

Climat

Hydrographie

Suspendisse vitae tortor

Relief

Climat

Hydrographie

Install

Activation

Setup

1Wireframe

2Simple demo

3Smart mode

Credits

Comments