Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
              
            
!

CSS

              
                
              
            
!

JS

              
                // ZIM Frame has different scaling modes to fit the window 
// most ZIM examples on CodePen use "fit" mode
// try changing to "fit" to see what happens 
// outside will fit the stage so it is outside the window 
// and usually centered 
// we wanted the top of the stage to be at the top of the window 
// so we use valign:TOP on the Frame
// There is also "full" mode and "tag" mode but "outside" is easier in this case

const frame = new Frame({
	scaling:"outside",
	width:1024,
	height:768,
	color:blue.lighten(.5),
	valign:TOP 
});
frame.on("ready", ()=>{ // ES6 Arrow Function - similar to function(){}
	zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

	// often need below - so consider it part of the template
	const stage = frame.stage;
	const stageW = frame.width;
	const stageH = frame.height;

	// 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

	// *** NOTE: ZIM Cat defaults to time in seconds
	// All previous versions, examples, videos, etc. have time in milliseconds
	// This can be set back with TIME = "milliseconds" but we suggest you give it a try!
	// There will be a warning in the conslole if your animation is not moving ;-)

	// CODE HERE

	// make a Balloon class 
	class Balloon extends Container {
		constructor (color=red, stripe=white, basket=brown) {

			// use the system where we can pass in dynamic parameters (ZIM VEE values) 
			// The Pick() formats handle:
			//    1. a random selection: ["blue", "green", "yellow"] - array format
			//    2. a random range: {min:10, max:30} - range object format
			//    3. a series: series(10,20,30) - series format also Pick.series()
			//    4. a function result: function(){return new Date().minutes} - function format
			//    5. a normal value: 7 or "hello" - single-value format
			//    6. a noPick object: {noPick:["real", "array"]} - escape format
			//    7. a combination: [{min:10, max:20}, 30, 40] - combination format (recursive)

			color = Pick.choose(color); // or zik(color) - this was the original ZIM based name
			stripe = Pick.choose(stripe);
			basket = Pick.choose(basket);

			// call the Container which Balloon extends 
			// Circular things usually have the origin in the middle 
			// so half the bounds are to the left and top 
			// then we have the width and height being twice the radius
			// these bounds will not take into account the basket
			// we will adjust that after adding the basket
			const radius = 500;
			super(-radius,-radius,radius*2,radius*2);			

			// make the baloon
			const circle = new Circle(radius, color).addTo(this);			
			new Rectangle(radius*2, radius*rand(.2,.4), stripe).center(this).setMask(circle);
			new Circle({radius:radius, color:black, percent:50}).alp(.2).rot(-90).addTo(this);			
			new Circle(radius, new RadialColor([black.toAlpha(.2), clear],[0,.7], 50,0,radius, 0,0,0)).addTo(this);
			// the fade shapes will be used to fade out more distant balloons - see fade() method
			this.circleFade = new Circle(radius, frame.color).addTo(this).alp(0);
			
			// make the rope
			// a Flare gives us perspective boxes
			const rope = new Flare({
				color:clear, 
				borderColor:silver,
				borderWidth:2,
				thickness:radius*.7, // the base size
				lengths:radius*.45, // the length of the flare
				angles:90, // the direction of the flare (down)
				anglesA:-20 // the angle to set the sides - anglesB will match anglesA if not provided
			}).pos(0,-radius*.35,CENTER,BOTTOM,this,0); // below and behind the balloon
			const rope2 = new Flare({
				color:clear, 
				borderColor:silver,
				borderWidth:2,
				thickness:radius*.4,
				lengths:radius*.45,
				angles:90,
				anglesA:-10
			}).pos(0,-radius*.35,CENTER,BOTTOM,this,0);

			// make the basket - the word basket is already used by the basket color
			const flare = new Flare({
				color:new GradientColor([basket.darken(.4), basket],[0,1],0,0,radius*.4,27), 
				borderColor:basket.darken(.5),
				borderWidth:4,
				thickness:radius*.4,
				lengths:[radius*.2,radius*.2/10],
				angles:90,
				anglesA:[-5,-30]
			}).loc(rope.x, rope.y+rope.height-5,this,0).ord(2); // move above ropes
			pizzazz.makePattern("pixels").scaleTo(flare,100,100,"biggest").center(flare).setMask(flare).alp(.3);
			this.basketFade = flare.clone().addTo(this,flare.level+1).alp(0);
			this.basketFade.color = this.basketFade.borderColor = this.basketFade.spine = frame.color;

			// make the head(s)
			new Circle(20, brown.darken(rand(.5,.9))).pos(rand(-5,5),-25,CENTER,TOP,flare,0)
			if (rand()>.5) new Circle(18, brown.darken(rand(.5,.9))).pos(rand(30,60,null,true),-20,CENTER,TOP,flare,0)

			// wiggle the baloon in rotation and up and down
			// do not use y for wiggling up and down as that is being animated
			// so instead use the registration point
			this.wiggle("rotation",0,2,5,2,2.5);
			this.wiggle("regY",0,10,60,2,4);

			// adjust for basket
			this.setBounds()
		}   
		fade(amount=.5) {
			this.circleFade.alpha = this.basketFade.alpha = amount;
			return this; // make chainable
		}     
	}
	
	const ours = new Balloon() 
		.cache()
		.sca(.5)
		.loc(stageW/2, 0)
		.noMouse();
	
	// all the other balloons
	const balloons = new Container(stageW, stageH)
		.addTo()
		.bot()
		.noMouse(); // important for efficiency

	const colors = [red,green,blue,pink,yellow,orange,purple,grey,light]
	// noticed that each time a balloon was made the animation jittered a little...
	// so make balloons ahead of time and just loop 10 or 20 or whatever
	loop(10, ()=>{
		// passing in colors will let Balloon "pick" from the colors
		// because of the ZIM Pick.choose() being used 
		// passing in a series would pick in order, etc.
		let balloon = new Balloon(colors, colors, colors).sca(rand(.1,.4));
		balloon.fade(.55-balloon.scale).cache();
		balloon.loc(stageW*rand(), -balloon.height, balloons, 0)
	});
	balloons.sortChildren((a,b)=>{
		return a.scale>b.scale?1:-1;
	});   
	
	TIMECHECK = false; // a time check was added to ZIM for anything over 10s when it was converted from ms to s
	interval({min:.5, max:5}, obj=>{
		let balloon = balloons.getChildAt(obj.count);
		balloon.animate({
			props:{y:1000},
			ease:"linear",
			time:3/balloon.scale,
			loop:true,
			loopCall:target=>{
				target.loc(rand(stageW));
			}
		});	         
	}, 10, true); // start right away
	
	// FOOTER
	// call remote script to make ZIM icon - you will not need this
	const icon = createIcon(); 
	
	frame.on("resize", ()=>{		
		// for the "outside" scale mode we may only see a small part of the height of the stage 
		// although we have aligned it at the top 
		// we want to make sure we see the basket 
		// so use the frame.visibleBottom which tells the position 
		// of the bottom of the visible part of the stage
		// ours.height-ours.width/2 will be the distance 
		// from the registration to the bottom of the basket
		// this will keep the basket in view when in Details view for instance
		ours.y = Math.min(0, frame.visibleBottom-(ours.height-ours.width/2))
		icon.loc(frame.visibleRight-icon.width-20, frame.visibleBottom-icon.height-20)
	});

	// DOCS FOR ITEMS USED
	// https://zimjs.com/docs.html?item=Frame
	// https://zimjs.com/docs.html?item=Container
	// https://zimjs.com/docs.html?item=Circle
	// https://zimjs.com/docs.html?item=Rectangle
	// https://zimjs.com/docs.html?item=Flare
	// https://zimjs.com/docs.html?item=noMouse
	// https://zimjs.com/docs.html?item=animate
	// https://zimjs.com/docs.html?item=wiggle
	// https://zimjs.com/docs.html?item=loop
	// https://zimjs.com/docs.html?item=pos
	// https://zimjs.com/docs.html?item=loc
	// https://zimjs.com/docs.html?item=bot
	// https://zimjs.com/docs.html?item=ord
	// https://zimjs.com/docs.html?item=alp
	// https://zimjs.com/docs.html?item=rot
	// 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=interval
	// https://zimjs.com/docs.html?item=GradientColor
	// https://zimjs.com/docs.html?item=RadialColor
	// https://zimjs.com/docs.html?item=series
	// https://zimjs.com/docs.html?item=Pick
	// https://zimjs.com/docs.html?item=lighten
	// https://zimjs.com/docs.html?item=darken
	// https://zimjs.com/docs.html?item=toAlpha
	// https://zimjs.com/docs.html?item=zog
	// https://zimjs.com/docs.html?item=zik


}); // end of ready
              
            
!
999px

Console