Scroll scramble effect

Animates the company name when the page is scrolled via the scroll wheel.
meese-enterprises · Mar 23, 2022 · 2e175de · 2e175de
1 parent d7ae750
commit 2e175de
Show file tree

Hide file tree

Showing 4 changed files with 205 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -16,6 +16,7 @@
 	<link rel="apple-touch-icon" href="logo.png">
 
 	<link rel="stylesheet" href="style.css">
+	<link rel="stylesheet" href="scrollScramble.css">
 </head>
 
 <body>
@@ -33,9 +34,11 @@
 			只說一句話 = Just say the word
 		-->
 		<span id="chineseName" class="chineseShadow">米斯企业有限责任公司</span>
-		<span id="companyName">MEESE</span>
-		<span id="companyType">ENTERPRISES</span>
+		<span id="companyName" class="scrollScramble">MEESE</span>
+		<span id="companyType" class="scrollScramble">ENTERPRISES</span>
 		<span id="chineseTagline" class="chineseShadow">只說一句話</span>
 		<span id="tagline">Just say the word.</span>
 	</div>
+
+	<script src="scrollScramble.js"></script>
 </body>
diff --git a/scrollScramble.css b/scrollScramble.css
@@ -0,0 +1,77 @@
+:root {
+	--position: 0;
+}
+
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body,
+html {
+	width: 100%;
+	height: 100%;
+	font-family: "Share Tech Mono", monospace;
+}
+
+.scrollScramble {
+	font-size: 30px;
+	font-weight: bold;
+	letter-spacing: 4px;
+}
+
+.scrambling.is-changing {
+	animation: changing 0.1s infinite;
+}
+
+.scrambling {
+	transition: all 0.1s;
+	position: relative;
+	will-change: transform, opacity;
+}
+
+.scrambling:after {
+	content: attr(data-txt);
+	color: #eee;
+	position: absolute;
+	top: 0;
+	left: 0;
+	opacity: 0;
+	will-change: transform, opacity;
+}
+
+.scrambling.is-changing:after {
+	animation: changingAfter 0.4s infinite alternate;
+}
+
+@keyframes changing {
+	0% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.5;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes changingAfter {
+	0% {
+		opacity: 0.3;
+		transform: translateX(10px) scaleX(2)
+	}
+
+	50% {
+		opacity: 0;
+		transform: translateX(0) scaleX(2)
+	}
+
+	100% {
+		opacity: 0.3;
+		transform: translateX(-10px) scaleX(2)
+	}
+}
diff --git a/scrollScramble.js b/scrollScramble.js
@@ -0,0 +1,122 @@
+/**
+ * Rearranges the indices of an array and returns the new array.
+ * @returns {Array}
+ */
+Array.prototype.shuffle = function () {
+	const input = this;
+
+	for (let i = input.length - 1; i >= 0; i--) {
+		const randomIndex = Math.floor(Math.random() * (i + 1));
+		const itemAtIndex = input[randomIndex];
+
+		input[randomIndex] = input[i];
+		input[i] = itemAtIndex;
+	}
+
+	return input;
+}
+
+/**
+ * Modified from https://codepen.io/blazicke/pen/dQjxMr
+ */
+const stringRandom = (function() {
+	const data = {
+		isScrolling: false,
+		repeat: 0,
+		target: [],
+		letters: "*+-/@_$[%£!XO1&>",
+		originalStrings: [],
+		singleLetters: []
+	};
+
+	function checkLength(x) {
+		return Array.from(document.querySelectorAll(x)).length > 0;
+	}
+
+	function changeLetter(letter) {
+		if (letter.textContent != " ") {
+			letter.classList.add("is-changing");
+			letter.style.animationDuration = Math.random().toFixed(2) + "s";
+
+			const newChar = data.letters.substr(Math.random() * data.letters.length, 1);
+			letter.textContent = newChar;
+			letter.setAttribute("data-txt", newChar);
+		}
+	}
+
+	function resetLetter(letter) {
+		const originalValue = letter.getAttribute("data-original");
+		letter.classList.remove("is-changing");
+		letter.textContent = originalValue;
+		letter.setAttribute("data-txt", originalValue);
+	}
+
+	function divideLetters() {
+		data.targets.forEach((element, index) => {
+			const text = element.textContent;
+			let textDivided = "";
+
+			data.originalStrings[index] = text;
+
+			for (let i = 0; i < text.length; i++) {
+				textDivided += `<span class="scrambling scrollScramble-${index}-span-${i}" data-txt="${text.charAt(i)}" data-original="${text.charAt(i)}">${text.charAt(i)}</span>`;
+			}
+
+			element.innerHTML = textDivided;
+		});
+
+		data.singleLetters = document.querySelectorAll(".scrambling");
+	}
+
+	// changes letters
+	function changeLetters() {
+		if (data.isScrolling) {
+			data.singleLetters.forEach(function (el, index) {
+				changeLetter(el);
+			});
+		}
+
+		setTimeout(changeLetters, 10);
+	}
+
+	/** Reset to initial letters */
+	function resetLetters() {
+		let randomArray = [];
+		for (let i = 0; i < data.singleLetters.length; i++) {
+			randomArray.push(i);
+		}
+
+		randomArray.shuffle();
+		randomArray.forEach(function (el, index) {
+			setTimeout(function () {
+				resetLetter(data.singleLetters[el]);
+			}, (index * 20 * (Math.random() * 5))).toFixed(2);
+		});
+	}
+
+	function updateScrollState() {
+		data.isScrolling = true;
+
+		setTimeout(function () {
+			data.isScrolling = false;
+			resetLetters();
+			clearTimeout(this);
+		}, 300);
+	};
+
+	return {
+		init: function(selector) {
+			if (checkLength(selector)) {
+				data.targets = Array.from(document.querySelectorAll(selector));
+				divideLetters();
+				changeLetters();
+
+				// `wheel` instead of `scroll` for when the page is only a splash, not
+				// more than 100% of the viewer height
+				window.addEventListener("wheel", updateScrollState);
+			}
+		}
+	}
+})();
+
+stringRandom.init(".scrollScramble");
diff --git a/style.css b/style.css
@@ -34,6 +34,7 @@ nav {
 	height: 50px;
 	background-color: #000;
 	z-index: 1;
+	user-select: none;
 }
 
 #navLogo {