AccueilMembres connectés récemment
[AWESOMEBB] Effet de typewriting sur la bannière / header [AwesomeBB]
Page 1 sur 1 • Partagez
- Noxys
-
Noxys Mer 28 Juil 2021 - 9:44
- Version du forum :AWESOMEBB
- Templates modifiés :oui
- Navigateur :Chrome
Salut à toutes et à tous !
Après une petite erreur de parcours et un post dans la mauvaise section, me revoici avec toutes les informations en tête pour ne pas me tromper de nouveau, hé hé hé ! ^^
Alors ! Comme je l'avais mentionné, je souhaiterais bénéficier de vos lumières en matière de codage pour créer quelque chose qui, je l'espère, sublimera mon futur forum !
Voici le forum en question (forum test) : https://isomnos-test.forumactif.com/
Comme vous pouvez le constater en arrivant dessus, nous avons la partie bannière sur laquelle nous pouvons voir une ou plusieurs images (je dois d'ailleurs encore corriger le code permettant de générer une bannière aléatoire). Ce que je souhaiterais faire, c'est d'ajouter ou de superposer sur cette bannière un effet de machine à écrire, ou typewriting, avec un texte plus ou moins long. J'ai checké un peu sur le forum et sur d'autres des astuces, mais je crois qu'il y a des notions qui m'échappent complètement, ou alors des manipulations que je n'ai pas saisies, sachant que j'ai commencé à faire ça hier vers 23h30 / minuit, autant vous dire que je n'étais pas en pleine possession de mes compétences ! xD
Au niveau des éléments modifiés sur le forum, j'ai déjà commencé à éditer :
>> la feuille de style pour y ajouter, entre autres, les éléments relatifs au "header-banner" (notamment la hauteur pour afficher une image plus grande),
>> et le overall_header pour ajouter la police d'écriture permettant de donner le style au titre du forum "iSomnos", pour rendre le header cliquable et pour ajouter le bouton menant au Discord.
Voilou ! Je ne sais pas si j'ai donné toutes les informations requises... Si j'ai oublié des choses, n'hésitez pas à me le dire : je compléterai ! :)
Bonne journée à vous, et merci d'avance pour vos retours !
Noxys ~ / Stéphane
Après une petite erreur de parcours et un post dans la mauvaise section, me revoici avec toutes les informations en tête pour ne pas me tromper de nouveau, hé hé hé ! ^^
Alors ! Comme je l'avais mentionné, je souhaiterais bénéficier de vos lumières en matière de codage pour créer quelque chose qui, je l'espère, sublimera mon futur forum !
Voici le forum en question (forum test) : https://isomnos-test.forumactif.com/
Comme vous pouvez le constater en arrivant dessus, nous avons la partie bannière sur laquelle nous pouvons voir une ou plusieurs images (je dois d'ailleurs encore corriger le code permettant de générer une bannière aléatoire). Ce que je souhaiterais faire, c'est d'ajouter ou de superposer sur cette bannière un effet de machine à écrire, ou typewriting, avec un texte plus ou moins long. J'ai checké un peu sur le forum et sur d'autres des astuces, mais je crois qu'il y a des notions qui m'échappent complètement, ou alors des manipulations que je n'ai pas saisies, sachant que j'ai commencé à faire ça hier vers 23h30 / minuit, autant vous dire que je n'étais pas en pleine possession de mes compétences ! xD
Au niveau des éléments modifiés sur le forum, j'ai déjà commencé à éditer :
>> la feuille de style pour y ajouter, entre autres, les éléments relatifs au "header-banner" (notamment la hauteur pour afficher une image plus grande),
>> et le overall_header pour ajouter la police d'écriture permettant de donner le style au titre du forum "iSomnos", pour rendre le header cliquable et pour ajouter le bouton menant au Discord.
Voilou ! Je ne sais pas si j'ai donné toutes les informations requises... Si j'ai oublié des choses, n'hésitez pas à me le dire : je compléterai ! :)
Bonne journée à vous, et merci d'avance pour vos retours !
Noxys ~ / Stéphane
Milouze14 aime ce message
- Milouze14
Fondateur -
Milouze14 Mer 28 Juil 2021 - 16:04
Hello Stéphane,
tu as cette astuce qui pourrait te convenir :
https://www.milouze14.com/t28846-toutes-versions-afficher-un-texte-dactylographie#552972
Il suffit de mettre le code html dans le template overall_header
Voir le résultat sur mon fofo de tests:
https://milouze.1fr1.net/
tu as cette astuce qui pourrait te convenir :
https://www.milouze14.com/t28846-toutes-versions-afficher-un-texte-dactylographie#552972
Il suffit de mettre le code html dans le template overall_header
Voir le résultat sur mon fofo de tests:
https://milouze.1fr1.net/
- Noxys
-
Noxys Mer 28 Juil 2021 - 17:32
Hello Phil! :)
Merci pour ton retour, j'avais en effet vu le lien menant à l'astuce sur le forum, mais je n'étais pas parvenu à la mettre en route !
J'ai toutefois trouvé un autre code permettant de réaliser cet effet et, ô joie, sans recourir à du javascript : https://codepen.io/geoffgraham/pen/jrWwWM
Le souci, c'est que je n'arrive pas à l'installer sur le forum. J'ai bien le texte d'affiché, les informations, etc., mais l'effet ne fonctionne pas...
Est-ce qu'il est possible de l'utiliser tel quel, ou bien dois-je impérativement passer par un script pour lancer l'effet ?
Merci d'avance ! :)
Merci pour ton retour, j'avais en effet vu le lien menant à l'astuce sur le forum, mais je n'étais pas parvenu à la mettre en route !
J'ai toutefois trouvé un autre code permettant de réaliser cet effet et, ô joie, sans recourir à du javascript : https://codepen.io/geoffgraham/pen/jrWwWM
Le souci, c'est que je n'arrive pas à l'installer sur le forum. J'ai bien le texte d'affiché, les informations, etc., mais l'effet ne fonctionne pas...
Est-ce qu'il est possible de l'utiliser tel quel, ou bien dois-je impérativement passer par un script pour lancer l'effet ?
Merci d'avance ! :)
Milouze14 aime ce message
- Milouze14Fondateur
-
Milouze14 Mer 28 Juil 2021 - 19:01
Re Stéphane,
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Il faut décocher la case :Optimiser votre CSS
C'est le prix a payer
Par contre, tu peux supprimer ce style:
Et ajouter:
Pour centrer l'animation .
Voir l'animation :
https://milouze.1fr1.net/
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Il faut décocher la case :Optimiser votre CSS
C'est le prix a payer
Par contre, tu peux supprimer ce style:
- Code:
body {
background: #333;
padding-top: 5em;
display: flex;
justify-content: center;
}
Et ajouter:
- Code:
.typewriter{text-align: center;}
Pour centrer l'animation
.Voir l'animation :
https://milouze.1fr1.net/
- Noxys
-
Noxys Jeu 29 Juil 2021 - 15:34
Hello there! :)
J'ai une trouvé une solution alternative à mon problème : mettre le CSS et le HTML sur une page HTML annexe au forum et l'intégrer sur la bannière via une iframe.
C'est un moyen, entre autres, de ne pas décocher la case optimiser mon CSS !
Pour ceux que ça intéresse, voici comment j'ai procédé :
1) J'ai crée une page annexe via le menu "Gestion des pages HTML" que j'ai découpée en deux parties, la première contenant le CSS et la seconde contenant les balises html
(voici le contenu en question) :
2) J'ai ensuite importé dans le template "overall_header" la page en utilisant la balise "iframe", juste après la div associée à la bannière :
Et... j'ai fini par bidouiller un peu à droite à gauche avec les différentes données du CSS pour faire correspondre l'idée que j'avais au résultat que je souhaitais !
Voilou, je ne sais pas si mes explications étaient très claires, néanmoins j'espère que ça permettra d'aider des personnes qui seraient, tout comme moi, un peu perdus et perplexes !
Sujet résolu, donc ! Merci beaucoup ! ^_^
J'ai une trouvé une solution alternative à mon problème : mettre le CSS et le HTML sur une page HTML annexe au forum et l'intégrer sur la bannière via une iframe.
C'est un moyen, entre autres, de ne pas décocher la case optimiser mon CSS !
Pour ceux que ça intéresse, voici comment j'ai procédé :
1) J'ai crée une page annexe via le menu "Gestion des pages HTML" que j'ai découpée en deux parties, la première contenant le CSS et la seconde contenant les balises html
(voici le contenu en question) :
- Code:
<head>
<style>
<meta charset="UTF-8">
<title>Typewriting Effect</title>
/* Global */
html{
min-height: 100%;
overflow: hidden;
}
body{
height: calc(100vh - 8em);
padding: 5em;
color: #ffffff;
font-family: 'Megrim', monospace;
text-shadow: 2px 2px 3px #000000;
font-size:35px;
font-weight: bolder;
background-color: transparent;
}
.line-1{
position: relative;
top: 50%;
width: 50em;
margin: 0 auto;
border-right: 2px solid rgba(255,255,255,.75);
font-size: 200%;
text-align: center;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}
/* Animation */
.anim-typewriter{
animation: typewriter 3.5s steps(44) 1s 1 normal both,
blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriter{
from{width: 0;}
to{width: 18.5em;}
}
@keyframes blinkTextCursor{
from{border-right-color: rgba(255,255,255,.75);}
to{border-right-color: transparent;}
}
</style>
</head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Megrim&display=swap" rel="stylesheet">
<p class="line-1 anim-typewriter">Where do we go when we fall Asleep?</p>
2) J'ai ensuite importé dans le template "overall_header" la page en utilisant la balise "iframe", juste après la div associée à la bannière :
- Code:
<p align="center"><iframe style="width: 1750px; height: 420px;" scrolling="no" frameborder="0" src="https://isomnos-test.forumactif.com/h2-typewriting_effect_header"></iframe></p>
Et... j'ai fini par bidouiller un peu à droite à gauche avec les différentes données du CSS pour faire correspondre l'idée que j'avais au résultat que je souhaitais !
Voilou, je ne sais pas si mes explications étaient très claires, néanmoins j'espère que ça permettra d'aider des personnes qui seraient, tout comme moi, un peu perdus et perplexes !
Sujet résolu, donc ! Merci beaucoup ! ^_^
Sujets similaires
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum