Comment changer le nom de cette signature?

Fermé
zoro - 21 août 2017 à 20:52
 zoro - 30 août 2017 à 15:05
Bonjour,

J'ai trouvé cette signature avec un effet écrit à la main et je parviens à l'insérer sur mon site. L'effet fonctionne bref... jusque là tout va pour le mieux...
Sauf qu'en examinant les différents codes html, css et js, je ne parviens pas à identifier où modifier le nom de la signature!! Plutôt balot! Moi qui pensais m'en sortir tranquillement c'est loupé!
Alors si vous pouviez m'indiquer quelle partie du script correspondant au nom de la signature afin que je puisse y insérer mon nom, cela serait super!
Merci par avance...

le code html:
<i class="sig-wrap">


<svg
xmlns="http://www.w3.org/2000/svg"
class="signature"
width="419px" height="259px"
viewBox="0 0 419 259"
>
<defs>
<clipPath id="clipmask">
<path
d="M397.37,76.381c-8.974-5.228-13.697-15.834-16.289-15.834
c-10.234,0-8.95,3.233-14.357,3.233c-5.408,0-6.776-3.257-10.946-3.257c-8.079,0-14.854,9.382-16.744,9.382
s9.392-19.012,9.392-22.872c0-5.354-4.993-6.743-5.765-6.743c-0.384,0-38.497,36.477-68.792,77.331
c-30.672,41.363-53.528,87.11-53.528,87.11s60.356-146.88,77.346-146.88c-0.097-4.332-3.712-8.515-4.915-8.515
c-1.204,0-12.647,13.511-16.695,13.511c-2.579,0.156-4.17,2.856-7.665,2.856c-12.016,0-36.991,12.886-39.754,12.886
s16.946-22.446,1.538-22.446c-9.923,0-35.131,22.435-35.131,22.435s6.618-17.243,14.679-33.837
c8.451-17.398,16.979-31.299,18.283-33.277c2.018-3.361-1.366-7.071-3.66-7.071c-1.898,0-10.389,13.3-22.744,29.04
c-18.53,23.604-43.023,53.441-45.148,53.441c-3.543,0,3.063-8.038-1.724-8.038s-34.692,24.231-34.692,24.231
s51.531-50.008,34.414-50.008c-14.429,0-32.956,4.339-52.128,11.714c0.025,0.348,0.045,0.705,0.068,1.056l-0.531-0.871
c0.154-0.06,0.309-0.126,0.463-0.185C98.653,13.166,76.952-0.1,44.464-0.1C8.716-0.1,3.823,8.233,3.823,8.233
s-6.237,6.919,1.958,6.919c-7.817,0,11.38-9.144,37.834-9.144c20.818,0,51.589,0.545,52.93,61.067l-1.133,0.489l0,0.001
C48.538,87.229,0.293,123.92,0.293,158.951c0,22.949,14.123,28.245,21.625,28.245c25.835,0,80.986-40.162,80.986-105.7
c0-3.941-0.084-7.699-0.246-11.289c-0.48,0.184-0.958,0.378-1.438,0.567l1.437-0.597c0,0.01,0.001,0.02,0.001,0.03
c14.294-5.477,28.942-8.771,42.988-8.771c7.556,0-38.633,47.908-38.633,47.908s-5.211,9.118,0.261,9.118
c9.379,0,35.432-30.481,41.163-30.481s0.612,5.254,0.612,5.254s-3.428,4.599,1.087,4.599c7.949,0.321,52.805-57.511,52.805-57.511
l-20.604,48.399c0,0-3.929,9.443,1.18,9.443c6.263,0,32.273-29.65,41.089-29.65c3.511,0-4.914,12.56-4.914,12.56
s-4.993,7.957,2.809,7.957c7.801,0,36.275-17.631,52.112-17.631c0.081,0-24.937,33.123-44.005,76.622
c-20.308,46.326-35.227,102.967-35.227,102.967s-2.002,7.388,2.794,7.388c6.233,0.063,8.304-5.986,8.304-7.799
c41.945-95.346,113.029-186.61,128.238-191.517c-3.647,5.992-5.472,21.363-5.472,21.363s-0.261,3.908,3.647,3.908
s10.161-12.245,12.245-12.245s-0.447,2.271,2.271,2.271c4.583-0.254,3.521-7.42,7.421-7.42c3.899,0,6.322,4.832,11.663,4.832
c5.342,0,5.172-2.628,10.259-2.628c9.75,0,2.204,16.193,41.458,16.193C412.93,83.523,408.947,83.124,397.37,76.381z
M21.013,179.856c-8.636,0-14.304-8.246-14.304-18.928c0-24.325,42.091-67.734,89.77-88.21l0.005,0.025l0.094-0.039
C95.809,141.202,41.799,179.856,21.013,179.856z"/>

<path
d="M157.326,16.264c-3.229,0-7.774,4.546-7.774,7.775c0,3.229,2.618,5.847,5.848,5.847
c3.229,0,11.372-3.483,11.372-8.932C166.771,15.476,160.556,16.264,157.326,16.264z"/>
</clipPath>
</defs>

<g
class="stroke"
clip-path="url(#clipmask)"
stroke-linejoin="miter"
stroke-miterlimit="5"
>
<path
class="signature-stroke"
fill="none"
stroke="#B247B3"
d="M1.645,12.002c0,0,16.003-8.467,42.266-8.467
S99.995,9.407,99.995,71.25s-45.844,113.042-78.79,113.042c-14.247,0-17.564-14.147-17.564-26.453
C3.641,133,63,57.333,153.667,57.333C161,57.333,106,111,111.333,111c0,0,33.091-26.667,40.333-26.667s-4.521,9.581,0,9.581
s72-84.247,72-84.247S181.109,92,186.333,92s26.334-29.333,43-29.333c6.549,0-9.334,20-4.334,20c0,0,31.667-13.89,49.667-13.89
c5.712,0,9.647-13.443,16.333-13.443c-22,21.333-103.333,197-90.667,196.333c5.883,0,107.333-201.333,143.333-204.333
c0,0-13.771,31.667-9.333,31.667s9.705-11.667,14-11.667s4.332-2.523,7.666-2.523s4.579,3.966,10.667,3.966
s4.441-3.966,11.333-3.966s13.084,20.525,40.209,20.525"/>

<path
class="signature-dot"
fill="#B247B3"
d="M157.326,16.264c-3.229,0-7.774,4.546-7.774,7.775c0,3.229,2.618,5.847,5.848,5.847 c3.229,0,11.372-3.483,11.372-8.932C166.771,15.476,160.556,16.264,157.326,16.264z">
</path>
<!--
<path
class="signature-dot"
fill="#fff"
d="M157.238,20.329c-3.229,0-2.383-1.95-2.383,1.279s-0.962,2.532,2.267,2.532
c3.229,0,2.579,3.366,2.579-2.081C159.701,16.58,160.468,20.329,157.238,20.329z">
<animate
class="morph"
fill="freeze"
attributeName="d"
dur="1000ms"
to="M157.326,16.264c-3.229,0-7.774,4.546-7.774,7.775c0,3.229,2.618,5.847,5.848,5.847 c3.229,0,11.372-3.483,11.372-8.932C166.771,15.476,160.556,16.264,157.326,16.264z"
/>
</path>
-->
</g>
</svg>

</i>

Le code css:

body {
background-color: #f7f7f7;
text-align: center;
padding-top: 5em;
}

.signature {
cursor: pointer;
}
.signature-stroke{
stroke-dasharray: 1700;
stroke-dashoffset: 1700;
stroke-width: 6;

animation: writing 2.2s linear forwards;
}

.signature-dot {
opacity: 0;
animation: reveal 2s ease forwards 2.2s,
plop .5s cubic-bezier(.5,.48,.76,1.35) forwards 2.2s;
}

@keyframes reveal {
to { opacity: 100; }
}
@keyframes plop {
0% {
transform: scale(.85);
}
100% {
transform: scale(1);
}
}
@keyframes writing {
0% {
stroke-dashoffset: 1700;
}
45% {
stroke-width: 5;
}
90% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
stroke-width: 15;
}
}



code js:

$(document).ready(function(){
var wrap = $(".sig-wrap"),
dot = $(".signature-dot"),
morph = $(".morph");

wrap.click(function(){
$(this).addClass('start').html($(this).html());
morph.beginElement();
});
});



L'effet se trouve sur cette page:
https://codepen.io/andmitsch/pen/ZYMyXj?limit=all&page=2&q=signature

J'espère vraiment que quelqu'un pourra m'aider, c'est la seule façon que j'ai trouvé de créer une signature

En tout cas merci beaucoup

Zoro


A voir également:

6 réponses

jordane45 Messages postés 38162 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 6 mai 2024 4 658
21 août 2017 à 21:49
Bonjour,

Il n'y a pas de "signature" à proprement parlé.
C'est le code qui génère le dessin...

Par exemple.. si tu retires la parti suivante du code
<path
class="signature-dot"
fill="#B247B3"
d="M157.326,16.264c-3.229,0-7.774,4.546-7.774,7.775c0,3.229,2.618,5.847,5.848,5.847 c3.229,0,11.372-3.483,11.372-8.932C166.771,15.476,160.556,16.264,157.326,16.264z">
</path> 

Tu verras que le "point" n'apparait plus


Regarde ceci : https://la-cascade.io/comprendre-clip-path/

https://developer.mozilla.org/fr/docs/Web/SVG/Element/clipPath

https://cssplant.com/clip-path-generator

https://bashooka.com/coding/18-css-clip-path-tutorials-examples-tools/
0
Ok, Merci pour ton explication!
Et du coup existe-t-il un site qui générerait ce code en insérant son propre nom?
C'est pas que ça me dérange de signer sous un autre nom mais bon... (lol)

Par contre autre question, au vue du script assez volumineux pour une simple signature, est-ce que le fait d'ajouter cette signature va ralentir fortement la navigation de mon site?
Si oui, existe-t-il un logiciel gratuit qui permette de créer ça afin de l'intégrer en gif sur mon site? (par logiciel gratuit j'entends autre que adobe after effect car je ne peux l'installer sur mon ordi, pour qu'il fonctionne il me demande d'installer adobe manager et celui-ci est payant...)

Merci pour votre aide

Zoro
0
jordane45 Messages postés 38162 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 6 mai 2024 4 658
22 août 2017 à 14:00
Il existe plein de logiciels pour créer des GIF animés ... suffit de chercher sur google.

Pour ce qui est d'un générateur.. je n'en connais pas non plus.
Les liens que je t'ai donné.... je les ai trouvé via une recherches google en moins de 5 minutes.... Je suppose que si tu cherches... tu finiras bien par trouver ce qu'il te faut.
0
ok merci pour l'info, je fais ma recherche et je vous tiens au courant
0
Bonjour,
J'ai pas mal chercher sur internet et ne trouvant pas de site intéressant en gif en ligne j'ai décidé de me tourner vers photoshop.
J'ai vue que l'on pouvait animer un texte. J'ai donc regarder divers articles et je cherchais plus précisément un tuto car c'est plus facile pour les explications.
Hélas je n'ai pas trouvé, si vous avez un lien intéressant de signature qui s'écrit seule...
Ou alors un site où toutes les explications sont minutieuses car je ne comprends pas toujours ceux qui font des raccourcis...

En tout cas merci de votre aide.
zoro
0
Bonjour,
Je ne pensais pas que c'était aussi compliqué de créer une signature animée. Je pensais que c'était quelque chose de commun mais je cherche et je ne trouve pas ce que j'aimerai.
J'avais trouvé ce site: http://www.gif-mania.net/signatures-animees/nouveautes.html
mais le choix de police est très limité et on est obligé d'ajouter une image animée à côté de la signature. Moi j'aimerai quelque chose de tout simple, sans bonhomme animé ou autre plume qui écrit la signature

Du coup j'ai crée une signature avec photoshop. Et j'ai réussi! Jme dit cool! T'as enfin avancé... mais en téléchargeant l'image sur mon site, le rendu est pixelisé, c'est vraiment pas esthétique! je voulais une signature noire sur fond gris et avec ce fichier gif, il y a un contour blanc!! effet pas terrible. Jme dis ok, je fais ma signature en blanc, et là c'est mieux qu'en gris mais très grossier tout de même.

Je suis preneur pour toute solution...

Merci d'avance
zoro
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Bonjour,
On m'a conseillé de mettre une couleur de fond au moment d'enregistrer ma signature en gif. seulement, je ne parviens pas à insérer cette signature sur la couleur.
Je vous donne ce que j'ai fais:

-paramètre de sortie html

-arrière plan (la je mets la couleur de mon arrière plan)

-ok

-fichier

-enregistrer une copie optimisée sous

-sélection gif

-ok

Et là quand j'ouvre mon fichier gif, mon fond s'affiche en 1er plan, puis lorsque ma signature s'affiche le fond redevient blanc...

Comment faire?

Merci pour votre aide

Zoro
0
Bonjour,
Au final j'ai réussi à avoir l'effet voulu! Merci de votre aide !)

zoroo
0