khoshnus
v3.0.0
Khoshnus hanyalah sebuah perpustakaan, tetapi juga alat Anda untuk membawa kehidupan ke teks statis dengan cara yang artistik. Dengan animasi SVG yang elegan, teks Anda sekarang dapat diungkapkan seolah -olah ditulis dengan tangan!
Khoshnus memungkinkan Anda:
Untuk memulai dengan Khoshnus, tambahkan paket NPM ke proyek Anda dengan menjalankan salah satu perintah berikut:
npm install khoshnus
--------------------
yarn add khoshnusLakukan ini jika Anda menggunakan 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 >
)
} Tambahkan elemen SVG kosong dengan ID khoshnus yang akan digunakan Khoshnus untuk menghidupkan teks Anda. Jangan ragu untuk menyesuaikan ukuran SVG berdasarkan kebutuhan Anda.
< svg id =" khoshnus " width =" 100% " height =" 100% " viewBox =" 0 0 100 100 " xmlns =" http://www.w3.org/2000/svg " > </ svg >Setelah Anda memiliki file html telanjang, impor barang -barang dasar yang dibutuhkan dari perpustakaan:
import { initialize , write , FONT_MATRIX } from "khoshnus" ;
import "khoshnus/style.css" ;Kemudian mulailah menggunakan perpustakaan:
// 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 menawarkan kontrol penuh atas animasi Anda. Ingin teks terasa seperti ditulis perlahan atau cepat? Anda memutuskan! Inilah sekilas tentang bagaimana Anda bisa mengubahnya:
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 ,
} ,
} ) ;Keajaiban Khoshnus terletak pada kemampuannya untuk memberikan pengendalian posisi dan penundaan. Inilah contohnya:
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.
}
} ) ; Lihat cuplikan berikut:
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 } ) ;Ini menghasilkan karya seni berikut:
Dimungkinkan untuk mendefinisikan beberapa SVG dalam komponen/tampilan Anda selama mereka memiliki ID yang berbeda dan Anda mendefinisikan objek manuskrip mana yang merujuk elemen SVG mana. Cuplikan react.js berikut menunjukkan dua elemen SVG yang direferensikan, masing -masing dengan objek naskah yang sesuai:
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 >
)
}Berikut adalah beberapa font unik yang dapat Anda mainkan:
Berikut adalah beberapa cara Anda dapat menggunakan Khoshnus:
Proyek ini dilisensikan di bawah lisensi MIT, yang berarti Anda bebas menggunakan, memodifikasi, dan mendistribusikannya dalam proyek pribadi dan komersial.
