Animations textes

Animations de textes

1. Copier coller la balise perso "{Perso-texte}" et modifier le début de la phrase dans la première

consoleText(['code CSS', 'code HTML', 'balise perso'], 'text',['black','grey','green']);

function consoleText(words, id, colors) {
if (colors === undefined) colors = ['#fff'];
var visible = true;
var con = document.getElementById('console');
var letterCount = 1;
var x = 1;
var waiting = false;
var target = document.getElementById(id)
target.setAttribute('style', 'color:' + colors[0])
window.setInterval(function() {

if (letterCount === 0 && waiting === false) {
waiting = true;
target.innerHTML = words[0].substring(0, letterCount)
window.setTimeout(function() {
var usedColor = colors.shift();
colors.push(usedColor);
var usedWord = words.shift();
words.push(usedWord);
x = 1;
target.setAttribute('style', 'color:' + colors[0])
letterCount += x;
waiting = false;
}, 1000)
} else if (letterCount === words[0].length + 1 && waiting === false) {
waiting = true;
window.setTimeout(function() {
x = -1;
letterCount += x;
waiting = false;
}, 1000)
} else if (waiting === false) {
target.innerHTML = words[0].substring(0, letterCount)
letterCount += x;
}
}, 120)
window.setInterval(function() {
if (visible === true) {
con.className = 'console-underscore hidden'
visible = false;

} else {
con.className = 'console-underscore'

visible = true;
}
}, 400)
}
// ]]>

2. Ajouter le style et les trois classes suivantes dans le css :

function consoleText(words, id, colors) {
if (colors === undefined) colors = ['#fff'];
var visible = true;
var con = document.getElementById('console');
var letterCount = 1;
var x = 1;
var waiting = false;
var target = document.getElementById(id)
target.setAttribute('style', 'color:' + colors[0])
window.setInterval(function() {

if (letterCount === 0 && waiting === false) {
waiting = true;
target.innerHTML = words[0].substring(0, letterCount)
window.setTimeout(function() {
var usedColor = colors.shift();
colors.push(usedColor);
var usedWord = words.shift();
words.push(usedWord);
x = 1;
target.setAttribute('style', 'color:' + colors[0])
letterCount += x;
waiting = false;
}, 1000)
} else if (letterCount === words[0].length + 1 && waiting === false) {
waiting = true;
window.setTimeout(function() {
x = -1;
letterCount += x;
waiting = false;
}, 1000)
} else if (waiting === false) {
target.innerHTML = words[0].substring(0, letterCount)
letterCount += x;
}
}, 120)
window.setInterval(function() {
if (visible === true) {
con.className = 'console-underscore hidden'
visible = false;

} else {
con.className = 'console-underscore'

visible = true;
}
}, 400)
}
// ]]>

1. Copier coller le code "{perso-scroll-texte}" dans une balise perso et modifier le texte entre les balses ""

2. Ajouter le ficher Js "script-texte.js" dans le Moxie Manager dans "Spécifique" puis le copier coller dans "Template"

3. Copier coller le code entre guillements dans le html :

4. Ajouter le code suivant le css et réglé la taille de votre texte :

5. Ajouter ce code au wrapper-bloc dans lequel se trouve la balise perso

.wrapper-page-20 #wrapper-bloc-2 {
overflow: hidden;
}

6. Si le texte n'apparaît pas ou est trop sur un côté ou sur un autre, modifier le fichier Js "script-texte.js".

Modifier le chiffre négatif (ex: -80 ou -20 ou -100)

1. Copier coller le code de la balise perso {perso-defilant}

2. ajouter le code ci dessous dans le css. Modifier ce qui est en gras

1. Copier coller le code de la balise perso {perso-text-4}

2. ajouter le CSS suivant

Retour