AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Un livre animé à glisser où vous le voulez

    Partagez
    Youp
    FémininAge : 21Messages : 498

    le Sam 7 Nov - 15:57



    Bonjour bonjour, après un looooong oubli, je viens enfin vous proposer ce petit livre animé où vous pourrez mettre votre contexte ou tout autre texte. Il s'agit d'un livre où vous pouvez tourner les pages.

    Voilà l'aperçu (si vous ne le voyez pas, actualisez simplement la page) :


    Je tiens à préciser que je me suis appuyée sur un tutoriel en anglais pour le réaliser.

    Ce livre nécessite une page html, une page qui sera hébergée sur un forum donc.


    Il faut donc créer une page html pour héberger notre livre. Si vous voulez que celui ci soit visible dans un message, il faudra l'herberger via une iframe. Vous êtes perdus ? Allons y petit à petit.

    PS: N'oubliez pas de créditer Never Utopia dans vos crédits ou sur la page où vous mettez ce code, avec un petit lien s'il vous plaît. Vous n'êtes pas obligés de mettre mon nom, juste un petit lien pour N-U suffira ^^
    De plus si vous l'utiliser, penser à indiquez que si rien ne s'affiche, il suffit d'actualiser.


    Créer une page html

    Allez dans : Modules -> Gestion des pages html -> Création en mode avancé

    Le code correspondant au livre est celui-ci :
    Code:
     <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>Titre de la Page</title>
        <base target="_blank" />
        <style type="text/css">
          #myBook {
          display:none;
         position:absolute;
          left : 0px;
          top:0px;
          width: 328px;
          height:533px;
          }
          .imBookPage {
          position:absolute;
          left:0px;
          top:0px;
          width: 328px;
          height:533px
          overflow:hidden;
          }
        </style>
      <script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/jquery-142.js"></script>
        <script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/jqueryimBookFlip-06.js"></script>
        <script type="text/javascript">$(document).ready( function() {  $("#myBook").imBookFlip({      page_class: 'imBookPage'  });});</script>  
      </head>
      <body>                                            
    <div id="myBook" style="display:none;">
                                              
     <div class="imBookPage" style="background: url(http://img11.hostingpics.net/pics/585593couv.png)">
                  
     <div style="height: 533px; color: peru; display:table-cell; vertical-align: middle; font-size: 40px; font-family: Times New Roman ; text-align: center; width : 328px;">
           Memory      
     </div>
                      
     </div>
                                              
     <div class="imBookPage" style="background: url(http://img15.hostingpics.net/pics/486457couvdos.png)">
          <br /> <img src="http://img11.hostingpics.net/pics/431017vieillephoto2.png" />                      
     </div>
                                              
     <div class="imBookPage" style="background: url(http://img11.hostingpics.net/pics/234920livre2.png)">
          <br />          
     <div style=" float:left; margin : 25px;  text-align: justify; font-size: 14px; color: saddlebrown;">
              
     <div style="  font-size:300%; float:left; margin: 2px; color: peru;">
          Q      
     </div>
         uod si rectum statuerimus vel concedere amicis, quidquid velint, vel impetrare ab iis, quidquid velimus, perfecta quidem sapientia si simus, nihil habeat res vitii; sed loquimur de iis amicis qui ante oculos sunt, quos vidimus aut de quibus memoriam accepimus, quos novit vita communis. Ex hoc numero nobis exempla sumenda sunt, et eorum quidem maxime qui ad sapientiam proxime accedunt.<br /><br />Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit. <br /><br />Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum.      
     </div>
                              
     </div>
                                              
     <div class="imBookPage" style="background: url(http://img15.hostingpics.net/pics/548825livre2dos.png)">
                
     <div style=" float:left; margin : 25px;  text-align: justify; font-size: 14px; color: saddlebrown;">
      Contenu   
     </div>
                            
     </div>
                                              
     <div class="imBookPage" style="background: url(http://img11.hostingpics.net/pics/234920livre2.png)">
                    
     <div style=" float:left; margin : 25px;  text-align: justify; font-size: 14px; color: saddlebrown;">
      Contenu   
     </div>
                            
     </div>
                                            
     <div class="imBookPage" style="background: url(http://img15.hostingpics.net/pics/548825livre2dos.png)">
                      
      <div style=" float:left; margin : 25px;  text-align: justify; font-size: 14px; color: saddlebrown;">
      Contenu   
     </div>
                
     </div>
                                              
     <div class="imBookPage" style="background: url(http://img11.hostingpics.net/pics/234920livre2.png)">
                    
      <div style=" float:left; margin : 25px;  text-align: justify; font-size: 14px; color: saddlebrown;">
      Contenu   
     </div>
                      
     </div>
                          
    </div>
    </body>
    </html>

    Explication du code  

    Code:

        <style type="text/css">
          #myBook {
          display:none;
         position:absolute;
          left : 0px;
          top:0px;
          width: 328px;
          height:533px;
          }
          .imBookPage {
          position:absolute;
          left:0px;
          top:0px;
          width: 328px;
          height:533px
          overflow:hidden;
          }
        </style>
      <script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/jquery-142.js"></script>
        <script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/jqueryimBookFlip-06.js"></script>
        <script type="text/javascript">$(document).ready( function() {  $("#myBook").imBookFlip({      page_class: 'imBookPage'  });});</script>  
    Ce passage correspond au javascript utilisé pour faire tourner les pages, on y associe un style permettant de modifier la position du livre dans la page html (ici simplement en haut à gauche, ce qui permet de faire une jolie iframe. Si jamais vous voulez mettre un lien qui amène à votre page html, avec un fond en dessous du livre imaginons, modifier les valeurs de positionnement rendra le tout plus joli. En centrant le livre par exemple.) et de modifier la taille (très important si vous voulez changer d'image, en prendre une plus petite par exemple). Mybook c'est votre livre en entier, imbookpage ce sont vos pages.

    Code:
    <div class="imBookPage" style="background: url(http://img11.hostingpics.net/pics/585593couv.png)">
    Blabla
    </div>
    Ceci correspond à une page, ici la couverture. Elle a une image différente des autres. Si vous souhaitez changer d'image, modifiez simplement l'url ici présente.

    Code:
    <div style="height: 533px; color: peru; display:table-cell; vertical-align: middle; font-size: 40px; font-family: Times New Roman ; text-align: center; width : 328px;">
           Memory      
     </div>
    Le titre de mon livre, je vous laisse le soin d'analyser les valeurs et de les modifier si vous voulez un autre résultat. Juste une chose: le "display table-cell et vertical-align middle" permet d'aligner verticalement le titre.

    Code:
    <img src="http://img11.hostingpics.net/pics/431017vieillephoto2.png" />  
    Une image sur la page du livre.  

    Code:
    <div style=" float:left; margin : 25px;  text-align: justify; font-size: 14px; color: saddlebrown;"> mise en forme du texte contenu dans la page </div>
    La mise en forme que j'ai choisi pour mon texte contenu dans la page. Il faut l'ajouter dans chaque imbookpage choisie en prenant grand soin de la fermer avant de fermer l'imbookpage.

    Code:
    <div style="  font-size:300%; float:left; margin: 2px; color: peru;">
          Q      
     </div>
    Une lettrine, je vous renvoie au tutoriel de Kazuya

    Faire une iframe
    Vous voulez insérer ce livre dans un message ? Je vous renvoie au très bon tutoriel de Cheshire cat

    Allez y pour regarder les explications ! En somme ça nous donne avec mon exemple:
    Code:
    <iframe src="LIEN DE VOTRE PAGE HTML" frameborder="0" scrolling="no" style="width: 660px; height: 533px; display: block; margin: auto;"></iframe>


    Dernière édition par Youp le Mer 2 Déc - 1:01, édité 4 fois
    Cruelly
    FémininAge : 23Messages : 2401

    le Sam 7 Nov - 16:14

    Coucou juste pour te signaler qu'on ne voie pas le rendu ^^
    Maintenant je le voie... c'est le code sous Hide là je les voyaient sans avoir poster :)



    Dernière édition par Cruelly le Sam 7 Nov - 16:27, édité 2 fois



    Construction d'un forum en cours ! Vous pouvez me donner votre avis ou m'apporter votre soutiens dans mon WIP :hug:
    Youp
    FémininAge : 21Messages : 498

    le Sam 7 Nov - 16:21

    Aaaaaaah oui j'avais oublié de mettre des hide haha, je le fais de suite ^^



    Cruelly
    FémininAge : 23Messages : 2401

    le Sam 7 Nov - 16:23

    ^^ Juste une question de principe faut pas non plus que tout le monde puisse partir avec ton code :)  
    En passant, ton code est magnifique je vais surement m'en servir sur mon forum merci beaucoup <3

    EDIT - Je viens de tester le code sur mon forum de test il marche super bien <3



    Construction d'un forum en cours ! Vous pouvez me donner votre avis ou m'apporter votre soutiens dans mon WIP :hug:
    Kelalin
    FémininAge : 24Messages : 1402

    le Sam 7 Nov - 16:42

    Merci pour le partage ! ☆*:.。. o(≧▽≦)o .。.:*☆
    SvenO
    MasculinAge : 22Messages : 76

    le Dim 15 Nov - 14:27

    Merci pour le partage ! :)



    Patdrue
    FémininAge : 26Messages : 143

    le Dim 15 Nov - 17:58

    Oh. My.GOD! je viens d'avoir un punaise de coup de foudre là!! ♥ merci
    Angie H.-Carter
    FémininAge : 33Messages : 670

    le Mar 17 Nov - 18:27

    j'aimerais bien voir le rendu et merci ^^



    Your my brillant! You shine into the darkness and you guide me in my  life with no fear. I love you so much and i don't want to loose you in my heart. You will be my love forerver. You and me it's like the sky and the sea...This is LIFE!
    Kabylie
    FémininAge : 25Messages : 32

    le Mar 17 Nov - 18:34

    Whaaaaa ça m’intéresse :siffle:
    Eye in the dark
    FémininAge : 17Messages : 8

    le Mer 18 Nov - 12:36

    C'est la première fois que je vois ça, c'est carrément original ! :love:
    Je te le pique :innocent: :siffle:
    Démo
    FémininAge : 17Messages : 35

    le Jeu 19 Nov - 18:13

    Tellement original, merci!♥
    Elocha
    FémininAge : 66Messages : 255

    le Jeu 19 Nov - 21:48

    c'est vraiment super :)
    merci



    eLoChA.
    Kanra
    FémininAge : 16Messages : 113

    le Lun 23 Nov - 20:38

    Merci !
    Youp
    FémininAge : 21Messages : 498

    le Mar 1 Déc - 22:48

    De rien Very Happy J'ai complètement oublié le crédit alors n'oubliez pas de créditer Never Utopia dans vos crédits ou sur la page où vous mettez ce code, avec un petit lien s'il vous plaît. Vous n'êtes pas obligés de mettre mon nom, juste un petit lien pour N-U suffira ^^



    Rozenbrez
    FémininAge : 25Messages : 1175

    le Mar 1 Déc - 23:11

    Comme je n'arrive pas à voir le rendu, je vais t'emprunter le code, car l'idée m'intrigue énormément. Merci pour ton partage. :hug2:

    Edition : En faite on voit le rendu en postant. Tu l'a donc mis sous hide. Se serais mieux de ne pas le mettre sous ces balises pour que tout le monde puisse se faire une idée avant de prendre le code.

    Très beau au passage! L'idée est très sympathique et en remaniant le graphisme on peut l'adapter pour tout! Chapeau bas!!



    Youp
    FémininAge : 21Messages : 498

    le Mar 1 Déc - 23:41

    Je ne l'ai pas mis sous hide, il suffit d'actualiser ^^



    Lakia
    FémininAge : 18Messages : 83

    le Mer 2 Déc - 16:15

    Merci !! :)
    Fyraliel
    FémininAge : 25Messages : 1297

    le Mer 2 Déc - 16:54

    Youp merci pour le partage ce LS est vraiment cool, c'est sympa de l'avoir partagé après le défi ^^



    Merci Onyx
    kinai0107
    MasculinAge : 40Messages : 15

    le Ven 4 Déc - 20:41

    merci
    Peeves Leviosa
    MasculinAge : 15Messages : 14

    le Jeu 31 Déc - 12:39

    Oh c'est vraiment top! Merci c:
    Silver Angel
    MasculinAge : 101Messages : 72

    le Mer 6 Jan - 10:26

    Partage intéressant! Merci :)
    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Sam 5 Mar - 11:02

    Hello Youp et encore une fois désolée du retard!

    J'ai le même problème avec ce LS que l'autre, c'est à dire que ta page HTML n'en est pas une. Du coup, est-ce que je peux te demander de rajouter ce qu'il faut? Tu pourras d'ailleurs mettre le crédit comme ça ^^

    Merci d'avance! =3



    Laora || Peter
    FémininAge : 25Messages : 181

    le Lun 30 Mai - 1:35

    Merci pour le partage ♥



    Linaewen
    FémininAge : 24Messages : 190

    le Lun 20 Juin - 4:59

    Wow merci pour ce code, c'est super beau :o
    Bilandie
    FémininAge : 20Messages : 15

    le Lun 20 Juin - 13:27

    C'est vraiment trop beau!!! d*^*b merci beaucoup!!! *w* je pense que je vais l'utiliser aussi!
    Contenu sponsorisé

    Aujourd'hui à 21:24


      La date/heure actuelle est Dim 4 Déc - 21:24