Screen effect

Developer
Toshiyuki TAKAHASHI
Size
3,008 Kb
Views
26,312
  1. Screen effect Previews
  2. Screen effect HTML Codes
  3. Screen effect CSS Codes
  4. Screen effect JS Codes

How do I make an screen effect?

With pixi.js. What is a screen effect? How do you make a screen effect? This script and codes were developed by Toshiyuki TAKAHASHI on 30 September 2022, Friday.

Screen effect Previews
IQ Test

Screen effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Screen effect</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="pixistage"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/pixi.js/2.2.7/pixi.js'></script> <script src="js/index.js"></script>
</body>
</html>

Screen effect - Script Codes CSS Codes

body { background: #000;
}
#pixistage { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin: -200px 0 0 -300px;
}

Screen effect - Script Codes JS Codes

WebFontConfig = {	google: { families: [ 'Lato:900:latin' ] }
};
(function() { // Load Google Fonts	var wf = document.createElement('script');	wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); // Properties var properties = { 'width': 600, 'height': 400, 'word': 'HELLO\nWORLD!!', 'currentText': '', 'size': 80, 'blur': 4 } // Text Objects var textObj = { 'red': createText(properties.currentText, '#FF0000', properties.size), 'green': createText(properties.currentText, '#00FF00', properties.size), 'blue': createText(properties.currentText, '#0000FF', properties.size) } // Pixi.js Init var stage = new PIXI.Stage(0x000000); var renderer = PIXI.autoDetectRenderer(properties.width, properties.height); document.getElementById('pixistage').appendChild(renderer.view); // Blur Filter var filter = new PIXI.BlurFilter(); filter.blur = properties.blur; // Mouseup Event stage.mouseup = function() { buildText(); } // Create Text Oobjects for (var key in textObj){ textObj[key].filters = [filter]; stage.addChild(textObj[key]); } function createText(text, color, size) { var style = {font:'bold ' + size + 'pt Lato', align: 'center', fill: color}; var to = new PIXI.Text(text, style); to.anchor.x = 0.5; to.anchor.y = 0.5; to.position.x = properties.width/2; to.position.y = properties.height/2; to.blendMode = PIXI.blendModes.SCREEN; return to; } // Animation function animate(){ var max = 1.5, min = -1.5; for (var key in textObj){ filter.blur = properties.blur * getRandom(1, 3); textObj[key].filters = [filter]; textObj[key].position.x = properties.width/2 + getRandom(min, max); } renderer.render(stage); requestAnimFrame(animate); } animate(); // Get Random Number function getRandom(min, max) { return Math.random() * (max - min + 1) + min; } // Build Text var timerID; function buildText(){ properties.currentText = '';	if(timerID) crearInterval(timerID); timerID = setInterval(function(){ //console.log(textObj[key].text); if(properties.currentText === properties.word) { crearInterval(timerID); return; } properties.currentText = properties.word.substr(0, properties.currentText.length+1); for (var key in textObj){ textObj[key].setText(properties.currentText); } }, 250); } buildText();
})();
Screen effect - Script Codes
Screen effect - Script Codes
Home Page Home
Developer Toshiyuki TAKAHASHI
Username gau
Uploaded September 30, 2022
Rating 4
Size 3,008 Kb
Views 26,312
Do you need developer help for Screen effect?

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!

Toshiyuki TAKAHASHI (gau) Script Codes
Name
No nest max-width
Gau9000
Blue light button
SVG Stroke Animation
STAR WARS OPENING CSS
Vue.js and Responsive
Eliminate a gap from inline and inline-block
Bxslider hover test
OpenType features for body text
Fixed line-height space
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!