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

Webdesign & Ergonomie Discussion :

Page comme Pinterest + cartes rotatives


Sujet :

Webdesign & Ergonomie

  1. #1
    Candidat au Club
    Inscrit en
    Décembre 2007
    Messages
    4
    Détails du profil
    Informations forums :
    Inscription : Décembre 2007
    Messages : 4
    Points : 2
    Points
    2
    Par défaut Page comme Pinterest + cartes rotatives
    Bonjour,

    Je souhaiterais savoir comment peut-on concevoir une page qui ressemble à Pinterest (pinterest like) où on voit bien un tableau avec plusieurs Pins (cartes) ces cartes s’affichent au fur et à mesure qu’on descend dans la page (comme facebook aussi). J’aimerai bien que l’effet de survol de la souris sur la carte soit une rotation de la carte (rotating card).

    Est-ce que c’est juste CSS ou Javascript ou les deux ensembles ?
    Qui peut me donner des exemples ou des idées pour pouvoir concevoir cette page ?

    Merci d’avance.

  2. #2
    Membre habitué Avatar de grafimages
    Homme Profil pro
    Webdesigner
    Inscrit en
    Novembre 2011
    Messages
    99
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Etats-Unis

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Novembre 2011
    Messages : 99
    Points : 170
    Points
    170
    Par défaut
    Bonjour,

    Pour le endless scrolling façon Pinterest, c'est du Js : http://www.javascriptquestions.com/question/show/id/35

    Pour un effet de rotation en rollover, c'est du CSS : http://designshack.net/articles/css/joshuajohnson-2/

  3. #3
    Candidat au Club
    Inscrit en
    Décembre 2007
    Messages
    4
    Détails du profil
    Informations forums :
    Inscription : Décembre 2007
    Messages : 4
    Points : 2
    Points
    2
    Par défaut
    Voici un exemple de ce qui est demandé: www.tunisiapromo.com

  4. #4
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    Bonjour,

    La console d'inspection du navigateur vous donne toutes les informations:

    - positionnement des blocs (Js) : http://masonry.desandro.com
    - effet rotatif des blocs (Css) : http://css3playground.com/flip-card.php
    - effet rotatif des blocs (Css) : http://davidwalsh.name/css-flip
    - fenêtre modale (Js) : http://fancyapps.com/fancybox/#examples
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  5. #5
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    59
    Détails du profil
    Informations personnelles :
    Localisation : Maroc

    Informations forums :
    Inscription : Mars 2008
    Messages : 59
    Points : 78
    Points
    78

  6. #6
    Candidat au Club
    Inscrit en
    Décembre 2007
    Messages
    4
    Détails du profil
    Informations forums :
    Inscription : Décembre 2007
    Messages : 4
    Points : 2
    Points
    2
    Par défaut
    J'ai aimé la fonction "Responsive" dans ce plugin. Merci Psykoz

Discussions similaires

  1. [HTML] Comment coder une page comme celle ci
    Par Downey JR- dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 29/05/2008, 14h17
  2. page comme menu fixe
    Par tenderstoune dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 10/07/2007, 09h05
  3. [PHP-JS] rafraîchir une page comme ça
    Par Lyna31 dans le forum Langage
    Réponses: 11
    Dernier message: 07/03/2007, 17h08
  4. Comment recharger une page comme si on fausiat un refresh
    Par pierrot10 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 22/12/2005, 22h15
  5. Ouvrir plusieurs pages comme homesite ou dreamweaver
    Par tipiweb dans le forum Composants VCL
    Réponses: 8
    Dernier message: 27/10/2005, 22h25

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