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

[messinmaisoui]

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

[webcrea]

Re : 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

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

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

[messinmaisoui]

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

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

[webcrea]

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.

[messinmaisoui]

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

Ok Merci encore !

[messinmaisoui]

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

[messinmaisoui]

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 .

[messinmaisoui]

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

[messinmaisoui]

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 ...