Intégration d' un script html et css pour texte animé

re bonjour,
voilà! l' erreur est réparée..

Je cherche à intégrer ce script html/css sur ma page, mais, n' étant pas trop calé en codage, un p'tit coup de main ne serait pas de trop! En fait, je ne sais pas insérer le code css dans le html...
Voici le script en question:

HTML:

Code:

<h1 class="ml6"> <span class="text-wrapper"> <span class="letters">Beautiful Questions</span> </span> </h1> <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

CSS :

Code:

.ml6 {
  position: relative;
  font-weight: 900;
  font-size: 3.3em;
}

.ml6 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.2em;
  padding-right: 0.05em;
  padding-bottom: 0.1em;
  overflow: hidden;
}

.ml6 .letter {
  display: inline-block;
  line-height: 1em;
}

...ce qui devrait donner ça: http://tobiasahlin.com/moving-letters/#6

Merci d' avance à ellade s' il peut me guider, et aux autres bien sûr

Bonjour KIM

Tes codes ne sont pas lisibles car ils sont interprétés par le navigateur.
Il faut que tu réédites ton message en cliquant sur "Editer" et que tu mettes tes codes entre les balises codes qui sont en haut dans l'éditeur de texte matérialisées par l'icône clic dessus et mets ton code entre les balises.

Merci et @ +

J'ai vu, ça fonctionner sur WARC mais les codes donnés ne suffisent pas, il faut des plugins en plus.

Il faut que je réfléchisse à la façon la plus simple pour mettre en place.
Car le plus compliqué (pour moi) n'est pas de mettre en place mais c'est ensuite de trouver un moyen de mise en place simple qui soit à la portée de tous en étant le plus clair possible.
Je me penche dessus demain.

De retour pour les explications

Commencer par créer un fichier js avec ton éditeur habituel (comme Notepad++ par exemple) ou tout simplement avec le Bloc-notes.
Copier coller le code ci-dessous, faire attention à bien tout copier du début à la fin (utiliser "sélectionner le contenu").
Et nommer ce fichier moving-letters.js

Code:

var ml = {};
ml.timelines = {};
ml.overlay = {};
ml.isShowingSource = false;

$(function() {
  ml.init();
  ml.onlyPlayVisible();

  $(".composition-wrapper").click(function(e) {
    ml.showComposition(this, e, { refreshAd: true });
  });

  $(".composition-back-button").click(function(e) {
    e.preventDefault();
    ml.hideSource();
  });

  $(".header-title").click(ml.animateHeader);

  $(window)
    .on("scroll resize", ml.onlyPlayVisible)
    .on("resize", ml.overlay.resizeCanvas)
    .on("scroll", ml.updateAdVisibility);

  $(document)
    .on("app:menuDidReveal", ml.pauseAllCompositions)
    .on("app:menuWillHide", ml.onlyPlayVisible)
    .on("pressed:ESC", ml.hideSource);

  // Load composition from hash (if defined)
  ml.loadCompositionFromCurrentHash();
});

ml.init = function() {
  // Compositions
  ml.compositions = $(".composition");

  // Overlay
  ml.overlay.c = document.getElementById("color-overlay");
  ml.overlay.ctx = ml.overlay.c.getContext("2d");
  ml.overlay.cH;
  ml.overlay.cW;
  ml.overlay.bgColor = "transparent";
  ml.overlay.animations = [];
  ml.overlay.resizeCanvas();

  ml.overlayAnimation = anime({
    duration: Infinity,
    update: function() {
      ml.overlay.ctx.fillStyle = ml.overlay.bgColor;
      ml.overlay.ctx.fillRect(0, 0, ml.overlay.cW, ml.overlay.cH);
      ml.overlay.animations.forEach(function(anim) {
        anim.animatables.forEach(function(animatable) {
          animatable.target.draw();
        });
      });
    }
  });
  // Pause it and only play when needed
  ml.overlayAnimation.pause();

  $('.header-title').each(function(){
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
  });
}

ml.animateHeader = function() {
  anime({
    targets: '.header-title .letter',
    rotateY: [-360, 0],
    duration: 1300,
    easing: "easeOutExpo",
    delay: function(el, i) {
      return 45 * i;
    }
  });
}

ml.onlyPlayVisible = function() {
  // Don't play if any overlays are playing
  if (ml.isShowingSource || app.menuVisible) return;
  ml.compositions.each(function(i, e) {
    ml.compShouldPlay(this) ? ml.playComposition(this) : ml.pauseComposition(this);
  });
}

ml.compShouldPlay = function(comp) {
  var winHeight = window.innerHeight;
  var bounds = comp.getBoundingClientRect();
  var offset = 180; // Greater offset -> comps will play less often

  // Check if bottom of comp is above view or if top of comp is below view
  if (bounds.bottom < 0+offset || bounds.top > winHeight-offset) return false;
  // Default to true
  return true;
}

ml.playComposition = function(comp) {
  var compID = $(comp).find("h1").attr("class");
  ml.timelines[compID].play();
}

ml.restartComposition = function(comp) {
  var compID = $(comp).find("h1").attr("class");
  ml.timelines[compID].restart();
}

ml.pauseComposition = function(comp) {
  var compID = $(comp).find("h1").attr("class");
  ml.timelines[compID].pause();
}

ml.pauseAllCompositions = function() {
  ml.compositions.each(function(i, e) {
    ml.pauseComposition(this);
  });
}

// Displaying compositions
ml.showComposition = function(comp, e, options) {
  if ($(comp).hasClass("composition-active")) return;
  var $comp = $(comp).parent();
  ml.prepareSourceForComposition($comp);
  ml.showSourceForComposition(comp, e, options);
}

ml.prepareSourceForComposition = function($comp) {
  // Set header
  var compNumber = $(".composition").index($comp) + 1;
  $(".composition-source-header").text("Effect " + compNumber);

  // Set html
  var html = $comp.find(".composition-static-html").html();
  html = ml.prependHTMLwithJS($.trim(html));
  $(".composition-source-code-html").html(html);

  // Set CSS
  var css = $comp.find("style").html();
  $(".composition-source-code-css").text($.trim(css));

  // Set javascript
  var script = $comp.find("script").html();
  script = ml.removeInternalJSFromCode(script);
  $(".composition-source-code-js").text($.trim(script));  
}

ml.prependHTMLwithJS = function(html) {
  var cdn = "https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js";
  var scriptTag = '<script src="' + cdn + '"></script>';
  var scripts = ml.escapeHTML(scriptTag);

  return html + "\n\n" + scripts;
}

ml.escapeHTML = function(html) {
  var text = document.createTextNode(html);
  var div = document.createElement('div');
  div.appendChild(text);

  return div.innerHTML;
}

ml.removeInternalJSFromCode = function(code) {
  // Remove the line where it's stored in ML for pausing/playing
  var startPosition = code.indexOf("ml.timelines[");
  var endPosition = code.indexOf("anime.timeline(");

  return code.slice(0, startPosition) + code.slice(endPosition, code.length);
}

ml.showSourceForComposition = function(c, e, options) {
  ml.isShowingSource = true;

  // Hide ad, then refresh it, so it can be displayed in a new position with a new ad
  $(".ml-carbon-ad").hide().css("opacity", "0").addClass("ml-carbon-ad-source-showing").show();
  if (options.refreshAd == true) ml.refreshAd();

  $("html").addClass("is-showing-source");
  $(c).addClass("composition-active");
  ml.pauseAllCompositions();
  ml.updateHashForComposition(c);

  // Play chosen composition from beginning
  ml.restartComposition(c);
  ml.pauseComposition(c);
  app.hideMenuIcon();
  ml.showOverlay(c, e);

  // Prepare to animate in overlay elements
  $(".composition-back-button").show().css("opacity", "0");
  $(".composition-source-text").css("opacity", "0");
  $(".composition-source").show();
  $(".composition-source-container").css("transform", "scaleX(0)").show();

  // Animate in overlay elements
  anime.timeline()
  .add({
    targets: ".composition-source-container",
    scaleX: [0, 1],
    duration: 900,
    delay: 500,
    easing: "easeOutExpo",
    complete: function() {
      ml.playComposition(c);
    }
  }).add({
    targets: ".composition-source-text",
    opacity: 1,
    translateY: [-50, 0],
    delay: function(el, i) {
      return 50 * i;
    },
    easing: "easeOutExpo",
    offset: "-=150"
  }).add({
    targets: ".ml-carbon-ad",
    opacity: 1,
    easing: "easeOutExpo",
    offset: "-=1250"
  });

  anime({
    targets: ".composition-back-button",
    opacity: [0,1],
    easing: "easeOutExpo",
    delay: 300,
    translateX: [-40, 0]
  });
}

ml.hideSource = function() {
  if (!ml.isShowingSource) return;
  ml.isShowingSource = false;
  ml.resetHash();

  $(".ml-carbon-ad").hide().css("opacity", "0");
  ml.refreshAd();

  $("html").removeClass("is-showing-source");
  ml.onlyPlayVisible();
  $(".composition-active").removeClass("composition-active");
  
  anime({
    targets: ".composition-source-text",
    opacity: 0,
    duration: 400,
    easing: "easeInQuad"
  });

  anime({
    targets: ".composition-source-container",
    translateX: "100%",
    duration: 500,
    easing: "easeInQuad",
    complete: function() {
      // Reset scroll position (could have changed if you opened before and scrolled)
      $(".composition-source").scrollTop(0).hide();
    }
  });

  anime.timeline()
    .add({
      targets: ".color-overlay",
      opacity: 0,
      easing: "easeInQuad",
      duration: 600,
      complete: function() {
        $(".color-overlay").hide();
        ml.overlay.bgColor = "transparent";
        ml.overlay.ctx.clearRect(0,0, ml.overlay.cW, ml.overlay.cH);
        ml.overlayAnimation.pause();
      }
    }).add({
      begin: function() {
        $(".ml-carbon-ad").removeClass("ml-carbon-ad-source-showing").show();
      },
      targets: ".ml-carbon-ad",
      opacity: 1,
      duration: 500,
      easing: "easeInQuad",
    });

  anime({
    targets: ".composition-back-button",
    opacity: [1,0],
    easing: "easeInQuad",
    translateX: [0, -40],
    duration: 300,
    complete: function() {
      $(".composition-back-button").hide();
      app.showMenuIcon();
    }
  });
}

ml.updateHashForComposition = function(c) {
  // $comp is a .composition
  var $comp = $(c).parent();
  var ID = $(".composition").index($comp) + 1;
  window.location.hash = ID;
}

ml.resetHash = function() {
  var scrollTop = $(document).scrollTop();
  window.location.hash = "";
  $(document).scrollTop(scrollTop);
}

ml.loadCompositionFromCurrentHash = function() {
  var hash = window.location.hash;
  if (hash == "") return;

  ml.loadCompositionForHash(hash);
}

ml.loadCompositionForHash = function(hash) {
  var ID = parseInt(hash.substr(1,2));
  var comp = $(".composition")[ID-1];
  var rect = comp.getBoundingClientRect();
  $(document).scrollTop(rect.top);
  ml.showComposition($(comp).find(".composition-wrapper"), {}, { refreshAd: false });
}

ml.removeAnimation = function(animation) {
  var index = ml.overlay.animations.indexOf(animation);
  if (index > -1) ml.overlay.animations.splice(index, 1);
}

ml.calcPageFillRadius = function(x, y) {
  var l = Math.max(x - 0, ml.overlay.cW - x);
  var h = Math.max(y - 0, ml.overlay.cH - y);
  return Math.sqrt(Math.pow(l, 2) + Math.pow(h, 2));
}

ml.showOverlay = function(c, e) {
  ml.overlayAnimation.play();
  $(".color-overlay").show().css("opacity", "1");

  if (e.touches) {
    e.preventDefault();
    e = e.touches[0];
  }

  var circleSpawnX = e.clientX ? e.clientX : ml.horizontalCenterForElement($(c).parent()[0]);
  var circleSpawnY = e.clientY ? e.clientY : ml.verticalCenterForElement($(c).parent()[0]);

  var fillColor = "#" + $(c).attr("data-color");
  var targetR = ml.calcPageFillRadius(circleSpawnX, circleSpawnY);
  var minCoverDuration = 750;
  
  var pageFill = new Circle({
    x: circleSpawnX,
    y: circleSpawnY,
    r: 0,
    fill: fillColor
  });

  var fillAnimation = anime({
    targets: pageFill,
    r: targetR,
    duration:  Math.max(targetR / 2 , minCoverDuration ),
    easing: "easeOutQuart",
    complete: function(){
      ml.overlay.bgColor = pageFill.fill;
      ml.overlayAnimation.pause();
      ml.removeAnimation(fillAnimation);
    }
  });
  
  ml.overlay.animations.push(fillAnimation);
}

function extend(a, b){
  for(var key in b) {
    if(b.hasOwnProperty(key)) {
      a[key] = b[key];
    }
  }
  return a;
}

ml.horizontalCenterForElement = function(element) {
  var rect = element.getBoundingClientRect();
  return rect.left + rect.width / 2;
}

ml.verticalCenterForElement = function(element) {
  var rect = element.getBoundingClientRect();

  return rect.top + rect.height / 2 + 50;
}

var Circle = function(opts) {
  extend(this, opts);
}

Circle.prototype.draw = function() {
  ml.overlay.ctx.globalAlpha = this.opacity || 1;
  ml.overlay.ctx.beginPath();
  ml.overlay.ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);

  if (this.fill) {
    ml.overlay.ctx.fillStyle = this.fill;
    ml.overlay.ctx.fill();
  }
  ml.overlay.ctx.closePath();
  ml.overlay.ctx.globalAlpha = 1;
}

ml.overlay.resizeCanvas = function() {
  ml.overlay.cW = window.innerWidth;
  ml.overlay.cH = window.innerHeight;
  ml.overlay.c.width = ml.overlay.cW * devicePixelRatio;
  ml.overlay.c.height = ml.overlay.cH * devicePixelRatio;
  ml.overlay.ctx.scale(devicePixelRatio, devicePixelRatio);
  ml.overlay.ctx.fillStyle = ml.overlay.bgColor;
  ml.overlay.ctx.fillRect(0, 0, ml.overlay.cW, ml.overlay.cH);
};

ml.refreshAd = function() {
  if (!$("#carbonads")[0]) return;
  if (typeof _carbonads !== 'undefined') _carbonads.refresh();
}

ml.shouldDisplayAd = function() {
  if (ml.isShowingSource) return true;

  var bounds = $(".footer-more-projects")[0].getBoundingClientRect();
  var winHeight = window.innerHeight;
  return (bounds.top - winHeight) > 0;
}

ml.updateAdVisibility = function() {
  if (ml.shouldDisplayAd()) {
    $(".ml-carbon-ad-container").removeClass("ml-carbon-ad-container-hidden");
  } else {
    if ($(".ml-carbon-ad-container").hasClass("ml-carbon-ad-container-hidden")) return;
    $(".ml-carbon-ad-container").addClass("ml-carbon-ad-container-hidden");
  }
}

Envoyer ce fichier dans la bibliothèque de fichiers de WA

Ensuite dans les propriétés de la page (head)
Coller ce code :

Code:

<!-- moving-letters start -->
<style>
.ml6 {
  position: relative;
  font-weight: 900;
  font-size: 3.3em;
  font-family: 'Source Sans Pro';
  color: #59595b;
  text-align:center;
}
.ml6 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.2em;
  padding-right: 0.05em;
 /* padding-bottom: 0.1em;*/
  overflow: hidden;
}
.ml6 .letter {
  display: inline-block;
  line-height: 1em;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="wa_files/moving-letters.js"></script>
<!-- moving-letters end -->


Pour l'appel du fichier .js que tu viens de créer il faudra remplacer dans la dernière ligne "monfichier.js" par l'insertion du fichier que tu viens de charger dans la bibliothèque  (voir insertion de fichier si tu ne sais pas faire)

Ensuite dans la page, là où tu veux mettre ce texte tu copies colles le code ci-dessous dans un composant HTML

Code:

<!-- moving-letters start -->
<h1 class="ml6">
<span class="text-wrapper">
<span class="letters">Beautiful Questions</span>
</span>
</h1>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script>
// Wrap every letter in a span
$('.ml6 .letters').each(function(){
  $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

ml.timelines["ml6"] = anime.timeline({loop: true})
  .add({
    targets: '.ml6 .letter',
    translateY: ["1.1em", 0],
    translateZ: 0,
    duration: 750,
    delay: function(el, i) {
      return 50 * i;
    }
  }).add({
    targets: '.ml6',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });
</script>
<!-- moving-letters end -->

Normalement ça doit fonctionner.

J'oubliais, dans le css qui est en head tu peux modifier police et couleur à ta convenance.

Bonne installation

Re bonjour Ellade,

D' abord, merci de m' aider et de ta patience..
J' ai tout fait comme indiqué, le texte apparaît bien en forme et couleur, mais...problème..il n' y a aucune animation! J' ai bien regardé dans de code (sans y toucher), mais comme je n' y connais rien
Ca donne ça: https://lartisan-peintre.fr/

Peux tu me donner l'adresse de la page où tu as installé que je puisse cerner le problème.

Merci

https://lartisan-peintre.fr/

Tu n'as pas indiqué la bonne adresse du fichier JS que tu as fait, il faut suivre scrupuleusement les indications.
Comment as-tu procécé pour ton fichier js ?

J' ai fait le fichier js avec notepad++, ensuite je l' ai enregistré sur mon bureau (pour être sur de le trouver..), je l' ai rentré dans la bibliothèque WARC et j' ai suivi la procédure..Mais je vais tout reprendre à zéro...je te tiens au courant..

C'est l'intégration du fichier dans le code que tu n'as pas fait comme il fallait, ça devrait se présenter comme ça dans l’éditeur des propriétés  WA.


J'ai mis un lien vers ce tuto dans mon message précédent suis le bien au pas à pas.

CA MARCHE! : https://lartisan-peintre.fr/

En fait oui, j' avais mal orthographié le fichier js. Me reste plus qu' à le mettre en forme...

Grand merci à toi Ellade

Je met le sujet en "résolu"

De rien, c'est un plaisir de partager.
J'ai jeté un œil ça marche super

Un nouveau tuto en perspective

Bonne continuation