khoshnus
v3.0.0
Khoshnus es solo una biblioteca, pero también es su herramienta para llevar la vida al texto estático de una manera artística. Con sus elegantes animaciones de SVG, ¡su texto ahora se puede revelar como escrito a mano!
Khoshnus te permite:
Para comenzar con Khoshnus, agregue el paquete NPM a su proyecto ejecutando cualquiera de los siguientes comandos:
npm install khoshnus
--------------------
yarn add khoshnusHaga esto si está utilizando 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 >
)
} Agregue un elemento SVG vacío con la ID de khoshnus que Khoshnus usará para animar su texto. Siéntase libre de ajustar el tamaño del SVG en función de sus necesidades.
< svg id =" khoshnus " width =" 100% " height =" 100% " viewBox =" 0 0 100 100 " xmlns =" http://www.w3.org/2000/svg " > </ svg >Una vez que tenga su archivo HTML desnudo, importe las cosas básicas necesarias de la biblioteca:
import { initialize , write , FONT_MATRIX } from "khoshnus" ;
import "khoshnus/style.css" ;Luego comience a usar la biblioteca:
// 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 ofrece control total sobre su animación. ¿Quiere que el texto sienta que está escrito lentamente o rápidamente? ¡Decides! Aquí hay un vistazo de cómo puedes ajustarlo:
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 magia de Khoshnus radica en su capacidad para proporcionar posicionamiento y control de retraso. Aquí hay un ejemplo:
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.
}
} ) ; Mira el siguiente fragmento:
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 } ) ;Genera la siguiente obra de arte:
Es posible definir múltiples SVG en su componente/vista siempre que tengan diferentes ID y define qué objeto manuscrito hace referencias qué elemento SVG. El siguiente fragmento react.js muestra dos elementos SVG que se hacen referencia, cada uno por su objeto manuscrito correspondiente:
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 >
)
}Estas son algunas de las fuentes únicas con las que puedes jugar:
Aquí hay solo algunas maneras en que puedes usar Khoshnus:
Este proyecto tiene licencia bajo la licencia MIT, lo que significa que puede usarlo, modificarlo y distribuirlo en proyectos personales y comerciales.
