khoshnus
v3.0.0
Khoshnus n'est qu'une bibliothèque, mais c'est aussi votre outil pour donner vie au texte statique de manière artistique. Avec ses élégants animations SVG, votre texte peut maintenant être révélé comme s'il était écrit à la main!
Khoshnus vous laisse:
Pour commencer avec Khoshnus, ajoutez le package NPM à votre projet en exécutant l'une des commandes suivantes:
npm install khoshnus
--------------------
yarn add khoshnusFaites cela si vous utilisez React.
import { FONT_MATRIX , initialize , write } from "khoshnus"
import 'khoshnus/style.css'
const App = ( ) => {
useEffect ( ( ) => {
const manuscript = new Manuscript ( ) ;
manuscript . setup ( {
font : FONT_MATRIX [ "Pinyon Script" ] . name ,
fontSize : "10px" ,
} ) ;
const textId = manuscript . write ( "Hello Universe, My Name Is Optimus Prime!" )
manuscript . erase ( textId , { delayOperation : 15000 } )
} , [ ] ) ;
return (
< div >
< svg id = "khoshnus" width = "100%" height = "500" viewBox = "0 0 100 100" xmlns = "http://www.w3.org/2000/svg" > </ svg >
</ div >
)
} Ajoutez un élément SVG vide avec l'ID de khoshnus que Khoshnus utilisera pour animer votre texte. N'hésitez pas à ajuster la taille du SVG en fonction de vos besoins.
< svg id =" khoshnus " width =" 100% " height =" 100% " viewBox =" 0 0 100 100 " xmlns =" http://www.w3.org/2000/svg " > </ svg >Une fois que vous avez votre fichier html nu, importez les éléments de base nécessaires à la bibliothèque:
import { initialize , write , FONT_MATRIX } from "khoshnus" ;
import "khoshnus/style.css" ;Ensuite, commencez à utiliser la bibliothèque:
// Create the Manuscript instance and setup global configuration.
const manuscript = new Manuscript ( ) ;
manuscript . setup ( {
font : FONT_MATRIX [ "Pinyon Script" ] . name ,
fontSize : "10px" ,
} ) ;
// Write the letters into the SVG element.
const textId = manuscript . write ( "Hello Universe, My Name Is Optimus Prime!" )
// Erase the text after the desired waiting period - optional, you can leave it forever ;)
manuscript . erase ( textId , { delayOperation : 15000 } )Khoshnus offre un contrôle total sur votre animation. Vous voulez que le texte ait l'impression d'être écrit lentement ou rapidement? Vous décidez! Voici un aperçu de la façon dont vous pouvez le modifier:
initialize ( {
font : FONT_MATRIX [ "Pinyon Script" ] . name , // Only fonts from FONT_MATRIX are available.
fontSize : "16px" ,
start : {
startStrokeDashoffset : FONT_MATRIX [ "Pinyon Script" ] . strokeDashoffset ,
startStroke : "black" ,
startStrokeWidth : 0.0000000001 ,
startFill : "transparent" ,
} ,
end : {
endStrokeDashoffset : 0 ,
endStroke : "transparent" ,
endStrokeWidth : 0.3 ,
endFill : "black" ,
} ,
durations : {
strokeDashoffsetDuration : 3500 ,
strokeWidthDuration : 2500 ,
strokeDuration : 2500 ,
fillDuration : 4000 ,
} ,
} ) ;La magie de Khoshnus réside dans sa capacité à fournir le positionnement et à retarder le contrôle. Voici un exemple:
write ( "Your Text Here" , {
writeConfiguration : {
eachLetterDelay : 250 , // Delay of each letter after the previous one.
delayOperation : 0 // Delay of the write operation - useful when you want wait time between written snippets.
} ,
textConfiguration : {
x : "50%" , // X position of the text.
y : "50%" , // Y position of the text.
textAnchor : "middle" , // Anchor of the text.
dominantBaseline : "middle" , // Baseline of the text - where it should align.
fontSize : "12px" // Font size - appearance could possibly depend on the parent element.
}
} ) ; Découvrez l'extrait suivant:
const manuscript = new Manuscript ( ) ;
manuscript . setup ( {
font : FONT_MATRIX [ "Pinyon Script" ] . name ,
fontSize : "10px" ,
} ) ;
const textId0 = manuscript . write ( "Do not lament my absence," , {
textElementAttributes : { y : "10%" , } ,
writeConfiguration : { eachLetterDelay : 100 }
} )
const textId1 = manuscript . write ( "for in my spark," , {
textElementAttributes : { y : "25%" } ,
writeConfiguration : {
delayOperation : 3000 ,
eachLetterDelay : 100
}
} )
const textId2 = manuscript . write ( "I know that this is not the end," , {
textElementAttributes : { y : "37.5%" } ,
writeConfiguration : {
delayOperation : 5500 ,
eachLetterDelay : 100 ,
}
} )
const textId3 = manuscript . write ( "but merely," , {
textElementAttributes : { y : "55%" } ,
writeConfiguration : {
delayOperation : 9500 ,
eachLetterDelay : 100 ,
}
} )
const textId4 = manuscript . write ( "a new beginning." , {
textElementAttributes : { y : "67.5%" , } ,
writeConfiguration : {
delayOperation : 11500 ,
eachLetterDelay : 100 ,
}
} )
const textId5 = manuscript . write ( "- Optimus Prime" , {
textElementAttributes : {
x : "80%" ,
y : "90%" ,
} , writeConfiguration : {
delayOperation : 14000 ,
eachLetterDelay : 100 ,
}
} )
manuscript . erase ( textId0 , { delayOperation : 20000 } ) ;
manuscript . erase ( textId1 , { delayOperation : 20000 } ) ;
manuscript . erase ( textId2 , { delayOperation : 20000 } ) ;
manuscript . erase ( textId3 , { delayOperation : 20000 } ) ;
manuscript . erase ( textId4 , { delayOperation : 20000 } ) ;
manuscript . erase ( textId5 , { delayOperation : 20000 } ) ;Il génère l'œuvre d'art suivante:
Il est possible de définir plusieurs SVG dans votre composant / vue tant qu'ils ont des ID différents et que vous définissez quel objet manuscrit fait référence à l'élément SVG. L'extrait react.js suivant montre deux éléments SVG référencés, chacun par son objet manuscrit correspondant:
const App = ( ) => {
useEffect ( ( ) => {
const manuscript1 = new Manuscript ( {
svgId : "khoshnus-1" ,
font : FONT_MATRIX [ "Pinyon Script" ] . name ,
fontSize : "10px" ,
} ) ;
const text1 = manuscript1 . write ( "Do not lament my absence," , {
textElementAttributes : {
y : "10%" ,
} , writeConfiguration : { eachLetterDelay : 100 }
} )
manuscript1 . erase ( text1 )
const manuscript2 = new Manuscript ( {
svgId : "khoshnus-2" ,
font : FONT_MATRIX [ "Pinyon Script" ] . name ,
fontSize : "10px" ,
} ) ;
const text2 = manuscript2 . write ( "For in my spark," , {
textElementAttributes : {
y : "10%" ,
} , writeConfiguration : { eachLetterDelay : 100 }
} )
manuscript2 . erase ( text2 )
} , [ ] ) ;
return (
< div >
< svg id = "khoshnus-1" width = "100%" height = "300" viewBox = "0 0 100 100" xmlns = "http://www.w3.org/2000/svg" > </ svg >
< svg id = "khoshnus-2" width = "100%" height = "300" viewBox = "0 0 100 100" xmlns = "http://www.w3.org/2000/svg" > </ svg >
</ div >
)
}Voici quelques-unes des polices uniques avec lesquelles vous pouvez jouer:
Voici quelques façons d'utiliser Khoshnus:
Ce projet est concédé sous licence MIT, ce qui signifie que vous êtes libre d'utiliser, de le modifier et de le distribuer dans des projets personnels et commerciaux.
