Mettre du texte sur un slider (template responsive)

Réduire
Ce sujet est fermé.
X
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Mettre du texte sur un slider (template responsive)

    Bonjour,

    Prenons un exemple, dans un template comme ci-dessous.
    Prenons la partie slideshow.

    http://www.templatemonster.com/demo/51764.html

    1) Imaginons que je veuille rajouter un article et/ou du texte sur plusieurs lignes SUR le slideshow mais sans inclure ce texte dans l'image.
    => L'interêt étant que ce texte qui viendrait se superposer comporterait des balises h1, h2 ... et informations pour le référencement ...

    Est-ce facile à réaliser sachant que tout dans un template comme le 51764 tout peut se redimensionner (responsive) et que le texte ne doit bien sûr pas se décaler ou déborder par rapport à l'image ?
    En fait je voudrais éviter de taper du texte sous photoshop dans l'image directement

    2) Dans un 2ème temps, Je voudrais aussi rajouter sur ce slideshow une petite animation style des lettres qui tombent du haut de l'écran et viennent former des mots
    Et bref une question plus générale, peut-on superposer des modules dans une même position et comment ?

    Merci pour vos retours et orientations !

    Laurent
    Solidaire avec les dinosaures

  • #2
    Re : Mettre du texte sur un slider (template responsive)

    Envoyé par messinmaisoui Voir le message
    Bonjour,

    Prenons un exemple, dans un template comme ci-dessous.
    Prenons la partie slideshow.



    1) Imaginons que je veuille rajouter un article et/ou du texte sur plusieurs lignes SUR le slideshow mais sans inclure ce texte dans l'image.
    => L'interêt étant que ce texte qui viendrait se superposer comporterait des balises h1, h2 ... et informations pour le référencement ...

    Est-ce facile à réaliser sachant que tout dans un template comme le 51764 tout peut se redimensionner (responsive) et que le texte ne doit bien sûr pas se décaler ou déborder par rapport à l'image ?
    En fait je voudrais éviter de taper du texte sous photoshop dans l'image directement
    bt_contentslider est vraiment très bien pour ça

    xtc propose un slider où tu fais monter ce que tu veux dedans mais il faut comprendre leur logique et coder un chouille

    Envoyé par messinmaisoui Voir le message
    2) Dans un 2ème temps, Je voudrais aussi rajouter sur ce slideshow une petite animation style des lettres qui tombent du haut de l'écran et viennent former des mots
    Et bref une question plus générale, peut-on superposer des modules dans une même position et comment ?
    Tu peux jouer avec les css et un peu de js, l'idée étant de définir 2 div (le slide et l'effet de chute des lettres), tu peux le faire dans un module perso.
    Dans la css tu définies 2 style par l'id et en js, tu repères la position de la première div que tu affectes à la deuxième

    Avec un z-index approprié pour chacune tu devrais les superposer sans problème

    Pour rester responsive, tu devras ajouter un event à ton js pour qu'à chaque fois que la fenêtre est redimensionnée, il aille affecté la nouvelle position ainsi que les nouvelles dimensions de la 2ème div
    Christophe
    http://www.webcrea.fr

    Commentaire


    • #3
      Re : Mettre du texte sur un slider (template responsive)

      Merci Webcrea, je vais tâcher de digérer ça et je reviens ...
      Solidaire avec les dinosaures

      Commentaire


      • #4
        Re : Mettre du texte sur un slider (template responsive)

        Même mieux, puisque l'effet est superposé à la première div, tu a juste à affecter l'effet (js) à cette première div sans passer par une deuxième div comme je le suggérais précédemment.
        Christophe
        http://www.webcrea.fr

        Commentaire


        • #5
          Re : Mettre du texte sur un slider (template responsive)

          Ok Merci encore !
          Solidaire avec les dinosaures

          Commentaire


          • #6
            Re : Mettre du texte sur un slider (template responsive)

            Re-bonjour,
            Je reviens sur mon deuxième point, finalement je compte
            faire une animation js dans un module à part dans un premier temps ...

            Je suis en Joomla 3

            L'idée étant d'utiliser textillate dans un module personnalisé
            =>
            http://jschr.github.io/textillate/

            Apparemment ça devait marcher tout seul

            1) J'ai donc récupéré animate.css que j'ai placé dans la partie css de mon template
            jquery.lettering.js et jquery.textillate.js dans la partie js de mon template
            Ensuite modifié l'index.php de mon template pour tenir compte de ce .css + les 2 .js
            Note : pour jquery nécessaire j'ai déjà celui-là qui se charge (v1.11.1)
            <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
            2) J'ai créé un module personnalisé et autorisé l'exécution de javascript au niveau de JCE
            Voilà le contenu de mon html personnalisé
            <script type="text/javascript">
            // <![CDATA[
            $(function() {
            $('.tlt').textillate();
            })
            // ]]>
            </script>
            <h1 class="tlt" data-in-effect="rollIn">Ok doc</h1>

            3) Je teste, mon titre "Ok doc" apparait bien mais rien ne se passe !?

            J'ai alors testé autrement, j'ai pris tout ces fichiers et mis dans un répertoire
            puis lancé le test.html suivant mais aussi sans aucun effet ... (en local comme sur serveur distant)
            <!DOCTYPE html>
            <html>
            <head>
            <meta charset="utf-8" />
            <link href="animate.css" rel="stylesheet">
            <script src="jquery.lettering.js"></script>
            <script src="jquery-1.11.1.js"></script>
            <script src="jquery.textillate.js"></script>
            </head>
            <body>
            <script>
            $(function () {
            $('.tlt').textillate();
            })
            </script>
            <h1 class="tlt" data-in-effect="rollIn">Ok doc</h1>
            </body>
            </html>
            Si quelqu'un connait textillate et/ou voit une Grosse erreur, merci de me la signaler

            Laurent
            Dernière édition par messinmaisoui à 08/12/2014, 15h17
            Solidaire avec les dinosaures

            Commentaire


            • #7
              Re : Mettre du texte sur un slider (template responsive)

              Textillate fonctionne enfin !

              Des parenthèses, crochets qui manquaient ...
              Des appels .js dans le désordre ...

              Et enfin il pleut ... des caractères ... sur le Lorraine !
              une fois n'est pas coutume ;-)

              Je close le topic dans la foulée .
              Solidaire avec les dinosaures

              Commentaire


              • #8
                Re : Mettre du texte sur un slider (template responsive)

                Je rouvre le sujet car je sèche encore sur le point suivant ...

                Est-ce que quelqu'un aurait un exemple de Javascript ou un lien qui ferait ou se rapprocherait de ceci
                =>
                Pour rester responsive, tu devras ajouter un event à ton js pour qu'à chaque fois que la fenêtre est redimensionnée, il aille affecté la nouvelle position ainsi que les nouvelles dimensions de la 2ème div
                Voici pour l'instant mon script affichant un texte "animé" dans un module personnalisé mis dans une position "showcase"
                et je voudrais caler ce texte "animé" dans un autre module (diaporama) dans la même position ...
                sachant que tout dans mon template "responsive" se redimensionne

                <div id="animfais">&nbsp;</div>
                <script type="text/javascript">
                var montexte = "Mon texte en environnement responsive ";
                maDiv = document.createElement("div");
                maDiv.innerHTML = montexte;
                maDiv.className = 'tlt';
                document.getElementById("animfais").appendChild(ma Div);
                jQuery(document).ready(function($) {
                $('.tlt').textillate({
                loop: true,
                minDisplayTime: 10000,
                in : {
                effect: 'fadeInDown',
                shuffle: true,
                delayScale: 1.5,
                delay: 100
                },
                out: {

                effect: 'rollOut',
                shuffle: true,
                delayScale: 1.5,
                delay: 50
                }
                });
                })
                </script>
                Toute indication sera la bienvenue ...
                Merci d'avance
                Solidaire avec les dinosaures

                Commentaire


                • #9
                  Re : Mettre du texte sur un slider (template responsive)

                  Finalement j'ai changé de stratégie et modifié directement le code dans camera.js pour insérer mon texte sautillant en vertical à la place du titre de chaque slide (champ camera caption)
                  L'idée étant de profiter des fonctions internes au slider en matière de repositionnement / redimensionnement.

                  Bon ça le fait maintenant ...
                  Solidaire avec les dinosaures

                  Commentaire

                  Annonce

                  Réduire
                  Aucune annonce pour le moment.

                  Partenaire de l'association

                  Réduire

                  Hébergeur Web PlanetHoster
                  Travaille ...
                  X