Add dynamic typing animation to homepage description
Introduced a dynamic typing effect for the homepage description using the `Typed` library. Replaced hardcoded description text in `Index.razor` with a dynamically rendered `<span>` element. Added a constant for the description text and implemented `OnAfterRenderAsync` to invoke the typing animation on first render. Included the `typed.umd.js` library in `index.html` and updated `receiver-signature.js` with a `startTyped` function to support typing animations. Registered `startTyped` in the public API for external use. Enhanced the user experience with dynamic content rendering and improved maintainability by centralizing the description text. Also added a new theme file for improved styling.
This commit is contained in:
@@ -315,12 +315,22 @@ window.receiverSignature = (() => {
|
||||
state.hasSignature = true;
|
||||
}
|
||||
|
||||
function startTyped(elementId, text, typeSpeed) {
|
||||
if (typeof Typed === 'undefined') return;
|
||||
new Typed('#' + elementId, {
|
||||
strings: [text],
|
||||
typeSpeed: typeSpeed || 15,
|
||||
showCursor: false
|
||||
});
|
||||
}
|
||||
|
||||
function getDataUrl(id) { const c = document.getElementById(id); const s = pads.get(id); return (c && s && s.hasSignature) ? c.toDataURL('image/png') : null; }
|
||||
function getTypedDataUrl(id) { const c = document.getElementById(id); const s = typedSignatures.get(id); return (c && s && s.hasSignature) ? c.toDataURL('image/png') : null; }
|
||||
function getImageDataUrl(id) { const c = document.getElementById(id); const s = imageSignatures.get(id); return (c && s && s.hasSignature) ? c.toDataURL('image/png') : null; }
|
||||
|
||||
// ?? Public API ??????????????????????????????????????????????????????????
|
||||
return {
|
||||
startTyped: startTyped,
|
||||
installAnnotationCheckboxes: installAnnotationCheckboxes,
|
||||
debugDumpViewerDom: debugDumpViewerDom,
|
||||
initialize: initialize,
|
||||
|
||||
Reference in New Issue
Block a user