絢爛的紙花（Gorgeous shredded paper）

示例

HTML

<h1>ABC</h1>

CSS

body {
  background: #333;
}

h1 {
  font-family: helvetica, arial, sans-serif;
  font-size: 1em;
  font-weight: 400;
  text-transform: uppercase;
  color: #ddd;
  text-align: center;
  letter-spacing: 1px;

  position: absolute;
  top: 60%;
  left: 0;
  width: 100%;
  outline: 0;
  
  -webkit-touch-callout: none; 
  -webkit-user-select: none;   
  -khtml-user-select: none;    
  -moz-user-select: none;      
  -ms-user-select: none;       
  user-select: none; 
}

JS

var scene, camera, renderer,
    width = window.innerWidth,
    height = window.innerHeight,
    aspect = width / height,
    timing = 1.5,
    numShapes = 20,
    geometries = [
      new THREE.BoxGeometry(1, 1, 1),
      new THREE.TetrahedronGeometry(1, 0),
      new THREE.OctahedronGeometry(1, 0),
      new THREE.IcosahedronGeometry(1, 0)
    ],
    colors = [
      new THREE.Color(0xffff00),
      new THREE.Color(0xffff66),
      new THREE.Color(0xffffaa)
    ],
    material = new THREE.MeshLambertMaterial({ color: 0xffff00 }),
    shapes = [];

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, aspect, .1, 1000);
renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });

camera.position.z = 0;
renderer.setSize( width, height );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setClearColor( 0xffffff, 0);
renderer.shadowMap.enabled = true;
renderer.shadowMapSoft = true;

/////////
// 
// LIGHTING
//
/////////
camera.add(new THREE.AmbientLight(0xFFFFFF));

var light, backlight, droplight;

light = new THREE.DirectionalLight(0xffffff, 1.8);
light.position.set(60, 100, 20);
scene.add(light)

backlight = new THREE.DirectionalLight(0xffffff, 1.8);
backlight.position.set(-60, 100, 20)
scene.add(backlight)

droplight = new THREE.DirectionalLight(0xffffff, 1.8);
droplight.position.set(0, -50, 0)
scene.add(droplight)

document.body.appendChild(renderer.domElement);

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

render();

function explode (e) { 
  e.preventDefault()
  
  var xPos = (e.pageX - width / 2) / 15,
      yPos = (e.pageY - height / 2) / -15;
  
  // create shapes
  for (var i = 0; i < numShapes; i++) {
    var geometryIndex = random(0, geometries.length - 1),
        geometry = geometries[geometryIndex],
        shape = new THREE.Mesh( geometry , material );

    // set a random position/rotation to start
    shape.position.x = xPos + random(-2, 2);
    shape.position.y = yPos + random(-2, 2);
    shape.position.z = -20;
    shape.rotation.x = random(0, 1);
    shape.rotation.y = random(0, 1);

    // clone material so we can change color/opacity of this 
    // shape independently from the rest
    var cloneMaterial = shape.material.clone();
    shape.material = cloneMaterial;
    shape.material.opacity = 0;
    shape.material.color = colors[random(0,colors.length - 1)];
    
    
    //////////////
    //
    // Animation 
    //
    //////////////
    
    TweenMax.set(shape.scale, {
      x: 0,
      y: 0,
      z: 0
    });
  
    TweenMax
      .to(shape.scale, timing, {
        bezier: {
          curviness: 1.25,
          values: [
            { x: 1.2,  y: 1.2 , z: 1.2 },
            { x: .8, y: .8, z: .8 },
            { x: .2, y: .2, z: .2 },
            { x: 0,  y: 0 , z: 0 }
          ]
        }
    });
    
    TweenMax
      .to(shape.material, timing, {
        bezier: {
          curviness: 1.25,
          values: [
            { opacity: 1 },
            { opacity: 1 },
            { opacity: .4 },
            { opacity: 0, }
          ]
        },
        onComplete: () => {
          scene.remove(shape);
        }
    });
        
    TweenMax.to(shape.position, timing, {
      x: xPos + random(-10, 10),
      y: yPos + random(-10, 10),
      ease: Cubic.easeOut
    });
    
    TweenMax.to(shape.rotation, timing, {
      y: random(-10, 10),
      x: random(-10, 10),
      ease: Cubic.easeOut
    });

    shapes.push(shape);
    scene.add(shape);
  }
}

document.addEventListener('click', explode)
document.addEventListener('touchstart', explode)

function random(min, max) {
  return Math.floor(Math.random() * (1 + max - min) + min)
}