import zim from "https://zimjs.org/cdn/017/zim";
// REFERENCES for ZIM at https://zimjs.com
// see https://zimjs.com/intro.html for an intro example
// see https://zimjs.com/learn.html for video and code tutorials
// see https://zimjs.com/docs.html for documentation
// see https://codepen.io/topic/zim/ for ZIM on CodePen
const assets = ["fascination3.jpg", "dancing_square.jpg", "dancing_fascination.jpg"];
const path = "https://assets.codepen.io/2104200/";
const frame = new Frame(FIT, 2000, 1000, black, black, ready, assets, path);
function ready() {
// given F (Frame), S (Stage), W (width), H (height)
// put code here
const mask = new Rectangle(W,H*.75).reg(CENTER).pos(0,H*.05,CENTER);
const one = new Pic("dancing_square.jpg").scaleTo(S,null,100).addTo().ble("screen").setMask(mask, true);
const two = new Pic("fascination3.jpg").scaleTo(S,null,100).pos(0,0,RIGHT).ble("screen").setMask(mask, true);
const pic = new Pic("dancing_fascination.jpg").scaleTo(S,100).center().ble("screen").setMask(mask, true);
const loader = new Loader();
const save = new Button({label:"SAVE"}).tap(()=>{
const bounds = mask.boundsToGlobal();
// usually we just loader.save(S) or some other container but here we crop
loader.save(S, null, bounds.x, bounds.y, bounds.width, bounds.height);
});
const slider = new Slider({range:true, max:1}).change(()=>{
one.x = slider.rangeSliderA.value*W/2;
two.x = slider.rangeSliderB.value*W/2;
}).sca(1.8);
const slider2 = new Slider({range:true, max:1}).change(()=>{
mask.widthOnly = (slider2.rangeMax-slider2.rangeMin)*W;
mask.x = slider2.rangeAve*W;
S.update();
}).sca(1.8);
slider.rangeMax = 1;
slider2.rangeMax = 1;
const icon = F.makeIcon({box:faint}).tap(()=>{zgo("https://zimjs.com")});
STYLE = {valign:CENTER}
new Tile([save, slider, slider2, icon],4,1,100,0,true).pos(0,15,CENTER,BOTTOM);
}
// Docs for items used:
// https://zimjs.com/docs.html?item=Frame
// https://zimjs.com/docs.html?item=Pic
// https://zimjs.com/docs.html?item=Rectangle
// https://zimjs.com/docs.html?item=Button
// https://zimjs.com/docs.html?item=Slider
// https://zimjs.com/docs.html?item=Loader
// https://zimjs.com/docs.html?item=tap
// https://zimjs.com/docs.html?item=change
// https://zimjs.com/docs.html?item=boundsToGlobal
// https://zimjs.com/docs.html?item=pos
// https://zimjs.com/docs.html?item=ble
// https://zimjs.com/docs.html?item=reg
// https://zimjs.com/docs.html?item=sca
// https://zimjs.com/docs.html?item=scaleTo
// https://zimjs.com/docs.html?item=addTo
// https://zimjs.com/docs.html?item=center
// https://zimjs.com/docs.html?item=setMask
// https://zimjs.com/docs.html?item=Tile
// https://zimjs.com/docs.html?item=STYLE
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.