IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

RefineSlide : un caroussel d'images responsive en CSS3


Sujet :

JavaScript

  1. #1
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Consultant technique
    Inscrit en
    mars 2011
    Messages
    3 180
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Consultant technique

    Informations forums :
    Inscription : mars 2011
    Messages : 3 180
    Points : 20 065
    Points
    20 065
    Par défaut RefineSlide : un caroussel d'images responsive en CSS3
    Créer un caroussel d'images responsives
    En CSS3 et avec fallback JavaScript

    RefineSlide vous permet de créer un caroussel d'images responsive.

    En effet, ce script JavaScript utilise les transitions et les transformations CSS3 pour afficher un caroussel d'images original, attractif et personnalisé.
    Il utilise également un fallback JavaScript pour le fondu.

    Ce script est très léger et Open Source.
    Il supporte les miniatures, les légendes et possède également une API.
    Le caroussel ainsi créé propose des images responsive, qui s'adapteront à la navigation sur mobile.

    RefineSlide est supporté sur tous les navigateurs récents (IE7+).

    Télécharger RefineSlide.

    Source : http://alexdunphy.github.com

    Et vous ?

    Que pensez-vous de ce caroussel ?
    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  2. #2
    Membre éclairé
    Profil pro
    Inscrit en
    septembre 2009
    Messages
    1 701
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : septembre 2009
    Messages : 1 701
    Points : 848
    Points
    848
    Par défaut
    C'est assez impressionnant, on dirait que ça été fait en flash.

    Vous savez quelle technique il utilise pour faire les fondus en découpant les images ?
    => l'image est dupliquée x fois dans x div puis les div sont déplacés pour faire l'animation ?

  3. #3
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    novembre 2012
    Messages
    3 344
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : novembre 2012
    Messages : 3 344
    Points : 9 863
    Points
    9 863
    Par défaut
    @boboss123: Non je dirais simplement transitions 3D CSS3 On peut en faire des choses maintenant en CSS :
    http://jsdo.it/sylvain.pollet.villard/bAYt/fullscreen
    Par contre il indique le support pour IE7, là j'imagine que les transitions doivent être moins belles

    Plug-in très classe, je m'en servirais sûrement. Pas mal de transitions : Transition type ('random', 'cubeH', 'cubeV', 'fade', 'sliceH', 'sliceV', 'slideH', 'slideV', 'scale', 'blockScale', 'kaleidoscope', 'fan', 'blindH', 'blindV') ; attention à ce que ça ne devienne pas une usine à gaz
    One Web to rule them all

Discussions similaires

  1. [Plugin] jQuery Picture : passez aux images "responsive" en douceur
    Par FirePrawn dans le forum jQuery
    Réponses: 5
    Dernier message: 21/11/2012, 15h07
  2. [Article] Créer des images rondes en CSS3
    Par ornitho13 dans le forum Publications (X)HTML et CSS
    Réponses: 2
    Dernier message: 23/03/2011, 11h48
  3. [CSS] [CSS3] des images rondes en CSS3
    Par ornitho13 dans le forum Contribuez
    Réponses: 0
    Dernier message: 18/08/2010, 19h55
  4. [CSS] un slider d'image uniquement en CSS3
    Par ornitho13 dans le forum Contribuez
    Réponses: 3
    Dernier message: 13/08/2010, 13h49

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo