Faire un slide avec prototype ou autre

Faire un slide avec prototype ou autre - HTML/CSS - Programmation

Marsh Posté le 22-07-2010 à 00:00:45    

Bonjour à tous,
 
J'ai deux petites questions. Je cherche pour un site internet associatif à faire deux choses. Des sortes de slide. Je cherche simplement à trouver le nom que l'on donne à ce type de script ce qui me permettrait de faire quelques recherches dans google.
 
Je cherche à faire un slide d'actualité pour mon site. Le genre de cadre div à la mode que l'on retrouve sur le site www.football365.fr par exemple (cadre à gauche avec les 4 ou 5 news). Je pensais à un carrousel mais j'avoue ne trouver que des galeries photos un peu loin de ce que je souhaite (je souhaite une image, sa miniature en dessous et quand on passe la sourie un petit texte qui apparait, le tout cliquable pour ouvrir la page en question, la miniature elle permet de faire tourner le carrousel à l'actualité que l'on souhaite).
 
Quelqu'un aurait-il une idée du nom de ce type de script voir même un petit lien ?
 
Autre question. Je cherche à faire un autre type de slide, celui que l'on retrouve sur www.vignobleslandeau.fr je trouve qu'il a beaucoup de classe. C'est simplement faire glisser une image sur quelques centimètres. Même question, quelqu'un aurait une idée ?

Reply

Marsh Posté le 22-07-2010 à 00:00:45   

Reply

Marsh Posté le 22-07-2010 à 11:44:19    

Pour le premier site, le bandeau de vignettes est réalisé dans le fichier libs.shtml.
Ce fichier contient du code JQuery. Le JQuery est une bibliothèque de javascript.
Voici une partie du code :

var initTweenJNews = function(){
 posXstart = 0;
 posXend = 0;
 timerNews = 0;  
 var timerInterval = 10000;
 
 var width = jQuery('#maskUne').css('width');
 max = width.length - 2;
 width = width.substring(0, max);
 
 //foreach #articleVignette a > mouseover
 var tab = document.getElementById('articleVignetteUne').getElementsByTagName('a');
 
for(var i = 0; i < tab.length; i++)
{
  tab[i].index = i;
  tab[i].onmouseover = function(){
       var index = this.index;
        posXend = (width*(index)*-1);
      //Animation + décélération
     jQuery('#articleUne').animate({left: posXend - 20}, {queue: false, duration: 150}).animate({left: posXend }, {queue: false, duration: 250});
       posXstart = posXend;
       //Réinitiasation de nextNews
       clearInterval(timerNews);
      timerNews = setInterval('nextNews()', timerInterval);
  }    
}
 
 timerNews = setInterval("nextNews()", timerInterval);
 
}; function nextNews(){
     var size = jQuery('#articleUne').css('width');
     var width = jQuery('#maskUne').css('width');
   max = size.length - 2;
     size = size.substring(0, max);
     
   max = width.length - 2;
    width = width.substring(0, max);
   
   
   posXend -= width;
  if(posXend <= size*-1)
     posXend = 0;
       jQuery('#articleUne').animate({left: posXend -20}, {queue: false, duration: 150}).animate({left: posXend}, {queue: false, duration: 250});
     posXstart = posXend;
 };


Donc, l'effet visuel intéressant se base sur .animate() du JQuery. Voir des explications et des exemples à http://api.jquery.com/animate/
 
Pour le deuxième site, je ne vois pas bien où se trouve le slide. Je vois une animation dans un bandeau, et cela semble être du flash, voir http://fr.wikipedia.org/wiki/Adobe_Flash
 

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed