Jitter

README.md

Jitter

view on jsgist

index.css

html, body {
  margin: 0;
  overflow: hidden; /* because of #s */
}
canvas {
  display: block;
}
#s {
  position: absolute;
  top: 100px;
  background-color: red;
}

index.html

<div id="s">sphere</div>
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r94/three.min.js"></script>

index.js

function init() {
  scene = new THREE.Scene();
  camera = new THREE.OrthographicCamera(10 / -2, 10 / 2, 10 / 2, 10 / -2, 1, 1000);
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  let geometry = new THREE.SphereGeometry(1, 32, 32);
  let material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
  sphere = new THREE.Mesh(geometry, material);
  scene.add(sphere);
  camera.position.z = 5;
}

function animate() {
  requestAnimationFrame(animate);
  moveSphere();
  renderer.render(scene, camera);
}

sphereDiv = document.querySelector('#s');
const start = Date.now();

function moveSphere() {
  let lapse = Date.now() - start;
  let time = Date.now() / 2;
  sphere.position.x = -5 + ((time - 2500) /120) % 10.5;
  sphereDiv.style.left = (time % window.innerWidth) + 'px';
}

init();
animate();

jsGist.json

{"name":"Jitter","settings":{},"filenames":["index.html","index.css","index.js"]}