Scroll type

Little test for an interface idea where scrolling pushes text around

by soulwire

HTML

<script src="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&#39;"></script>
<div id="text"></div>
<div id="scroll">
  <div id="content"></div>
</div>
<div id="info">
This text would change when a title is in focus to show further details about the project and stuff
<a href="#">— view</a>
</div>

CSS

html, body {
  background: #2b2b2b;
  margin: 0;
  font-family: 'Roboto Mono';
  /* font-family: 'Paytone One', sans-serif; */
  /* font-family: 'Roboto Condensed', sans-serif; */
  font-size: 140px;
  font-weight: 800;
  line-height: 0.8;
  text-transform: uppercase;
  overflow: hidden;
  color: #fff;
}
#text {
 word-wrap: break-word;
 /* white-space: break-all; */
}
#text, #scroll {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}
#scroll {
  overflow: auto;
}
#content {
  height: 4000px;
}
#info {
  position: absolute;
  right: 65px;
  bottom: 10px;
  width: 55%;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 300;
}
#info a {
  color: #fff;
  display: block;
}

Babel + JSX

const textEl = document.getElementById('text')
const scrollEl = document.getElementById('scroll')
const words = [
	'hello',
  'kinetic typography',
  'gravity particles',
	'makisu',
  'plasmatic isosurface',
  'muscular hydrostats',
  'bit based wander',
  'jingle balls',
  'show me your bits',
  'station to station'
].join('/').replace(/\s+/g, '') + '.'
const cells = []
const maxLetters = 80
const update = (progress = 0) => {
	const min = progress * (words.length - maxLetters)
  const max = min + maxLetters
	textEl.innerText = words.substring(min, max)
}
scrollEl.addEventListener('scroll', event => {
	const progress = scrollEl.scrollTop / (scrollEl.scrollHeight - window.innerHeight)
  update(progress)
})
update(0)