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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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 Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>ZIM Line</title>

		<!-- Welcome to ZIM at http://zimjs.com - Code Interactive Media Pizzazz!             -->
		<!-- ZIM runs on the HTML Canvas powered by JavaScript and CreateJS http://createjs.com -->
		<!-- Founded by Inventor Dan Zen - http://danzen.com - Canadian New Media Award Winner     -->
		<!-- ZIM is free to use. You can donate to help improve ZIM at http://zimjs.com/donate     -->

		<script src="https://zimjs.org/cdn/1.2.3/createjs_min.js"></script>
		<script src="https://zimjs.org/cdn/10.7.1/zim.js"></script>
		<!-- use zimjs.com/distill for minified individual functions! -->

		<script src="https://zimjs.org/cdn/pizzazz_03.js"></script>

		<script>

			// SCALING OPTIONS
			// scaling can have values as follows with full being the default
			// "fit"    sets canvas and stage to dimensions and scales to fit inside window size
			// "outside"    sets canvas and stage to dimensions and scales to fit outside window size
			// "full"    sets stage to window size with no scaling
			// "tagID"    add canvas to HTML tag of ID - set to dimensions if provided - no scaling

			const scaling = "banner"; // target the banner tag
			const width = 1000;
			const height = 150;
			const color = dark;
			const outerColor = dark;
			
			// as of ZIM 5.5.0 you do not need to put zim before ZIM functions and classes
			var frame = new Frame(scaling, width, height, color, outerColor);
			frame.on("ready", ()=>{
				zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

				const stage = frame.stage;
				const stageW = frame.width;
				const stageH = frame.height;
				
				// the general idea is we have two ZIM Frame objects each with their own canvas and stage 
				// the first we see to start and it is scaled to fit in the div with id=banner 
				// this frame is interactive 
				// the second is a full window frame and it is not interactive
				// this allows us to interact with the HTML 
				// we made it not interactive by turning off the canvas pointerEvents 
				// we hide and show the content when we press anywhere on the banner 
				// we could have made a button, etc.
				
				// BTW -	we can certainly make objects travel along paths see https://zimjs.com/nio/
				// here we wanted to give the illusion of a continuous path so used ZIM Noise.

				// make the animated backing lines with ZIM Pizzazz - see imported js file for details
				pizzazz.makePattern({
					type:"stripes",
					size:50,
					cols:20,
					colors:series([pink, purple]),
					interval:700					
				})
					.sca(-1,1) // goes in other direction normally
					.alp(.5)
					.cur() // pass in any css cursor - default "pointer"
					.center();

				const icon = frame.makeIcon(null, "#222").pos(20,0,LEFT,CENTER);
				// used the icon size and position but want the backing behind the icon so ord(-1)
				// will animate this in later
				const backing = new Rectangle(icon.width, icon.height, pink).loc(icon).mov(6,6).ord(-1).alp(0);
				new Label("FOLLOW", 100, "impact", white).alp(.5).noMouse().pos(icon.width+45,16,LEFT,CENTER);

				// constants for animated line				
				const bumps = 7; // number of bumps
				const curve = 60; // "radius" of Bezier handle
				const size = 75; // height from center - so max is roughly twice this
				const step = .01; // bigger for faster speed

				// we make lots of times eventually so make a class
				// in the first case it gets a grey fill in the other cases it does not 
				// segments is what line segment to put the triangle arrow at 
				// and we are creating this from two different frames with different stages 
				// if we want the Ticker inside to update the second stage we need the stage
				class Line extends Container {
					constructor(w, h, fill=true, segment=4, stage) {
						super(w, h); // make the ZIM Container

						// the shape object
						// this.shape if we want to reference it outside (we do not need to in this case)
						// this is a reference to the container we have extended 
						// which will also hold all the stuff we add here and be the object made from this class
						const shape = this.shape = new Shape(w, h).addTo(this); 

						// the noise object
						const noise = this.noise = new Noise(); 

						let j = 0; // second parameter for simplex2D
						let count = 0; // ticker count

						const arrow = this.arrow = new Triangle(40,40,40,white,pink,3).rot(-90).addTo(this);

						// we will wiggle the arrow between two points
						// this dist will give us a ratio moving at least .2 and no more than .5 from the .5 start
						// in a time of at least 1000 and no more than 5000 ms
						// store a custom property on the arrow to wiggle
						arrow.dist = .5;
						arrow.wiggle("dist", .5, .2, .5, 1000, 5000);

						// Ticker runs fast
						Ticker.add(function() {
							// see https://zimjs.com/noise/ for a bunch of noise examples
							count++;
							j += step; // increase second parameter by just a little to animate the line
							var lastX = -5; // just off stage so can't see pink border
							var lastY = h/2;

							// zim provides tiny graphics API on the Shape
							// To use full names like clear(), beginStroke(), setStrokeStyle(), beginFill(),
							// moveTo(), lineTo(), bezierCurveTo(), etc. 
							// put these on the graphics property of the shape
							// for instance shape.graphics.moveTo(), etc. blah
							// The fill still has the pink stroke which we do not want to see 
							// so make this go off stage to the left, right and bottom
							if (fill) shape.c().s(pink).ss(3).f(dark).mt(-5,w+5).lt(lastX, lastY);
							else shape.c().s(pink).ss(3).lt(lastX, lastY); // no fill

							loop(bumps, function(i) {
								var x = (i+1)*w/bumps+5; // +5 just makes sure the last one is off the stage
								var y = h/2 + noise.simplex2D(i,j)*size;
								shape.bt(lastX+curve, lastY, x-curve, y, x, y);
								if (i==segment) {
									var points = [{x:lastX, y:lastY}, {x:lastX+curve,y:lastY}, {x:x-curve,y:y}, {x:x,y:y}];
									var data = pointAlongCurve(points, arrow.dist, true);
									arrow.loc(data.x,data.y).rot(data.angle-90)
								}
								lastX = x;
								lastY = y;
							});
							if (fill) shape.lt(w+5,h+5); // finish the fill versions
						}, stage);
					}
				}

				// the shape for the line with fill - we see this to start
				new Line(stageW, stageH, true, 4, stage).addTo().bot().ord(1);

				// toggle the other lines on the second stage - see below
				stage.on("stagemousedown", ()=>{
					if (lines.getChildAt(0).alpha == 0) { // we can't see the lines so show them
						lines.animate({
							props:{alpha:{min:.2, max:1}},
							sequence:100
						});
						backing.animate({alpha:1}, 1000);
					} else { // we can see the lines so hide them
						lines.animate({
							props:{alpha:0},
							sequence:100,
							call:() => {
								lines.loop(line=>{ // randomize the line angles for next time
									line.rot(rand(10,70));
								});
							}
						});
						backing.animate({props:{alpha:0}, time:700, wait:1200});
					}
				});

				// the second frame which is full window (Frame defaults to full)
				const frame2 = new Frame();
				let lines = null; // declare outside as we use this above
				frame2.on("ready", function () {
					
					// make the canvas not interactive
					// otherwise would not be able to select html text or click links, etc.
					frame2.canvas.style.pointerEvents = "none"; 

					const stage = frame2.stage;
					lines = new Container(frame2.width, frame2.height).addTo(stage);

					loop(10, ()=>{
						// false is no fill and 2-5 is which segment to put the arrow
						new Line(stageW, stageH, false, rand(2,5), stage) 
							.centerReg(lines)
							.reg(0) // move the regX back to 0
							.alp(0) // we will animate them in
							.loc(0,0) // move lines to corner
							.rot(rand(10,70)); // rotate randomly
					});
					frame2.on("resize", () => {
						// the full mode does not scale 
						// so we need to position manually to match the scaling of the banner 
						// note, because ZIM Retina, there is actually a scale to the second frame
						lines.loc(
							(icon.x+icon.width+4)*frame.scale/frame2.scale,
							(icon.y+icon.height+4)*frame.scale/frame2.scale
						);
						stage.update();
					});
				});

			}); // end of ready

			// docs for items used:
			// https://zimjs.com/docs.html?item=Frame
			// https://zimjs.com/docs.html?item=Container
			// https://zimjs.com/docs.html?item=Shape
			// https://zimjs.com/docs.html?item=Rectangle
			// https://zimjs.com/docs.html?item=Triangle
			// https://zimjs.com/docs.html?item=Label
			// 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=cur
			// https://zimjs.com/docs.html?item=pos
			// https://zimjs.com/docs.html?item=loc
			// https://zimjs.com/docs.html?item=mov
			// 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=reg
			// https://zimjs.com/docs.html?item=sca
			// https://zimjs.com/docs.html?item=addTo
			// https://zimjs.com/docs.html?item=centerReg
			// https://zimjs.com/docs.html?item=center
			// https://zimjs.com/docs.html?item=rand
			// https://zimjs.com/docs.html?item=Noise
			// https://zimjs.com/docs.html?item=pointAlongCurve
			// https://zimjs.com/docs.html?item=zog
			// https://zimjs.com/docs.html?item=Ticker
			
		</script>

		<style>
			body {margin:0px;}			
			#bannerCanvas {
				width:100% !important; /* not sure what is going on with codepen! */
				height:100% !important; /* should only need width:100% */
				min-width:360px;
			}
			main {
				font-family:verdana;
				size:40px;
				color:white;
				margin:20px;
				border-radius:50px;
				background-color:#222;
				padding:30px;
				line-height: 25px;
			}
			main a {
				background-color:#555555;
				padding:1px 4px;
				display:inline-block;
				color:#eeeeee;
				text-decoration: none;
			}
			main a:hover {
				color:#222;
				background-color: yellow;
			}
			main img {height:120px;}
		</style>

		<meta name="viewport" content="width=device-width, user-scalable=no" />

	</head>

	<body>
		<div id="banner"></div>
		<main>
			Content!
			<p>This is normal HTML content.  Click the banner to toggle a surprise!</p>
			<p>
				ZIM is having a contest with $2020 prizes - for real.
				Come on over to <a href="https://zimjs.com/zapp/" target="_blank">https://zimjs.com/zapp/</a> and check it out!
				There are ten $202 prizes for the best Zapp! each month.
				A Zapp! is a quick game, puzzle, art, app, etc. made with ZIM.
				You can make interactive works so easily!
				Please visit the CodePen Topics page at <a href="https://codepen.io/topic/zim" target="_blank">https://codepen.io/topic/zim</a>
			</p>

			<img src="https://d309knd7es5f10.cloudfront.net/ten/drabstract.png" alt="Dr Abstract from ZIM">

		</main>
	</body>
</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console