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
    avatar
    Youp
    FémininAge : 22Messages : 574

    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
    avatar
    Ailla
    FémininAge : 18Messages : 28

    le Jeu 21 Juil 2016 - 16:24

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

    le Jeu 11 Aoû 2016 - 20:41

    Merci Very Happy
    fascicularia
    MasculinAge : 49Messages : 181

    le Ven 16 Sep 2016 - 22:52

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

    le Sam 17 Sep 2016 - 10:13

    Lourd!
    avatar
    Llariarith
    FémininAge : 32Messages : 217

    le Sam 17 Sep 2016 - 21:38

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

    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.



    avatar
    P'tite
    FémininAge : 19Messages : 26

    le Dim 16 Oct 2016 - 4:30


    Un grand merci ! :)
    avatar
    Aaron Silver
    MasculinAge : 24Messages : 26

    le Sam 12 Nov 2016 - 2:55

    Un immense merci pour ça !
    avatar
    Jull421
    FémininAge : 22Messages : 139

    le Sam 31 Déc 2016 - 18:35

    Merci <3



    avatar
    lala zhang
    FémininAge : 26Messages : 336

    le Mar 10 Jan 2017 - 18:55

    Merci pour le codage il est super c'est pile ce que je cherchais. Encore merci.
    avatar
    Draly
    FémininAge : 24Messages : 86

    le Lun 30 Jan 2017 - 10:23

    Coup de cœur *.* Magnifique, en voyant des codes comme ça, on a envie de s'y mettre et apprendre.^^
    avatar
    Euterpe
    FémininAge : 31Messages : 285

    le Lun 6 Mar 2017 - 17:39

    merci beaucoup c'est superbe
    avatar
    Nasträlya
    FémininAge : 22Messages : 121

    le Lun 6 Mar 2017 - 18:16

    Ce code est génial cheers :love:



    :friends:

    Tueuse de yeux de Mère en Fille depuis 1875 :angry:
    avatar
    Sweet Angel
    FémininAge : 34Messages : 145

    le Dim 19 Mar 2017 - 11:08

    Oh trop fort, j'adore, merci!
    avatar
    RileyBleuet
    FémininAge : 31Messages : 3

    le Jeu 6 Avr 2017 - 1:33

    Merci ~
    avatar
    Anastasia
    FémininAge : 16Messages : 11

    le Sam 8 Avr 2017 - 20:16

    Wow, c'est super beau, j'adore ce que tu as fait je te l'emprunte :3
    avatar
    Eirhinn
    FémininAge : 25Messages : 9

    le Lun 22 Mai 2017 - 10:59

    C'est tout à fait ce que j'essayais de faire sans y parvenir, donc un grand merci !
    avatar
    Elilith
    FémininAge : 19Messages : 72

    le Jeu 25 Mai 2017 - 16:31

    Merci pour ce superbe libre service :)
    avatar
    Parrot
    FémininAge : 26Messages : 9

    le Ven 26 Mai 2017 - 10:30

    Magnifique, merci pour le partage :lovebomb:
    avatar
    Cheshire Cat
    FémininAge : 19Messages : 864

    le Mer 31 Mai 2017 - 15:21

    Le libre service a été modifié en raison d'une ponctuation manquante qui provoque des bugs et empêche le libre service d'être fonctionnel.

    Bonne journée :hudada:



    avatar
    Cannelle Cannelle
    MasculinAge : 18Messages : 23

    le Sam 3 Juin 2017 - 19:25

    Oh c'est génial comme rendu ! :aww: :aww: :aww:
    avatar
    ¨Lame Spirit
    FémininAge : 19Messages : 13

    le Dim 4 Juin 2017 - 16:47

    MAGNIFIQUE
    avatar
    loulou100
    FémininAge : 21Messages : 9

    le Dim 2 Juil 2017 - 16:35

    C'est magnifique ! Merci du partage :)
    Contenu sponsorisé


      La date/heure actuelle est Dim 23 Juil 2017 - 12:40