AccueilRechercherS'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

    Youp
    Youp
    FémininAge : 24Messages : 579

    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
    Fame
    Fame
    MasculinAge : 29Messages : 240

    le Ven 6 Oct 2017 - 14:29

    Merci à vous Very Happy J'adore !
    allen walker
    allen walker
    FémininAge : 22Messages : 34

    le Mer 9 Mai 2018 - 10:10

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Mer 13 Nov 2019 - 18:54