[Résolu] Apparition progressive d'un texte lettre par lettr par d3LTa7 - page 1

Coucou !!

Je cherche a faire apparaitre un texte progressivement suite a une animation déjà existante

Voilà mon code

Bon... mon code est super répétitif et j'imagine que l'on peut faire plus simple ,notamment avec un tableau, mais je suis un peut novice en JS donc si vous avez des suggestion par rapport à ça, ce sera avec grand plaisir de les prendre... Par contre avec des explications assez clair que je puisse comprendre

En ce qui concerne ma question, j'ai essayé un truc qui ne fonctionne pas... La pareil, je veux bien que l'on m'explique ce qui serais sympa de faire

Merci d'avance =)

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="OF.css" />
        <title>Titre</title>
    </head>
    <body>
        <div class="photoanim">
            <div id="image" class="image">
                <img id="foto" src="moioim.jpg">
                <img id="photo" src="moitr.jpg">
                <nav>
                    <ul id="nav">
                        <li><a href="#moa" id="moi">Moi</a></li>
                        <li><a href="#asso" id="asso">Mes Associations</a></li>
                        <li><a href="#video" id="video">Vidéo</a></li>
                        <li><a href="#xp" id="xp">Experiences Professionnelles</a></li>
                        <li><a href="#dip" id="dip">Diplome et Formation</a></li>
                        <li><a href="#motiv" id="motiv">Motivation</a></li>
                        <li><a href="#site" id="site">Site et Reseaux Sociaux</a></li>
                    </ul>
                </nav>
                
            </div>
            <div id="corp" class="corp">
                <div id="titre" class="titre">
                    <p class="lettre" id="lettre">O</p>
                    <p class="lettre" id="lettre">U</p>
                    <p class="lettre" id="lettre">I</p>
                </div>
                <div id="cadre" class="cadre">
                </div>
            </div>
            
        </div>
    </body>
    <script src="OF.js"></script>
</html>

CSS

.photoanim img
{
    width: 250px;
    border-radius: 50%;
    border: 2px solid white;
}

.photoanim
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.image
{
    padding: 0px;
    margin: 0px;
    width: 400px;
}
nav ul
{
    display: flex;
    flex-direction: column;
    text-decoration: none;
    list-style-type: none;
    justify-content: space-between;
}
nav ul li a
{
    color: white;
	font-family: 'Pangolin', cursive;
	font-size: 1em;
    text-decoration: none;
    border: #311FD2 1px solid;
    border-radius: 15px;
    background: #311FD2;
    padding: 5px;
}

nav ul li a:hover
{
    background: #CFD595;
    color: #5CC1F3;
}
nav ul li
{
    margin: 15px;
}
body{
    background-image: url(bckgrnd.png); 
    background-repeat: no-repeat;
    background-size: cover;
}

#bandeau
{
    width: 100px;
}
.corp
{
    display: flex;
    flex-direction: column;
    margin: auto;
}
.titre
{
    display: flex;
    flex-direction: row;
}

var tof = document.getElementById('foto');
tof.style.position = "absolute";
var topPos = 0;
var dir = -1;


document.getElementById('moi').style.visibility = 'hidden';
document.getElementById('asso').style.visibility = 'hidden';
document.getElementById('video').style.visibility = 'hidden';
document.getElementById('xp').style.visibility = 'hidden';
document.getElementById('dip').style.visibility = 'hidden';
document.getElementById('motiv').style.visibility = 'hidden';
document.getElementById('site').style.visibility = 'hidden';
function down(){
    topPos += -2 * dir;
    tof.style.top = `${topPos}px`;
    requestAnimationFrame(down);
    if (topPos == 300){
        appar1();
    }
    if (topPos == 350){
        appar2();
        o1()
    }
    if (topPos == 400){
        appar3();
        o2()
    }
    if (topPos == 450){
        appar4();
        o3()
    }
    if (topPos == 500){
        appar5();
    }
    if (topPos == 550){
        appar6();
        o4()
    }
    if (topPos == 600){
        appar7();
    }
    if (topPos == 650){
        dir = 0;
        o5()
    }
}

requestAnimationFrame(down);

function appar1(){
    document.getElementById('moi').style.visibility = 'visible';
}
function appar2(){
    document.getElementById('asso').style.visibility = 'visible';
}
function appar3(){
    document.getElementById('video').style.visibility = 'visible';
}
function appar4(){
    document.getElementById('xp').style.visibility = 'visible';
}
function appar5(){
    document.getElementById('dip').style.visibility = 'visible';
}
function appar6(){
    document.getElementById('motiv').style.visibility = 'visible';
}
function appar7(){
    document.getElementById('site').style.visibility = 'visible';
}

function o1(){
    var opacite = document.getElementsById('lettre');
    opacite.style.opacity = 0.1
}
function o2(){
    var opacite = document.getElementsById('lettre');
    opacite.style.opacity = 0.3
}
function o3(){
    var opacite = document.getElementsById('lettre');
    opacite.style.opacity = 0.5
}
function o4(){
    var opacite = document.getElementsById('lettre');
    opacite.style.opacity = 0.7
}
function o5(){
    var opacite = document.getElementsById('lettre');
    opacite.style.opacity = 1
}

d3LTa7

3 juillet 2019 à 13:42:25

6 juillet 2019 à 16:49:57

up !!

Lartak

7 juillet 2019 à 4:17:03

Bonjour.

Le principal problème de ton code, n'est pas au niveau Javascript mais HTML.

Tu as 3 éléments HTML, qui ont comme valeur texte pour leur attribut id, donc forcément quand dans ton Javascript tu fais :

document.getElementsById('lettre');

Il ne peut pas savoir lequel il doit cibler, ou tout du moins, il prendra toujours le premier.

De plus que :

// Ce n'est pas :
document.getElementsById('lettre');
// Mais :
document.getElementById('lettre');

Si tu veux cibler tous les éléments qui sont dans l'élément qui a l'id titre, dans ce cas là utilises leur classe
, soit :

document.getElementsByClassName('lettre');

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

20 juillet 2019 à 16:06:49

Merci !! J'ai résolu le problème entre temps !!!

function fade(compteur){
    compteur += 0.1;
    document.querySelector('#nom').style.opacity = compteur;
    if (compteur<1){
        setTimeout(fade,900,compteur);
    }
}

j'ai changé la partie HTML

<div id="titre" class="titre">
                    <h1 class="lettre" id="nom">TITRE</h1>
                </div>

Apparition progressive d'un texte lettre par lettr

Apparition progressive d'un texte lettre par lettr

Supprimer

Modérer

Signaler le message aux modérateurs