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 2015 - 15:57

    Rappel du premier message :



    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 2015 - 1:01, édité 4 fois
    Ailla
    FémininAge : 17Messages : 20

    le Jeu 21 Juil 2016 - 16:24

    Waw c'est trop beau merci pour le partage ! *w*
    SectumSempra
    FémininAge : 19Messages : 34

    le Jeu 11 Aoû 2016 - 20:41

    Merci Very Happy
    fascicularia
    MasculinAge : 48Messages : 181

    le Ven 16 Sep 2016 - 22:52

    Sympa; j'ai bien envie d'essayer par curiosité.
    Panzerblitz-1
    MasculinAge : 17Messages : 41

    le Sam 17 Sep 2016 - 10:13

    Lourd!
    Llariarith
    FémininAge : 32Messages : 217

    le Sam 17 Sep 2016 - 21:38

    C'est magnifique, merci :love:
    Onyx
    FémininAge : 23Messages : 2614

    le Sam 15 Oct 2016 - 22:01

    Il y a vraiment personne qui écoute le "c'est un LS à corriger, pas touche", right?

    Whatever, j'ai corrigé le tout, donc c'est validé et ce sera bientôt déplacé dans le Libre Service.



    P'tite
    FémininAge : 18Messages : 23

    le Dim 16 Oct 2016 - 4:30


    Un grand merci ! :)
    Aaron Silver
    MasculinAge : 23Messages : 26

    le Sam 12 Nov 2016 - 2:55

    Un immense merci pour ça !
    Contenu sponsorisé

    Aujourd'hui à 13:41


      La date/heure actuelle est Sam 10 Déc 2016 - 13:41