Je suis en train de développer un petit site internet en HTML / CSS.
Je ne suis pas un développeur expert, il s'agit plutôt d'une passion, donc la question que je vais poser va peut-être sembler très basique
Donc, utilisant du HTML/CSS, j'ai découvert le potentiel de JS. Maîtrisant peu ce langage, j'ai découvert également des ressources intéressantes sur ce site. J'ai analysé le code qui m’intéressait et j'ai pu intégrer l'effet "Futuristic resolving" à ma maquette pour un premier texte avec un effet typing qui me plait beaucoup (image1.PNG).
J'ai tenté de faire de même sur une autre rubrique (conçue sur le même modèle que image1.PNG) de la maquette mais ça ne fonctionne pas.
J'ai donc changé le nom des constantes et de variables parce que je me suis dit que si le deuxième script avait les mêmes variables que le premier script alors c'était normal qu'il y ait une confusion des deux scripts dans leur exécution. Pourtant ça ne fonctionne toujours pas.
Voici mon code html pour l'image 1 :
Code : Tout sélectionner
<div class="container">
<h1 class="heading" data-target-resolver></h1>
</div>
<div id="carre2"></div>
Le code CSS correspondant :
Code : Tout sélectionner
.container {
display: flex;
height: 100%;
padding: 6rem;
position : absolute;
margin-left : 33em;
margin-top : 10em;
z-index : 13;
}
.heading {
color: #FFFFFF;
font-size: 4rem;
font-weight: 600;
text-transform: uppercase;
position : absolute;
}const resolver = {
resolve: function resolve(options, callback) {
// The string to resolve
const resolveString = options.resolveString || options.element.getAttribute('data-target-resolver');
const combinedOptions = Object.assign({}, options, {resolveString: resolveString});
function getRandomInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
function randomCharacter(characters) {
return characters[getRandomInteger(0, characters.length - 1)];
};
function doRandomiserEffect(options, callback) {
const characters = options.characters;
const timeout = options.timeout;
const element = options.element;
const partialString = options.partialString;
let iterations = options.iterations;
setTimeout(() => {
if (iterations >= 0) {
const nextOptions = Object.assign({}, options, {iterations: iterations - 1});
// Ensures partialString without the random character as the final state.
if (iterations === 0) {
element.textContent = partialString;
} else {
// Replaces the last character of partialString with a random character
element.textContent = partialString.substring(0, partialString.length - 1) + randomCharacter(characters);
}
doRandomiserEffect(nextOptions, callback)
} else if (typeof callback === "function") {
callback();
}
}, options.timeout);
};
function doResolverEffect(options, callback) {
const resolveString = options.resolveString;
const characters = options.characters;
const offset = options.offset;
const partialString = resolveString.substring(0, offset);
const combinedOptions = Object.assign({}, options, {partialString: partialString});
doRandomiserEffect(combinedOptions, () => {
const nextOptions = Object.assign({}, options, {offset: offset + 1});
if (offset <= resolveString.length) {
doResolverEffect(nextOptions, callback);
} else if (typeof callback === "function") {
callback();
}
});
};
doResolverEffect(combinedOptions, callback);
}
}
/* Some GLaDOS quotes from Portal 2 chapter 9: The Part Where He Kills You
* Source: http://theportalwiki.com/wiki/GLaDOS_vo ... _Kills_You
*/
const strings = [
'We strive for excellence and success',
'......'
];
let counter = 0;
const options = {
// Initial position
offset: 0,
// Timeout between each random character
timeout: 5,
// Number of random characters to show
iterations: 10,
// Random characters to pick from
characters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'x', 'y', 'x', '#', '%', '&', '-', '+', '_', '?', '/', '\\', '='],
// String to resolve
resolveString: strings[counter],
// The element
element: document.querySelector('[data-target-resolver]')
}
// Callback function when resolve completes
function callback() {
setTimeout(() => {
counter ++;
if (counter >= strings.length) {
counter = 0;
}
let nextOptions = Object.assign({}, options, {resolveString: strings[counter]});
resolver.resolve(nextOptions, callback);
}, 1000);
}
resolver.resolve(options, callback);
Comme je l’écrivais, j'avais tenté de changer les variables du code javascript mais ça ne fonctionnait pas et c'était, je pense, une mauvaise approche. Je me dis qu'une solution pourrait être d'assigner l’exécution de ce script à la seule portion de html concernée par le script JS mais je ne sais pas si c'est faisable vu que quand j'ai changé data-target-resolver ça n'a eu absolument aucun effet. Quelqu'un aurait-il une piste?
Merci pour votre aide
Baptiste
