Sondage du mois

Sondage du mois
 

  La connaissance ne vaut que si elle est partagée par tous




 
  Astuce Adobe Photoshop : Raccourci Enregister sous : ctrl Shift S




Les tutoriaux: Index » Jquery » ScriptsJquery » Effet scanner sur photo

Introduction

  • Tutoriel posté par Sky
  • 669 lectures
  • Mis en ligne le 20-08-2011
  • Dernière mise à jour le 20-08-2011
  • Ce tutoriel a été estimé comme simple.


Automatic Translations:
Translate Into English Translate Into German Translate Into Italian Translate Into Spanish Translate Into Portuguese

Nous allons créer un effet de scanner sur photo à l'aide du composant slider de jquery.
Je souhaitais réaliser ce type d'effet sans trouver réellement de solution sur la toile, donc je partage mon propre script, simple et fonctionnel :)

Méthodologie


La partie JQUERY


CODE HTML


// Inclusion jquery, jquery UI et son css
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/flick/jquery-ui.css" />

// SCRIPT JQUERY
<script type="text/javascript">
$(document).ready(function(){
$("#slider" ).slider({
value:0,
min: 0,
max: 900,
step: 1,
slide: function( event, ui ) {
$( ".image1" ).css({"width":""+ui.value+""});
}
});
});
</script>



Que représente ces attributs :

value:0 => Valeur du slide lors du chargement de la page
min: 0 => Valeur minimum du slider
max: 900 => Valeur maximum du slider
step: 1 => quand je drag le slider, définit le nombre de pixel, ici 1 pixel pour une fluidité optimale

Vous l'aurez sans doute compris je me sert des valeurs numériques du composant slider pour "jouer" avec mon bloc div. De ce fait la valeur max doit correspondre à la largeur de mon image qui apparaitra lors du slide.

La partie CSS


CODE CSS


.image1{
position:absolute;
z-index:1500;
width:0px;
height:668px;
background:#fff url('1.jpg') no-repeat top left;
}
.image2{
position:absolute;
z-index:1000;
height:668px;
width:900px;
background:#fff url('2.jpg') no-repeat top left;
}
#slider {
width:900px;
margin:20px;
margin-top:0px;
}
.conteneur {
margin:20px;
}



Ce que nous retenons pour la partie CSS est un div de class conteneur qui va contenir mes deux images en background, une qui sera affichée normalement et une autre qui sera de taille 0px de width.

Les deux blocs div image1 et image2 auront une position absolue et un z-index permettant de nous assurez que l'image 1 soit bien placée en bas de l'image2. Le fait de bouger le slider augmentera la taille du bloc contenant ma deuxième image. Ce qui nous donne finalement l'effet rechercher.

La partie HTML


CODE HTML


<div id="slider"></div>
<div class="conteneur">
<div class="image1"></div>
<div class="image2"></div>
</div>

Notes

  Evaluez le tutorial (3 Votes)

3
0
0

Pour les questions ou d'éventuelles remarques, dirigez vous vers le forum.

Réagir sur ce tutoriel - [Jquery] Effet scanner sur photo

DERNIÈRES PUBLICATIONS DE OPEN-MOUTHED

En direct de open-mouthed.com