Texte flou

Texte animation

Animation

Fuzzy Text Clean

Code HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

21
22
23
24

26
27
28
29
30

32
33
34
35
36
37
38

40
41

<div class="circular-text" id="circularText">
  <svg viewBox="0 0 200 200">
    <defs>
      <path id="circlePath" d="M 100, 100
           m -75, 0
           a 75,75 0 1,1 150,0
           a 75,75 0 1,1 -150,0" />
    </defs>
    <text>
      <textPath href="#circlePath" startOffset="0%">
       * WREIZH * conception de site web
      </textPath>
    </text>
  </svg>
</div>

<script>
const circularText = document.getElementById('circularText');
const svg = circularText.querySelector('svg');

let angle = 0;
let speed = 0.2;
let hoverSpeed = 0.1;
let currentSpeed = speed;

function rotate() {
  angle += currentSpeed;
  svg.style.transform = `rotate(${angle}deg)`;
  requestAnimationFrame(rotate);
}

circularText.addEventListener('mouseenter', () => {
  currentSpeed = hoverSpeed;
});

circularText.addEventListener('mouseleave', () => {
  currentSpeed = speed;
});

rotate(); // Lancer la rotation
</script>
  

CSS

1

2

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

.circular-text {

    width: 200px;

    height: 200px;

    margin: 50px auto; /* Centre horizontalement */

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

}

.circular-text svg {

    width: 100%;

    height: 100%;

    transform-origin: center center;

    display: block;

}

.circular-text text {

    font-size: 12px;

    letter-spacing: 2px;

    text-transform: uppercase;

    fill: #333; /* Couleur du texte */

    font-family: 'Arial', sans-serif;

}

Comment insérer le code sur son site ?

✏️ Étape 1 : Copiez ce code.

Copier le code complet. Ne vous inquiétez pas, vous le collerez tel quel.

🛠️ Étape 2 : Ajoutez ce code dans votre site.

Allez dans Pages > Modifier avec Elementor sur la page souhaitée
Cherchez le widget HTML
Glissez le widget HTML à l’endroit voulu sur la page
Collez tout le code que vous venez de copier dans le champ HTML
Cliquez sur Mettre à jour

✅ C’est terminé !

Quand vous visualisez la page, le texte circulaire tourne automatiquement, et ralentit si vous passez votre souris dessus 🌀

Strategie Execution Succès

Agence de webdesign à Brest spécialisé dans le référencement local.

Notre Newsletters

Navigation

Liens pratiques

Services

Location

Rue de l’Elorn, 29200 Brest

Site web réalisé par WREIZH.