export default function (scrawl, el) {Snippets included in the Scrawl-canvas demo/snippets folder
Related files:
Purpose: imports the element’s text and adds an animated gradient effect to it.
Function input:
Function output: a Javascript object will be returned, containing the following attributes
{
element // the Scrawl-canvas wrapper for the DOM element supplied to the function
canvas // the Scrawl-canvas wrapper for the snippet's canvas
animation // the Scrawl-canvas animation object
demolish // remove the snippet from the Scrawl-canvas library
}
import wordGradient from './relative/or/absolute/path/to/this/file.js';
let myElements = document.querySelectorAll('.some-class');
myElements.forEach(el => wordGradient(scrawl, el));
Effects on the element:
transparenttransparentexport default function (scrawl, el) {Apply the snippet to the DOM element
const snippet = scrawl.makeSnippet({
domElement: el,
});
if (snippet) {Set some convenience variables
const canvas = snippet.canvas,
group = canvas.base.name,
animation = snippet.animation,
wrapper = snippet.element,
compStyles = wrapper.elementComputedStyles,
name = wrapper.name;The snippet will take details of its font family and size from the DOM element’s computed styles
const backgroundColor = compStyles.backgroundColor || '#f2f2f2',
fontString = compStyles.font || `${(compStyles.fontStyle !== 'normal') ? compStyles.fontStyle + ' ' : ''}${(compStyles.fontVariant !== 'normal') ? compStyles.fontVariant + ' ' : ''}${compStyles.fontSize} ${compStyles.fontFamily}` || '20px sans-serif';
canvas.set({
backgroundColor,
});
el.style.backgroundColor = 'transparent';
el.style.color = 'transparent';
const animatedGradient = scrawl.makeGradient({
name: `${name}-gradient`,
start: [0, '-150%'],
end: [0, '250%'],
paletteStart: 0,
paletteEnd: 299,
delta: {
paletteStart: -1,
paletteEnd: -1,
},
cyclePalette: true,
})
.updateColor(0, 'orange')
.updateColor(89, 'orange')
.updateColor(110, 'red')
.updateColor(289, 'red')
.updateColor(310, 'lightblue')
.updateColor(489, 'lightblue')
.updateColor(510, 'gold')
.updateColor(689, 'gold')
.updateColor(710, 'green')
.updateColor(889, 'green')
.updateColor(910, 'orange')
.updateColor(999, 'orange');
scrawl.makeLabel({
name: `${name}-text`,
group,
fontString,
text: el.innerText,
fillStyle: `${name}-gradient`,This is a bad fix for mis-aligned text - a better solution would be to expose startX and startY so coder could set them individually for each instance where this snippet is used, so the replacement canvas text can line up exactly with its surrounding text
startY: '5%',We do not want to expose this canvas text in the DOM as it already exists in the DOM (this snippet just makes it invisible by setting its color to ‘transparent’). The last thing non-visual users need is repeated text.
exposeText: false,
});
animation.set({
commence: () => animatedGradient.updateByDelta(),
});
}Return the snippet, so coders can access the snippet’s parts - in case they need to tweak the output to meet the web page’s specific requirements
return snippet;
}