Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2292 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Faire un slide avec prototype ou autre

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Faire un slide avec prototype ou autre

n°2010868
creusois
Posté le 22-07-2010 à 00:00:45  profilanswer
 

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 ?

mood
Publicité
Posté le 22-07-2010 à 00:00:45  profilanswer
 

n°2010954
olivthill
Posté le 22-07-2010 à 11:44:19  profilanswer
 

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
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Faire un slide avec prototype ou autre

 

Sujets relatifs
Prototype Ajax.PeriodicalUpdaterPb hero slide jquery images
[C++] Prototype méthode membre de classe template[HTML/Css/Javascript] Listes liées avec la librairie prototype
surcharger une classe / prototype[JS - Prototype] Griser une div et la rendre inactive aux interactions
Prototype : équivalent de jQuery.find() avec prototype ?Jquery slide carousel
[JS ] Conflit ***.js avec prototype.js[Resolu] Pbm de "récupération de paramètres" avec Ajax.Request
Plus de sujets relatifs à : Faire un slide avec prototype ou autre


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR