Blank

Developer
Esambino Wei Cheng Hsieh
Size
5,630 Kb
Views
8,096
  1. Blank Previews
  2. Blank HTML Codes
  3. Blank CSS Codes
  4. Blank JS Codes

How do I make an blank?

What is a blank? How do you make a blank? This script and codes were developed by Esambino Wei Cheng Hsieh on 07 January 2023, Saturday.

Blank Previews
IQ Test

Blank - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>blank</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url( https://fonts.googleapis.com/css?family=Lato:400,700 )
html, body font-family: 'Lato', sans-serif background: #13242f overflow: hidden
#container &:before @include background-image( radial-gradient( center, ellipse cover, rgba(0,0,0,0) 20%, rgba(0,0,0,1) 95% ) ) position: absolute content: '' z-index: 0 opacity: 0.9 height: 100% width: 100% left: 0 top: 0 &:after background: url( 'https://s.cdpn.io/1715/noise-1.png' ) position: absolute content: '' z-index: 1 opacity: 0.8 height: 100% width: 100% left: 0 top: 0
audio position: absolute z-index: 2 right: 0 top: 0
.message $height: 60px $width: 360px box-shadow: 0 2px 4px rgba(0,0,0,0.2) text-transform: uppercase border-radius: 3px text-align: center line-height: 1.2 background: rgba(0,0,0,0.8) position: absolute margin-left: $width * -0.5 margin-top: $height * -0.5 font-size: 13px padding: 20px display: none z-index: 3 height: $height width: $width color: #fff left: 50% top: 50% h1, h2 font-weight: 300 margin: 10px 0 a text-decoration: none font-weight: 700 color: #1B676B
#intro display: block </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <script src="https://soulwire.github.io/sketch.js/js/sketch.min.js"></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Blank - Script Codes CSS Codes

@import url( https://fonts.googleapis.com/css?family=Lato:400,700 )
html, body font-family: 'Lato', sans-serif background: #13242f overflow: hidden
#container &:before @include background-image( radial-gradient( center, ellipse cover, rgba(0,0,0,0) 20%, rgba(0,0,0,1) 95% ) ) position: absolute content: '' z-index: 0 opacity: 0.9 height: 100% width: 100% left: 0 top: 0 &:after background: url( 'https://s.cdpn.io/1715/noise-1.png' ) position: absolute content: '' z-index: 1 opacity: 0.8 height: 100% width: 100% left: 0 top: 0
audio position: absolute z-index: 2 right: 0 top: 0
.message $height: 60px $width: 360px box-shadow: 0 2px 4px rgba(0,0,0,0.2) text-transform: uppercase border-radius: 3px text-align: center line-height: 1.2 background: rgba(0,0,0,0.8) position: absolute margin-left: $width * -0.5 margin-top: $height * -0.5 font-size: 13px padding: 20px display: none z-index: 3 height: $height width: $width color: #fff left: 50% top: 50% h1, h2 font-weight: 300 margin: 10px 0 a text-decoration: none font-weight: 700 color: #1B676B
#intro display: block

Blank - Script Codes JS Codes

/* Music is by The XX @see http://thexx.info This is best viewed in Chrome since there is a bug in Safari when using getByteFrequencyData with MediaElementAudioSource @see https://goo.gl/6WLx1
*/
var ALPHA, AudioAnalyser, COLORS, MP3_PATH, NUM_BANDS, NUM_PARTICLES, Particle, SCALE, SIZE, SMOOTHING, SPEED, SPIN;
NUM_PARTICLES = 150;
NUM_BANDS = 128;
SMOOTHING = 0.5;
MP3_PATH = 'https://s.cdpn.io/1715/the_xx_-_intro.mp3';
SCALE = { MIN: 5.0, MAX: 80.0
};
SPEED = { MIN: 0.2, MAX: 1.0
};
ALPHA = { MIN: 0.8, MAX: 0.9
};
SPIN = { MIN: 0.001, MAX: 0.005
};
SIZE = { MIN: 0.5, MAX: 1.25
};
COLORS = ['#69D2E7', '#1B676B', '#BEF202', '#EBE54D', '#00CDAC', '#1693A5', '#F9D423', '#FF4E50', '#E7204E', '#0CCABA', '#FF006F'];
AudioAnalyser = (function() { AudioAnalyser.AudioContext = self.AudioContext || self.webkitAudioContext; AudioAnalyser.enabled = AudioAnalyser.AudioContext != null; function AudioAnalyser(audio, numBands, smoothing) { var src, _this = this; this.audio = audio != null ? audio : new Audio(); this.numBands = numBands != null ? numBands : 256; this.smoothing = smoothing != null ? smoothing : 0.3; if (typeof this.audio === 'string') { src = this.audio; this.audio = new Audio(); this.audio.controls = true; this.audio.src = src; } this.context = new AudioAnalyser.AudioContext(); this.jsNode = this.context.createJavaScriptNode(2048, 1, 1); this.analyser = this.context.createAnalyser(); this.analyser.smoothingTimeConstant = this.smoothing; this.analyser.fftSize = this.numBands * 2; this.bands = new Uint8Array(this.analyser.frequencyBinCount); this.audio.addEventListener('canplay', function() { _this.source = _this.context.createMediaElementSource(_this.audio); _this.source.connect(_this.analyser); _this.analyser.connect(_this.jsNode); _this.jsNode.connect(_this.context.destination); _this.source.connect(_this.context.destination); return _this.jsNode.onaudioprocess = function() { _this.analyser.getByteFrequencyData(_this.bands); if (!_this.audio.paused) { return typeof _this.onUpdate === "function" ? _this.onUpdate(_this.bands) : void 0; } }; }); } AudioAnalyser.prototype.start = function() { return this.audio.play(); }; AudioAnalyser.prototype.stop = function() { return this.audio.pause(); }; return AudioAnalyser;
})();
Particle = (function() { function Particle(x, y) { this.x = x != null ? x : 0; this.y = y != null ? y : 0; this.reset(); } Particle.prototype.reset = function() { this.level = 1 + floor(random(4)); this.scale = random(SCALE.MIN, SCALE.MAX); this.alpha = random(ALPHA.MIN, ALPHA.MAX); this.speed = random(SPEED.MIN, SPEED.MAX); this.color = random(COLORS); this.size = random(SIZE.MIN, SIZE.MAX); this.spin = random(SPIN.MAX, SPIN.MAX); this.band = floor(random(NUM_BANDS)); if (random() < 0.5) { this.spin = -this.spin; } this.smoothedScale = 0.0; this.smoothedAlpha = 0.0; this.decayScale = 0.0; this.decayAlpha = 0.0; this.rotation = random(TWO_PI); return this.energy = 0.0; }; Particle.prototype.move = function() { this.rotation += this.spin; return this.y -= this.speed * this.level; }; Particle.prototype.draw = function(ctx) { var alpha, power, scale; power = exp(this.energy); scale = this.scale * power; alpha = this.alpha * this.energy * 1.5; this.decayScale = max(this.decayScale, scale); this.decayAlpha = max(this.decayAlpha, alpha); this.smoothedScale += (this.decayScale - this.smoothedScale) * 0.3; this.smoothedAlpha += (this.decayAlpha - this.smoothedAlpha) * 0.3; this.decayScale *= 0.985; this.decayAlpha *= 0.975; ctx.save(); ctx.beginPath(); ctx.translate(this.x + cos(this.rotation * this.speed) * 250, this.y); ctx.rotate(this.rotation); ctx.scale(this.smoothedScale * this.level, this.smoothedScale * this.level); ctx.moveTo(this.size * 0.5, 0); ctx.lineTo(this.size * -0.5, 0); ctx.lineWidth = 1; ctx.lineCap = 'round'; ctx.globalAlpha = this.smoothedAlpha / this.level; ctx.strokeStyle = this.color; ctx.stroke(); return ctx.restore(); }; return Particle;
})();
Sketch.create({ particles: [], setup: function() { var analyser, i, intro, particle, warning, x, y, _i, _ref, _this = this; for (i = _i = 0, _ref = NUM_PARTICLES - 1; _i <= _ref; i = _i += 1) { x = random(this.width); y = random(this.height * 2); particle = new Particle(x, y); particle.energy = random(particle.band / 256); this.particles.push(particle); } if (AudioAnalyser.enabled) { try { analyser = new AudioAnalyser(MP3_PATH, NUM_BANDS, SMOOTHING); analyser.onUpdate = function(bands) { var _j, _len, _ref1, _results; _ref1 = _this.particles; _results = []; for (_j = 0, _len = _ref1.length; _j < _len; _j++) { particle = _ref1[_j]; _results.push(particle.energy = bands[particle.band] / 256); } return _results; }; analyser.start(); document.body.appendChild(analyser.audio); intro = document.getElementById('intro'); intro.style.display = 'none'; if (/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)) { warning = document.getElementById('warning2'); return warning.style.display = 'block'; } } catch (error) { } } else { warning = document.getElementById('warning1'); return warning.style.display = 'block'; } }, draw: function() { var particle, _i, _len, _ref, _results; this.globalCompositeOperation = 'lighter'; _ref = this.particles; _results = []; for (_i = 0, _len = _ref.length; _i < _len; _i++) { particle = _ref[_i]; if (particle.y < -particle.size * particle.level * particle.scale * 2) { particle.reset(); particle.x = random(this.width); particle.y = this.height + particle.size * particle.scale * particle.level; } particle.move(); _results.push(particle.draw(this)); } return _results; }
});
$(html).hide();
Blank - Script Codes
Blank - Script Codes
Home Page Home
Developer Esambino Wei Cheng Hsieh
Username Esambino
Uploaded January 07, 2023
Rating 3
Size 5,630 Kb
Views 8,096
Do you need developer help for Blank?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Esambino Wei Cheng Hsieh (Esambino) Script Codes
Name
Svg effect practice
CSS3 Slider Practice
Apple iPhone 5s style scrolling
My three.js practice
My first Timeline
Slap
Cafe Lakulaku
Present Box
Open
Practice hover
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!