Moving lines illusion while scrolling

Developer
Matthias Dittgen
Size
3,358 Kb
Views
66,792
  1. Moving lines illusion while scrolling Previews
  2. Moving lines illusion while scrolling HTML Codes
  3. Moving lines illusion while scrolling CSS Codes
  4. Moving lines illusion while scrolling JS Codes

How do I make an moving lines illusion while scrolling?

Please scroll and see the nice illusion of moving colorful lines between paragraphs. via @mieky, who was inspired the background of @Cabel's twitter page. What is a moving lines illusion while scrolling? How do you make a moving lines illusion while scrolling? This script and codes were developed by Matthias Dittgen on 26 August 2022, Friday.

Moving lines illusion while scrolling Previews
IQ Test

Moving lines illusion while scrolling - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Moving lines illusion while scrolling</title> <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="info"> <h1>Moving lines illusion</h1> <p> <strong>Please scroll</strong><br> …and see the nice illusion of "moving" colorful lines between paragraphs<br> via <a href="https://twitter.com/mieky">@mieky</a>, who was inspired the background of <a href="https://twitter.com/Cabel">@Cabel</a>'s twitter page.</p>
</div>
<div id="wrapper"> <button>new random colors</button>	<canvas id="space" width="400" height="400">	you need canvas support for this example	</canvas>	<ul>	<li>	<h4>Lorem ipsum</h4>	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>	</li>	<li>	<h4>Lorem ipsum</h4>	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>	</li>	<li>	<h4>Lorem ipsum</h4>	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>	</li>	<li>	<h4>Lorem ipsum</h4>	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>	</li>	<li>	<h4>Lorem ipsum</h4>	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>	</li>	<li>	<h4>Lorem ipsum</h4>	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>	</li>	<li>	<h4>Lorem ipsum</h4>	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>	</li>	<li>	<h4>Lorem ipsum</h4>	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>	</li>	</ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Moving lines illusion while scrolling - Script Codes CSS Codes

html,
body { width: 100%; height: 100%; margin: 0;
}
body{ position: relative; background-color: #333333;
}
#info { margin: 12px 0 0 12px;
}
h1 { color: #eeeeee; font-size: 21px; font-weight: normal; margin: 0;
}
#info p,
#info a { margin: 3px 0 0 0; color: #ccc; font-size: 13px;
}
#info a { color: #fff;
}
#wrapper{	margin: 12px 0 0 12px;	width: 400px;	position: relative;
}
button{ font-size: 11px;
}
canvas,
ul{	display: block;	width: 400px;	height: 400px;	position: absolute;	top: 25px;	left: 0;	margin: 0;	border: 1px solid black;
}
canvas { background: #fff;
}
ul{	padding: 0;	list-style: none;	border: 1px solid lightgray;	overflow: auto;
}
li{	display: block;	background-color: rgb(255,255,255);	background-color: rgba(255,255,255,0.9);	width: 380px;	padding: 3px 10px;	font-family: sans-serif;	font-size: 12px;	margin: 12px 0;
}

Moving lines illusion while scrolling - Script Codes JS Codes

// --------------------------------------------------
// Color utils
function ColorUtils() {};
ColorUtils.hex2rgb = function (hex) {	var r,g,b,gb;	r = hex>>16 ;	gb = hex ^ r << 16 ;	g = gb>>8 ;	b = gb^g<<8 ;	return { r: r, g: g, b: b};
}
ColorUtils.ca2rgba = function (color, alpha) {	var rgb = ColorUtils.hex2rgb(color);	return 'rgba(' + rgb.r +', ' + rgb.g + ', ' + rgb.b + ', ' + alpha + ')';
}
// --------------------------------------------------
// Math utils
function MathUtils() {};
MathUtils.getRandomInt = function (min, max) {	return Math.floor(Math.random() * (max - min + 1)) + min;
}
MathUtils.getRandom = function (min, max) {	return Math.random() * (max - min + 1) + min;
}
// --------------------------------------------------
// add some convenience methods to 2D canvas context
var cr_proto = CanvasRenderingContext2D.prototype;
cr_proto.setStroke = function (thickness, color, alpha) {	this.lineWidth = thickness;	this.strokeStyle = ColorUtils.ca2rgba(color, alpha);
};
cr_proto.setFill = function (color, alpha) {	this.fillStyle = ColorUtils.ca2rgba(color, alpha);
};
cr_proto.clear = function () {	this.clearRect(0, 0, this.canvas.width, this.canvas.height);
};
// --------------------------------------------------
var initContext = function (canvasId) {	var canvas = document.getElementById(canvasId);	if (!canvas || !canvas.getContext) return;	var context = canvas.getContext('2d');	context.lineCap = 'round';	return context;
};
var drawLine = function (xS, yS, xE, yE, lineWidth, color, context) {	// draw quadrativ bezier spline curve using canvas native method	context.beginPath();	context.moveTo( xS, yS);	context.lineTo( xE, yE);	context.setStroke(lineWidth, color, 1);	context.stroke();
};
var c = initContext('space');
var w = c.canvas.width;
var h = c.canvas.height;
var run = function() {	c.clear();	var n = MathUtils.getRandom(40, 80);	var m = 0.1 * MathUtils.getRandomInt(1, 30);	var offset = 0, k = 0, i = 0;	while (k<3) {	var lin = MathUtils.getRandomInt(5, 10);	var col = MathUtils.getRandomInt(0, 0xffffff);	var i = -w * m + offset;	while (i < w) {	drawLine(i, h, i + (w*m), 0, lin, col, c);	i += n;	}	offset += lin;	k++;	}
}
document.getElementsByTagName('button')[0].addEventListener('click', run);
run();
Moving lines illusion while scrolling - Script Codes
Moving lines illusion while scrolling - Script Codes
Home Page Home
Developer Matthias Dittgen
Username matths
Uploaded August 26, 2022
Rating 3
Size 3,358 Kb
Views 66,792
Do you need developer help for Moving lines illusion while scrolling?

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!

Matthias Dittgen (matths) Script Codes
Name
Shapes in cricles
1x1 trainer
Text-shadow spiral
WIP
Draw a line coord
SVG Button
Timebox
Text-shadow fireworks
Text-shadow outline demo
D3 bar chart experiment
Create amazing love letters 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!