- Use the file
catalogation.js
to write your slide
- There are 2 things (elements & timeLine)
const elements = [
//🦃 put your Element here, for exemple:
//Element('id') ....
]
createElements(elements)
timeLine(({id, id2}) => [
//🦘 put your timeline functions here, for exemple
//({ id, id2 }) => {.....}
])
Element('id') //replace for your id
.caixa({
width: '0px',
height: '0px',
top: '-500px',
left: '50px',
// style atributes
})
Element('id') //replace for your id
.caixa({
width: '0px',
height: '0px',
top: '-500px',
left: '50px',
// style atributes
})
.addImg('url') //replace for your url
Element('id') //replace for your id
.caixa({
width: '0px',
height: '0px',
top: '-500px',
left: '50px',
// style atributes
})
.addText('text') //replace for your text
Element('id') //replace for your id
.caixa({
width: '0px',
height: '0px',
top: '-500px',
left: '50px',
// style atributes
})
.addText('text') //replace for your text
.filho({
// style atributes
})
Element('id') //replace for your id
.caixa({
width: '0px',
height: '0px',
top: '-500px',
left: '50px',
// style atributes
})
.addText('text') //replace for your text
.multiStyle('you_match_text', {
//style atributes who will work only in text match
})
Element('id') //replace for your id
.caixa({
width: '0px',
height: '0px',
top: '-500px',
left: '50px',
// style atributes
})
.addText('text') //replace for your text
.multiStyle('you_match_text', {
//style atributes who will work only in text match
text: 'newTest'
})
.filho({
child: 1, // ( child: "all" ) is default
fontSize: '70px',
})
() => {
id.caixa({
//style atributes
}).filho({
//style atributes
})
id2.caixa({
//style atributes
}).filho({
//style atributes
})
}
myElementId.flex({w : 2, h: 2, line 1}) // width: 20% | heigh: 20% | especifique line 1
// use flex empty to remove flex
myElementId.flex()
//remove flex and throw to up
myElementId.caixa({...jogar('up')}).flex()
// you can use that in style atributes of CAIXA
...relativeHorizontal('1-3/4')
...relativeVertical('1-2/4')
- you can use this parameters in caixa in initial style:
...jogar('top') // come from top
...jogar('bottom') // come from bottom
...jogar('left') // come from left
...jogar('right') // come from right
- Create template
function _templateNew() {
return {
elements: [],
timeLine: (el) => {}
}
}
- If you wanna resize the Caixa, but not text break line, use scale
.caixa({
scale: 0, // 0 to 1... 0 is like: with: 0 and heigh 0
})
.caixa({
scale: 1, // 0 to 1... 1 is like: with: "auto", heigh: "auto" (real size)
})
.caixa({
scale: 0.5 // 0.5 is like 50% of real value size
})
-
if you wanna show something, use just
flex
-
Use template ( in file
catalogation.js
)
const x = _templateNew(params)
const elements = [
...x.elements,
]
timeLine(el => [
...x.timeLine(el),
])
}
timeLine(({ exemple_text, teach, image_1, image_2 }) => [
() => {
teach.flex({ w: 7, h: 3.6 })
},
() => {
teach.flex({ w: 7, h: 3 })
image_1.flex({ w: 4, h: 5.5, line: 2 })
},
() => {
teach.flex({ w: 7, h: 3 })
image_1.flex({ w: 4, h: 5.5, line: 2 })
image_2.flex({ w: 4, h: 5.5, line: 2 })
},
() => {
exemple_text.flex({ w: 4, h: 5.5, line: 2 })
image_1
.caixa({ opacity: 0.4, height: '50vh', top: '40vh', zIndex: '-6' })
.flex()
},
])
- Hidden Como você vai esconder a caixa
- "top" | "down" | "left" ...
- "opacity"