Forked from: cx20's Happy New Year 2014 View Diff (173) Happy Valentine's Day 2014 cx20 Follow 2014-02-14 02:27:21 License: MIT License Fork1 Fav0 View3148 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 538 lines HTML 20 lines SCSS / Compass 259 lines Happy Valentine's Day 2014 この作品は、WebGL 開発者フォーラムのバレンタイン企画への投稿作品です。 ■ Happy Valentines Day + WebGL http://jp.wgld.org/WebGL-Valentin/ ■ WebGL 開発者フォーラム https://groups.google.com/forum/#!forum/japan-webgl-dev ハートのドット絵は以下のものを参考にさせて頂きました。 ■ Q-BLOCK Create 3D Pixel Art Online http://kyucon.com/qblock/#/82 <関連> ■ Happy Valentine's Day 2014 ver2 - jsdo.it - 某チョコを落下させてみるテスト - http://jsdo.it/cx20/HappyValentinesDay2014ver2 Happy Valentine's Day 2014 jQuery Easing v1.3 jQuery v2.0.3 // forked from cx20's "Happy New Year 2014" http://jsdo.it/cx20/HappyNewYear2014 // forked from cx20's "無限大に変化するロゴ(IE11ロゴ版)" http://jsdo.it/cx20/cTcl // forked from cx20's "無限大に変化するロゴ" http://jsdo.it/cx20/9lUe // forked from jsdo.it_team's "HTML5 Experts.jp Contest エントリー用コード" http://jsdo.it/jsdo.it_team/html5experts_vol1 $(window).bind("load", function () { // テキストを取得 var text = $("#copy").text(); $("#copy") .empty() // 一旦、空にする .show(); // 表示する var arr = text.split(""); // 一文字ずつ、配列に格納 var elements = []; var i; // 一文字ずつ、spanタグで包む for (i = 0; i < arr.length; i++) { elements[i] = $("<span>" + arr[i] + "</span>"); $("#copy").append(elements[i]); // 元の場所に挿入 } for (i = 0; i < elements.length; i++) { elements[i] .css({top:-60, opacity:0}) .delay(40 * i) .animate({top:0, opacity:1}, 500, "easeOutExpo"); } // 3D アニメーション開始 init(); animate(); }); //---------------------------------------------------------------------- var container, stats; var camera, controls, scene, renderer; var mesh, plane; var light1, light2; var ID = 1; var list = []; var targetRotation = 0; var targetRotationOnMouseDown = 0; var rotationSpeed = 0.05; var mouseX, mouseY, mouseXOnMouseDown, mouseYOnMouseDown = 0; //var windowHalfX = 290; // window.innerWidth / 2; //var windowHalfY = 210; // window.innerHeight / 2; var windowHalfX = 460; // window.innerWidth / 2; var windowHalfY = 460; // window.innerHeight / 2; var ROT_SPEED = 200; var group_rot = 0; var group; var theta = 0; var DOT_SIZE = 10; var X_START_POS = -7 * DOT_SIZE; var Y_START_POS = -7 * DOT_SIZE; var Z_START_POS = -1.5 * DOT_SIZE; /* http://kyucon.com/qblock/#/82 */ var dataSet = [ [ "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","桃","桃","×","×","×","桃","桃","×","×","×","×","×", "×","×","×","桃","桃","桃","桃","×","桃","桃","桃","桃","×","×","×","×", "×","×","×","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×","×","×", "×","×","×","×","桃","桃","桃","桃","桃","桃","桃","×","×","×","×","×", "×","×","×","×","×","桃","桃","桃","桃","桃","×","×","×","×","×","×", "×","×","×","×","×","×","桃","桃","桃","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","桃","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×" ], [ "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","桃","桃","桃","×","×","×","×","桃","桃","×","×","×","×", "×","×","桃","桃","桃","桃","×","×","×","桃","桃","桃","桃","×","×","×", "×","×","桃","桃","桃","桃","桃","×","桃","桃","桃","桃","桃","×","×","×", "×","×","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×","×", "×","×","×","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×","×","×", "×","×","×","×","桃","桃","桃","桃","桃","桃","桃","×","×","×","×","×", "×","×","×","×","×","桃","桃","桃","桃","桃","×","×","×","×","×","×", "×","×","×","×","×","×","桃","桃","桃","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","桃","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×" ], [ "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","桃","桃","桃","×","×","×","桃","桃","桃","×","×","×","×", "×","×","桃","桃","桃","桃","桃","×","桃","桃","桃","桃","桃","×","×","×", "×","桃","桃","桃","桃","桃","桃","×","桃","桃","桃","桃","桃","桃","×","×", "×","桃","桃","桃","桃","桃","桃","×","桃","桃","桃","桃","桃","桃","×","×", "×","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×", "×","×","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×","×", "×","×","×","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×","×","×", "×","×","×","×","桃","桃","桃","桃","桃","桃","桃","×","×","×","×","×", "×","×","×","×","×","桃","桃","桃","桃","桃","×","×","×","×","×","×", "×","×","×","×","×","×","桃","桃","桃","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","桃","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×" ], [ "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","桃","桃","桃","×","×","×","桃","桃","桃","×","×","×","×", "×","×","桃","桃","桃","桃","桃","×","桃","桃","桃","桃","桃","×","×","×", "×","桃","桃","桃","桃","桃","桃","×","桃","桃","桃","桃","桃","桃","×","×", "×","桃","桃","桃","桃","桃","桃","×","桃","桃","桃","桃","桃","桃","×","×", "×","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×", "×","×","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×","×", "×","×","×","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×","×","×", "×","×","×","×","桃","桃","桃","桃","桃","桃","桃","×","×","×","×","×", "×","×","×","×","×","桃","桃","桃","桃","桃","×","×","×","×","×","×", "×","×","×","×","×","×","桃","桃","桃","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","桃","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×" ], [ "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","桃","桃","桃","×","×","×","桃","桃","桃","×","×","×","×", "×","×","桃","桃","桃","桃","桃","×","桃","桃","桃","桃","桃","×","×","×", "×","桃","桃","桃","桃","桃","桃","×","桃","桃","桃","桃","桃","桃","×","×", "×","桃","桃","桃","桃","桃","桃","×","桃","桃","桃","桃","桃","桃","×","×", "×","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×", "×","×","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×","×", "×","×","×","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×","×","×", "×","×","×","×","桃","桃","桃","桃","桃","桃","桃","×","×","×","×","×", "×","×","×","×","×","桃","桃","桃","桃","桃","×","×","×","×","×","×", "×","×","×","×","×","×","桃","桃","桃","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","桃","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×" ], [ "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","桃","桃","桃","×","×","×","×","桃","桃","×","×","×","×", "×","×","桃","桃","桃","桃","×","×","×","桃","桃","桃","桃","×","×","×", "×","×","桃","桃","桃","桃","桃","×","桃","桃","桃","桃","桃","×","×","×", "×","×","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×","×", "×","×","×","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×","×","×", "×","×","×","×","桃","桃","桃","桃","桃","桃","桃","×","×","×","×","×", "×","×","×","×","×","桃","桃","桃","桃","桃","×","×","×","×","×","×", "×","×","×","×","×","×","桃","桃","桃","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","桃","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×" ], [ "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","桃","桃","×","×","×","桃","桃","×","×","×","×","×", "×","×","×","桃","桃","桃","桃","×","桃","桃","桃","桃","×","×","×","×", "×","×","×","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×","×","×", "×","×","×","×","桃","桃","桃","桃","桃","桃","桃","×","×","×","×","×", "×","×","×","×","×","桃","桃","桃","桃","桃","×","×","×","×","×","×", "×","×","×","×","×","×","桃","桃","桃","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","桃","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×" ] ]; function getRgbColor( c ) { var colorHash = { "×":"#000000", "黒":"#000000", "白":"#ffffff", "橙":"#f16529", "赤":"#e44d26", "茶":"#804000", "桃":"#ffaec9", "水":"#369cd6", "青":"#2162af" }; return colorHash[ c ]; } var colorSet = [ { light1:0x700000, light2:0xff0000 }, { light1:0x3D1605, light2:0x603927 }, { light1:0xffffff, light2:0xffffff } ]; function getRandomColor() { var r = Math.floor(Math.random() * 128); var g = Math.floor(Math.random() * 128); var b = Math.floor(Math.random() * 128); return "rgb(" + r + "," + g + "," + b + ")"; } function init() { if (isWebgl()) renderer = new THREE.WebGLRenderer({ antialias: true }); else renderer = new THREE.CanvasRenderer(); renderer.setSize(windowHalfX, windowHalfY); document.getElementById('logo-vertical').appendChild(renderer.domElement); //The smaller the first number is, the closer the cube appears camera = new THREE.PerspectiveCamera(50, windowHalfX / windowHalfY, 1, 1000); //The height of the camera in comparison to the scene camera.position.x = -100; camera.position.y = 250; //The zoom level of the camera camera.position.z = 200; //The mouse controls that allow for dragging of cube closer or further away visually controls = new THREE.TrackballControls(camera); controls.rotateSpeed = 1.0; controls.zoomSpeed = 1.0; controls.panSpeed = 0.8; controls.noZoom = false; controls.noPan = false; controls.staticMoving = true; controls.dynamicDampingFactor = 0.3; controls.addEventListener('change', render, false); //Create the scene scene = new THREE.Scene(); group = new THREE.Object3D(); scene.add(group); var i, j; var x, y, z; var meshArray = []; var color; var geometry = new THREE.CubeGeometry(DOT_SIZE * 0.8, DOT_SIZE * 0.8, DOT_SIZE * 0.8); for (j = 0; j < dataSet.length; j++) { for (i = 0; i < dataSet[j].length; i++) { x = (i % 16) * DOT_SIZE + X_START_POS; y = (16 - Math.floor(i / 16)) * DOT_SIZE + Y_START_POS; z = j * DOT_SIZE + Z_START_POS; color = getRgbColor(dataSet[j][i]); if (dataSet[j][i] != "×") { var material = new THREE.MeshLambertMaterial({ color: color }); meshArray[i] = new THREE.Mesh(geometry, material); meshArray[i].position.x = x - 0; meshArray[i].position.y = y; meshArray[i].position.z = z; group.add(meshArray[i]); list.push(meshArray[i]); } } } //ライティング light1 = new THREE.DirectionalLight(0x3D1605, 0.5); light1.position.set(100, 100, 100).normalize(); scene.add(light1); light2 = new THREE.DirectionalLight(0x603927, 1.0); light2.position.set(-100, 100, 100).normalize(); scene.add(light2); document.addEventListener('mousedown', onDocumentMouseDown, false); document.addEventListener('touchstart', onDocumentTouchStart, false); document.addEventListener('touchmove', onDocumentTouchMove, false); window.addEventListener('resize', onWindowResize, false); setInterval(changeID, 5000); } function onWindowResize() { windowHalfX = window.innerWidth / 2; windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); controls.handleResize(); render(); } function onDocumentMouseDown(event) { event.preventDefault(); document.addEventListener('mousemove', onDocumentMouseMove, false); document.addEventListener('mouseup', onDocumentMouseUp, false); document.addEventListener('mouseout', onDocumentMouseOut, false); mouseXOnMouseDown = event.clientX - windowHalfX; targetRotationOnMouseDown = targetRotation; } function onDocumentMouseMove(event) { mouseX = event.clientX - windowHalfX; mouseY = event.clientY - windowHalfY; } function onDocumentMouseUp(event) { document.removeEventListener('mousemove', onDocumentMouseMove, false); document.removeEventListener('mouseup', onDocumentMouseUp, false); document.removeEventListener('mouseout', onDocumentMouseOut, false); } function onDocumentMouseOut(event) { //To get rid of redundant code, call function that does same thing above onDocumentMouseUp(event); } function onDocumentTouchStart(event) { if (event.touches.length === 1) { event.preventDefault(); mouseXOnMouseDown = event.touches[0].pageX - windowHalfX; targetRotationOnMouseDown = targetRotation; } } function onDocumentTouchMove(event) { if (event.touches.length === 1) { event.preventDefault(); mouseX = event.touches[0].pageX - windowHalfX; //The rotation of the cube on its' x-axis targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * rotationSpeed; } } /**************THIS BLOCK IS NECESSARY -> DRAWS DEBUG AXES********************/ var debugaxis = function (axisLength) { //Shorten the vertex function function v(x, y, z) { return new THREE.Vector3(x, y, z); } //Create axis (point1, point2, colour) function createAxis(p1, p2, color) { var line, lineGeometry = new THREE.Geometry(), lineMat = new THREE.LineBasicMaterial({ color: color, lineWidth: 1 }); lineGeometry.vertices.push(p1, p2); line = new THREE.Line(lineGeometry, lineMat); scene.add(line); } createAxis(v(-axisLength, 0, 0), v(axisLength, 0, 0), 0xFF0000); createAxis(v(0, -axisLength, 0), v(0, axisLength, 0), 0x00FF00); createAxis(v(0, 0, -axisLength), v(0, 0, axisLength), 0x0000FF); }; //To use enter the axis length debugaxis(400); /**************************************************************************************/ function isWebgl() { try { return !!window.WebGLRenderingContext && !! document.createElement('canvas').getContext('experimental-webgl'); } catch (e) { return false; } } function animate() { requestAnimationFrame(animate); controls.update(); render(); } function render() { TWEEN.update(); group_rot += 0.0001 * ROT_SPEED; group.rotation.x = group_rot; group.rotation.y = group_rot; group.rotation.z = group_rot; renderer.render(scene, camera); } function changeID() { switch (ID) { case 1: changeFormation1(); break; case 2: changeFormation2(); break; case 3: changeFormation3(); break; default: changeFormation1(); break; } ID++; if (ID > 3) { ID = 1; changeColor(); } } function changeColor() { var rand = Math.floor( Math.random() * 3 ); var color = colorSet[rand]; light1.color.setHex( color.light1 ); light2.color.setHex( color.light2 ); } //Random function changeFormation1() { for (var i = 0; i < list.length; i++) { var rot = 360 / list.length * i; var vx = Math.random() * 600 - 300; var vy = Math.random() * 600 - 300; var vz = Math.random() * 600 - 300; new TWEEN.Tween(list[i].scale).to({ x: 1, y: 1, z: 1 }, 1000) .easing(TWEEN.Easing.Back.Out).start(); new TWEEN.Tween(list[i].position).to({ x: vx, y: vy, z: vz }, 1000) .easing(TWEEN.Easing.Exponential.InOut).start(); new TWEEN.Tween(list[i].rotation).to({ x: 0, y: rot, z: 0 }, 1000) .easing(TWEEN.Easing.Cubic.InOut).start(); } } //Cube function changeFormation2() { var i, j, k; var x, y, z; k = 0; for (j = 0; j < dataSet.length; j++) { for (i = 0; i < dataSet[j].length; i++) { x = (i % 16) * DOT_SIZE + X_START_POS; y = (16 - Math.floor(i / 16)) * DOT_SIZE + Y_START_POS; z = j * DOT_SIZE + Z_START_POS; if (dataSet[j][i] != "×") { new TWEEN.Tween(list[k].position).to({ x: x, y: y, z: z }, 1000) .easing(TWEEN.Easing.Exponential.InOut).start(); new TWEEN.Tween(list[k].rotation).to({ x: 0, y: 0, z: 0 }, 1000) .easing(TWEEN.Easing.Cubic.InOut).start(); k++; } } } } //Infinity function changeFormation3() { for (var i = 0; i < list.length; i++) { var rot = 2 * i; var vx = 150 * ( Math.cos(rot * Math.PI / 180) * Math.cos(rot * Math.PI / 180)) + Math.random() * 10; var vy = 150 * ( Math.cos(rot * Math.PI / 180) * Math.sin(rot * Math.PI / 180)) + Math.random() * 10; var vz = 150 * Math.cos(rot * Math.PI / 180) + Math.random() * 10; new TWEEN.Tween(list[i].scale).to({ x: 1, y: 1, z: 1 }, 1000) .easing(TWEEN.Easing.Back.Out).start(); new TWEEN.Tween(list[i].position).to({ x: vx, y: vy, z: vz }, 1000) .easing(TWEEN.Easing.Exponential.InOut).start(); new TWEEN.Tween(list[i].rotation).to({ x: 0, y: rot, z: 0 }, 1000) .easing(TWEEN.Easing.Cubic.InOut).start(); } } <!-- Three.js --> <script src="http://jsrun.it/assets/z/f/c/E/zfcEl"></script> <!-- TrackballControls.js --> <script src="http://jsrun.it/assets/7/I/f/5/7If5h"></script> <!-- Tween.js --> <!-- <script src="http://rawgithub.com/sole/tween.js/master/src/Tween.js"></script> --> <script src="http://jsrun.it/assets/l/c/M/C/lcMCo"></script> <link href='//fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:700' rel='stylesheet' type='text/css' /> <div class="main-logo" id="logo-vertical"> <div class="inner"> <div class="visual"> </div> <h1 class="main-title">Happy Valentine's Day</h1> <h2 id="copy">2014.2.14</h2> </div> </div> Happy Valentine's Day 2014 @import "compass"; @import "compass/reset"; @import "compass/css3/"; html { background-color: #f7a; } .main-logo { position: relative; width: 460px; height: 460px; background-color: #f7a; .inner { width: 162px; position: absolute; top :50%; left: 50%; margin-top: -69px; margin-left: -81px; text-decoration: none; color: #521; } h1 { font-family: 'Open Sans Condensed', sans-serif; text-align: center; margin-bottom: 10px; } .copy { text-align: center; word-wrap: normal; font-size: 10px; } .visual { position: relative; margin-bottom: 12px; @include transform-origin(50%); @include rotate(45deg); -webkit-animation: logoRotate .8s cubic-bezier(0.86, 0, 0.07, 1) 1s forwards; -moz-animation: logoRotate .8s cubic-bezier(0.86, 0, 0.07, 1) 1s forwards; -o-animation: logoRotate .8s cubic-bezier(0.86, 0, 0.07, 1) 1s forwards; -ms-animation: logoRotate .8s cubic-bezier(0.86, 0, 0.07, 1) 1s forwards; animation: logoRotate .8s cubic-bezier(0.86, 0, 0.07, 1) 1s forwards; .letter { position: absolute; top: 0; } .parts { position: absolute; width: 0; height: 0; } .letter-H { .parts-1 { @include skew(24deg,0); } .parts-2 { @include skew(-45deg,0); } .parts-3 { @include skew(45deg,0); } .parts-4 { @include skew(-24deg,0); } } .letter-X { .parts-1 { @include skew(0,25deg); } .parts-2 { @include skew(0,-25deg); } .parts-3 { @include skew(0,-25deg); } .parts-4 { @include skew(0,25deg); } } } } #logo-vertical { .main-title { font-size: 23px; } .visual { /* height: 78px; */ height: 200px; } .letter { width: 78px; height: 78px; } .letter-H { top: 1px; left: 38px; -webkit-animation: logoAnimationH 1s ease 1.8s forwards; -moz-animation: logoAnimationH 1s ease 1.8s forwards; -o-animation: logoAnimationH 1s ease 1.8s forwards; -ms-animation: logoAnimationH 1s ease 1.8s forwards; animation: logoAnimationH 1s ease 1.8s forwards; .parts-1,.parts-4 { left: 8px; } .parts-2,.parts-3 { left: 56px; } .parts-3,.parts-4 { top: 38px; } .parts-1 { border-top: 0px solid transparent; border-right: 21px solid transparent; border-bottom: 38px solid #f16529; } .parts-2 { border-top: 0px solid transparent; border-right: 21px solid transparent; border-bottom: 38px solid #f16529; } .parts-3 { border-top: 38px solid #e44d26; border-right: 21px solid transparent; border-bottom: 0px solid transparent; } .parts-4 { border-top: 38px solid #e44d26; border-right: 21px solid transparent; border-bottom: 0px solid transparent; } } .letter-X{ top: 2px; left: 38px; -webkit-animation: logoAnimationX 1s ease 1.8s forwards; -moz-animation: logoAnimationX 1s ease 1.8s forwards; -o-animation: logoAnimationX 1s ease 1.8s forwards; -ms-animation: logoAnimationX 1s ease 1.8s forwards; animation: logoAnimationX 1s ease 1.8s forwards; .parts-1,.parts-2 { top: 8px; } .parts-2,.parts-4 { left: 38px; } .parts-3,.parts-4 { top: 45px; } .parts-1 { border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 21px solid transparent; border-right: 38px solid #2162af; } .parts-2 { border-top: 0px solid transparent; border-right: 0px solid transparent; border-bottom: 21px solid transparent; border-left: 38px solid #369cd6; } .parts-3 { border-bottom: 0px solid transparent; border-left: 0px solid transparent; border-top: 21px solid transparent; border-right: 38px solid #2162af; } .parts-4 { border-bottom: 0px solid transparent; border-right: 0px solid transparent; border-top: 21px solid transparent; border-left: 38px solid #369cd6; } } } @-webkit-keyframes logoRotate { 0% { @include rotate(45deg); } 100% { @include rotate(3600deg); } } @-moz-keyframes logoRotate { 0% { @include rotate(45deg); } 100% { @include rotate(3600deg); } } @-ms-keyframes logoRotate { 0% { @include rotate(45deg); } 100% { @include rotate(3600deg); } } @-o-keyframes logoRotate { 0% { @include rotate(45deg); } 100% { @include rotate(3600deg); } } @keyframes logoRotate { 0% { @include rotate(45deg); } 100% { @include rotate(3600deg); } } @-webkit-keyframes logoAnimationX { 0% { left: 38px; } 100% { left: 85px; } } @-moz-keyframes logoAnimationX { 0% { left: 38px; } 100% { left: 85px; } } @-ms-keyframes logoAnimationX { 0% { left: 38px; } 100% { left: 85px; } } @-o-keyframes logoAnimationX { 0% { left: 38px; } 100% { left: 85px; } } @keyframes logoAnimationX { 0% { left: 38px; } 100% { left: 85px; } } @-webkit-keyframes logoAnimationH { 0% { left: 38px; } 100% { left: 0; } } @-moz-keyframes logoAnimationH { 0% { left: 38px; } 100% { left: 0; } } @-ms-keyframes logoAnimationH { 0% { left: 38px; } 100% { left: 0; } } @-o-keyframes logoAnimationH { 0% { left: 38px; } 100% { left: 0; } } @keyframes logoAnimationH { 0% { left: 38px; } 100% { left: 0; } } #container{ width: 290px; height: 210px; padding-top:100px; background:url(imgs/bg.jpg); font-family: 'Ropa Sans', cursive; } #copy { text-align: center; font-size: 10px; display: none; /* エフェクト適用前に一瞬見えるのを防ぐため */ } #copy span { position: relative; } Happy Valentine's Day 2014 この作品は、WebGL 開発者フォーラムのバレンタイン企画への投稿作品です。 ■ Happy Valentines Day + WebGL http://jp.wgld.org/WebGL-Valentin/ ■ WebGL 開発者フォーラム https://groups.google.com/forum/#!forum/japan-webgl-dev ハートのドット絵は以下のものを参考にさせて頂きました。 ■ Q-BLOCK Create 3D Pixel Art Online http://kyucon.com/qblock/#/82 <関連> ■ Happy Valentine's Day 2014 ver2 - jsdo.it - 某チョコを落下させてみるテスト - http://jsdo.it/cx20/HappyValentinesDay2014ver2 // forked from cx20's "Happy New Year 2014" http://jsdo.it/cx20/HappyNewYear2014 // forked from cx20's "無限大に変化するロゴ(IE11ロゴ版)" http://jsdo.it/cx20/cTcl // forked from cx20's "無限大に変化するロゴ" http://jsdo.it/cx20/9lUe // forked from jsdo.it_team's "HTML5 Experts.jp Contest エントリー用コード" http://jsdo.it/jsdo.it_team/html5experts_vol1 $(window).bind("load", function () { // テキストを取得 var text = $("#copy").text(); $("#copy") .empty() // 一旦、空にする .show(); // 表示する var arr = text.split(""); // 一文字ずつ、配列に格納 var elements = []; var i; // 一文字ずつ、spanタグで包む for (i = 0; i < arr.length; i++) { elements[i] = $("<span>" + arr[i] + "</span>"); $("#copy").append(elements[i]); // 元の場所に挿入 } for (i = 0; i < elements.length; i++) { elements[i] .css({top:-60, opacity:0}) .delay(40 * i) .animate({top:0, opacity:1}, 500, "easeOutExpo"); } // 3D アニメーション開始 init(); animate(); }); //---------------------------------------------------------------------- var container, stats; var camera, controls, scene, renderer; var mesh, plane; var light1, light2; var ID = 1; var list = []; var targetRotation = 0; var targetRotationOnMouseDown = 0; var rotationSpeed = 0.05; var mouseX, mouseY, mouseXOnMouseDown, mouseYOnMouseDown = 0; //var windowHalfX = 290; // window.innerWidth / 2; //var windowHalfY = 210; // window.innerHeight / 2; var windowHalfX = 460; // window.innerWidth / 2; var windowHalfY = 460; // window.innerHeight / 2; var ROT_SPEED = 200; var group_rot = 0; var group; var theta = 0; var DOT_SIZE = 10; var X_START_POS = -7 * DOT_SIZE; var Y_START_POS = -7 * DOT_SIZE; var Z_START_POS = -1.5 * DOT_SIZE; /* http://kyucon.com/qblock/#/82 */ var dataSet = [ [ "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","桃","桃","×","×","×","桃","桃","×","×","×","×","×", "×","×","×","桃","桃","桃","桃","×","桃","桃","桃","桃","×","×","×","×", "×","×","×","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×","×","×", "×","×","×","×","桃","桃","桃","桃","桃","桃","桃","×","×","×","×","×", "×","×","×","×","×","桃","桃","桃","桃","桃","×","×","×","×","×","×", "×","×","×","×","×","×","桃","桃","桃","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","桃","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×" ], [ "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","桃","桃","桃","×","×","×","×","桃","桃","×","×","×","×", "×","×","桃","桃","桃","桃","×","×","×","桃","桃","桃","桃","×","×","×", "×","×","桃","桃","桃","桃","桃","×","桃","桃","桃","桃","桃","×","×","×", "×","×","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×","×", "×","×","×","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×","×","×", "×","×","×","×","桃","桃","桃","桃","桃","桃","桃","×","×","×","×","×", "×","×","×","×","×","桃","桃","桃","桃","桃","×","×","×","×","×","×", "×","×","×","×","×","×","桃","桃","桃","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","桃","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×" ], [ "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","桃","桃","桃","×","×","×","桃","桃","桃","×","×","×","×", "×","×","桃","桃","桃","桃","桃","×","桃","桃","桃","桃","桃","×","×","×", "×","桃","桃","桃","桃","桃","桃","×","桃","桃","桃","桃","桃","桃","×","×", "×","桃","桃","桃","桃","桃","桃","×","桃","桃","桃","桃","桃","桃","×","×", "×","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×", "×","×","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×","×", "×","×","×","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×","×","×", "×","×","×","×","桃","桃","桃","桃","桃","桃","桃","×","×","×","×","×", "×","×","×","×","×","桃","桃","桃","桃","桃","×","×","×","×","×","×", "×","×","×","×","×","×","桃","桃","桃","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","桃","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×" ], [ "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","桃","桃","桃","×","×","×","桃","桃","桃","×","×","×","×", "×","×","桃","桃","桃","桃","桃","×","桃","桃","桃","桃","桃","×","×","×", "×","桃","桃","桃","桃","桃","桃","×","桃","桃","桃","桃","桃","桃","×","×", "×","桃","桃","桃","桃","桃","桃","×","桃","桃","桃","桃","桃","桃","×","×", "×","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×", "×","×","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×","×", "×","×","×","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×","×","×", "×","×","×","×","桃","桃","桃","桃","桃","桃","桃","×","×","×","×","×", "×","×","×","×","×","桃","桃","桃","桃","桃","×","×","×","×","×","×", "×","×","×","×","×","×","桃","桃","桃","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","桃","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×" ], [ "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","桃","桃","桃","×","×","×","桃","桃","桃","×","×","×","×", "×","×","桃","桃","桃","桃","桃","×","桃","桃","桃","桃","桃","×","×","×", "×","桃","桃","桃","桃","桃","桃","×","桃","桃","桃","桃","桃","桃","×","×", "×","桃","桃","桃","桃","桃","桃","×","桃","桃","桃","桃","桃","桃","×","×", "×","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×", "×","×","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×","×", "×","×","×","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×","×","×", "×","×","×","×","桃","桃","桃","桃","桃","桃","桃","×","×","×","×","×", "×","×","×","×","×","桃","桃","桃","桃","桃","×","×","×","×","×","×", "×","×","×","×","×","×","桃","桃","桃","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","桃","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×" ], [ "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","桃","桃","桃","×","×","×","×","桃","桃","×","×","×","×", "×","×","桃","桃","桃","桃","×","×","×","桃","桃","桃","桃","×","×","×", "×","×","桃","桃","桃","桃","桃","×","桃","桃","桃","桃","桃","×","×","×", "×","×","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×","×", "×","×","×","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×","×","×", "×","×","×","×","桃","桃","桃","桃","桃","桃","桃","×","×","×","×","×", "×","×","×","×","×","桃","桃","桃","桃","桃","×","×","×","×","×","×", "×","×","×","×","×","×","桃","桃","桃","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","桃","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×" ], [ "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","桃","桃","×","×","×","桃","桃","×","×","×","×","×", "×","×","×","桃","桃","桃","桃","×","桃","桃","桃","桃","×","×","×","×", "×","×","×","桃","桃","桃","桃","桃","桃","桃","桃","桃","×","×","×","×", "×","×","×","×","桃","桃","桃","桃","桃","桃","桃","×","×","×","×","×", "×","×","×","×","×","桃","桃","桃","桃","桃","×","×","×","×","×","×", "×","×","×","×","×","×","桃","桃","桃","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","桃","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×", "×","×","×","×","×","×","×","×","×","×","×","×","×","×","×","×" ] ]; function getRgbColor( c ) { var colorHash = { "×":"#000000", "黒":"#000000", "白":"#ffffff", "橙":"#f16529", "赤":"#e44d26", "茶":"#804000", "桃":"#ffaec9", "水":"#369cd6", "青":"#2162af" }; return colorHash[ c ]; } var colorSet = [ { light1:0x700000, light2:0xff0000 }, { light1:0x3D1605, light2:0x603927 }, { light1:0xffffff, light2:0xffffff } ]; function getRandomColor() { var r = Math.floor(Math.random() * 128); var g = Math.floor(Math.random() * 128); var b = Math.floor(Math.random() * 128); return "rgb(" + r + "," + g + "," + b + ")"; } function init() { if (isWebgl()) renderer = new THREE.WebGLRenderer({ antialias: true }); else renderer = new THREE.CanvasRenderer(); renderer.setSize(windowHalfX, windowHalfY); document.getElementById('logo-vertical').appendChild(renderer.domElement); //The smaller the first number is, the closer the cube appears camera = new THREE.PerspectiveCamera(50, windowHalfX / windowHalfY, 1, 1000); //The height of the camera in comparison to the scene camera.position.x = -100; camera.position.y = 250; //The zoom level of the camera camera.position.z = 200; //The mouse controls that allow for dragging of cube closer or further away visually controls = new THREE.TrackballControls(camera); controls.rotateSpeed = 1.0; controls.zoomSpeed = 1.0; controls.panSpeed = 0.8; controls.noZoom = false; controls.noPan = false; controls.staticMoving = true; controls.dynamicDampingFactor = 0.3; controls.addEventListener('change', render, false); //Create the scene scene = new THREE.Scene(); group = new THREE.Object3D(); scene.add(group); var i, j; var x, y, z; var meshArray = []; var color; var geometry = new THREE.CubeGeometry(DOT_SIZE * 0.8, DOT_SIZE * 0.8, DOT_SIZE * 0.8); for (j = 0; j < dataSet.length; j++) { for (i = 0; i < dataSet[j].length; i++) { x = (i % 16) * DOT_SIZE + X_START_POS; y = (16 - Math.floor(i / 16)) * DOT_SIZE + Y_START_POS; z = j * DOT_SIZE + Z_START_POS; color = getRgbColor(dataSet[j][i]); if (dataSet[j][i] != "×") { var material = new THREE.MeshLambertMaterial({ color: color }); meshArray[i] = new THREE.Mesh(geometry, material); meshArray[i].position.x = x - 0; meshArray[i].position.y = y; meshArray[i].position.z = z; group.add(meshArray[i]); list.push(meshArray[i]); } } } //ライティング light1 = new THREE.DirectionalLight(0x3D1605, 0.5); light1.position.set(100, 100, 100).normalize(); scene.add(light1); light2 = new THREE.DirectionalLight(0x603927, 1.0); light2.position.set(-100, 100, 100).normalize(); scene.add(light2); document.addEventListener('mousedown', onDocumentMouseDown, false); document.addEventListener('touchstart', onDocumentTouchStart, false); document.addEventListener('touchmove', onDocumentTouchMove, false); window.addEventListener('resize', onWindowResize, false); setInterval(changeID, 5000); } function onWindowResize() { windowHalfX = window.innerWidth / 2; windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); controls.handleResize(); render(); } function onDocumentMouseDown(event) { event.preventDefault(); document.addEventListener('mousemove', onDocumentMouseMove, false); document.addEventListener('mouseup', onDocumentMouseUp, false); document.addEventListener('mouseout', onDocumentMouseOut, false); mouseXOnMouseDown = event.clientX - windowHalfX; targetRotationOnMouseDown = targetRotation; } function onDocumentMouseMove(event) { mouseX = event.clientX - windowHalfX; mouseY = event.clientY - windowHalfY; } function onDocumentMouseUp(event) { document.removeEventListener('mousemove', onDocumentMouseMove, false); document.removeEventListener('mouseup', onDocumentMouseUp, false); document.removeEventListener('mouseout', onDocumentMouseOut, false); } function onDocumentMouseOut(event) { //To get rid of redundant code, call function that does same thing above onDocumentMouseUp(event); } function onDocumentTouchStart(event) { if (event.touches.length === 1) { event.preventDefault(); mouseXOnMouseDown = event.touches[0].pageX - windowHalfX; targetRotationOnMouseDown = targetRotation; } } function onDocumentTouchMove(event) { if (event.touches.length === 1) { event.preventDefault(); mouseX = event.touches[0].pageX - windowHalfX; //The rotation of the cube on its' x-axis targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * rotationSpeed; } } /**************THIS BLOCK IS NECESSARY -> DRAWS DEBUG AXES********************/ var debugaxis = function (axisLength) { //Shorten the vertex function function v(x, y, z) { return new THREE.Vector3(x, y, z); } //Create axis (point1, point2, colour) function createAxis(p1, p2, color) { var line, lineGeometry = new THREE.Geometry(), lineMat = new THREE.LineBasicMaterial({ color: color, lineWidth: 1 }); lineGeometry.vertices.push(p1, p2); line = new THREE.Line(lineGeometry, lineMat); scene.add(line); } createAxis(v(-axisLength, 0, 0), v(axisLength, 0, 0), 0xFF0000); createAxis(v(0, -axisLength, 0), v(0, axisLength, 0), 0x00FF00); createAxis(v(0, 0, -axisLength), v(0, 0, axisLength), 0x0000FF); }; //To use enter the axis length debugaxis(400); /**************************************************************************************/ function isWebgl() { try { return !!window.WebGLRenderingContext && !! document.createElement('canvas').getContext('experimental-webgl'); } catch (e) { return false; } } function animate() { requestAnimationFrame(animate); controls.update(); render(); } function render() { TWEEN.update(); group_rot += 0.0001 * ROT_SPEED; group.rotation.x = group_rot; group.rotation.y = group_rot; group.rotation.z = group_rot; renderer.render(scene, camera); } function changeID() { switch (ID) { case 1: changeFormation1(); break; case 2: changeFormation2(); break; case 3: changeFormation3(); break; default: changeFormation1(); break; } ID++; if (ID > 3) { ID = 1; changeColor(); } } function changeColor() { var rand = Math.floor( Math.random() * 3 ); var color = colorSet[rand]; light1.color.setHex( color.light1 ); light2.color.setHex( color.light2 ); } //Random function changeFormation1() { for (var i = 0; i < list.length; i++) { var rot = 360 / list.length * i; var vx = Math.random() * 600 - 300; var vy = Math.random() * 600 - 300; var vz = Math.random() * 600 - 300; new TWEEN.Tween(list[i].scale).to({ x: 1, y: 1, z: 1 }, 1000) .easing(TWEEN.Easing.Back.Out).start(); new TWEEN.Tween(list[i].position).to({ x: vx, y: vy, z: vz }, 1000) .easing(TWEEN.Easing.Exponential.InOut).start(); new TWEEN.Tween(list[i].rotation).to({ x: 0, y: rot, z: 0 }, 1000) .easing(TWEEN.Easing.Cubic.InOut).start(); } } //Cube function changeFormation2() { var i, j, k; var x, y, z; k = 0; for (j = 0; j < dataSet.length; j++) { for (i = 0; i < dataSet[j].length; i++) { x = (i % 16) * DOT_SIZE + X_START_POS; y = (16 - Math.floor(i / 16)) * DOT_SIZE + Y_START_POS; z = j * DOT_SIZE + Z_START_POS; if (dataSet[j][i] != "×") { new TWEEN.Tween(list[k].position).to({ x: x, y: y, z: z }, 1000) .easing(TWEEN.Easing.Exponential.InOut).start(); new TWEEN.Tween(list[k].rotation).to({ x: 0, y: 0, z: 0 }, 1000) .easing(TWEEN.Easing.Cubic.InOut).start(); k++; } } } } //Infinity function changeFormation3() { for (var i = 0; i < list.length; i++) { var rot = 2 * i; var vx = 150 * ( Math.cos(rot * Math.PI / 180) * Math.cos(rot * Math.PI / 180)) + Math.random() * 10; var vy = 150 * ( Math.cos(rot * Math.PI / 180) * Math.sin(rot * Math.PI / 180)) + Math.random() * 10; var vz = 150 * Math.cos(rot * Math.PI / 180) + Math.random() * 10; new TWEEN.Tween(list[i].scale).to({ x: 1, y: 1, z: 1 }, 1000) .easing(TWEEN.Easing.Back.Out).start(); new TWEEN.Tween(list[i].position).to({ x: vx, y: vy, z: vz }, 1000) .easing(TWEEN.Easing.Exponential.InOut).start(); new TWEEN.Tween(list[i].rotation).to({ x: 0, y: rot, z: 0 }, 1000) .easing(TWEEN.Easing.Cubic.InOut).start(); } } <!-- Three.js --> <script src="http://jsrun.it/assets/z/f/c/E/zfcEl"></script> <!-- TrackballControls.js --> <script src="http://jsrun.it/assets/7/I/f/5/7If5h"></script> <!-- Tween.js --> <!-- <script src="http://rawgithub.com/sole/tween.js/master/src/Tween.js"></script> --> <script src="http://jsrun.it/assets/l/c/M/C/lcMCo"></script> <link href='//fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:700' rel='stylesheet' type='text/css' /> <div class="main-logo" id="logo-vertical"> <div class="inner"> <div class="visual"> </div> <h1 class="main-title">Happy Valentine's Day</h1> <h2 id="copy">2014.2.14</h2> </div> </div> @import "compass"; @import "compass/reset"; @import "compass/css3/"; html { background-color: #f7a; } .main-logo { position: relative; width: 460px; height: 460px; background-color: #f7a; .inner { width: 162px; position: absolute; top :50%; left: 50%; margin-top: -69px; margin-left: -81px; text-decoration: none; color: #521; } h1 { font-family: 'Open Sans Condensed', sans-serif; text-align: center; margin-bottom: 10px; } .copy { text-align: center; word-wrap: normal; font-size: 10px; } .visual { position: relative; margin-bottom: 12px; @include transform-origin(50%); @include rotate(45deg); -webkit-animation: logoRotate .8s cubic-bezier(0.86, 0, 0.07, 1) 1s forwards; -moz-animation: logoRotate .8s cubic-bezier(0.86, 0, 0.07, 1) 1s forwards; -o-animation: logoRotate .8s cubic-bezier(0.86, 0, 0.07, 1) 1s forwards; -ms-animation: logoRotate .8s cubic-bezier(0.86, 0, 0.07, 1) 1s forwards; animation: logoRotate .8s cubic-bezier(0.86, 0, 0.07, 1) 1s forwards; .letter { position: absolute; top: 0; } .parts { position: absolute; width: 0; height: 0; } .letter-H { .parts-1 { @include skew(24deg,0); } .parts-2 { @include skew(-45deg,0); } .parts-3 { @include skew(45deg,0); } .parts-4 { @include skew(-24deg,0); } } .letter-X { .parts-1 { @include skew(0,25deg); } .parts-2 { @include skew(0,-25deg); } .parts-3 { @include skew(0,-25deg); } .parts-4 { @include skew(0,25deg); } } } } #logo-vertical { .main-title { font-size: 23px; } .visual { /* height: 78px; */ height: 200px; } .letter { width: 78px; height: 78px; } .letter-H { top: 1px; left: 38px; -webkit-animation: logoAnimationH 1s ease 1.8s forwards; -moz-animation: logoAnimationH 1s ease 1.8s forwards; -o-animation: logoAnimationH 1s ease 1.8s forwards; -ms-animation: logoAnimationH 1s ease 1.8s forwards; animation: logoAnimationH 1s ease 1.8s forwards; .parts-1,.parts-4 { left: 8px; } .parts-2,.parts-3 { left: 56px; } .parts-3,.parts-4 { top: 38px; } .parts-1 { border-top: 0px solid transparent; border-right: 21px solid transparent; border-bottom: 38px solid #f16529; } .parts-2 { border-top: 0px solid transparent; border-right: 21px solid transparent; border-bottom: 38px solid #f16529; } .parts-3 { border-top: 38px solid #e44d26; border-right: 21px solid transparent; border-bottom: 0px solid transparent; } .parts-4 { border-top: 38px solid #e44d26; border-right: 21px solid transparent; border-bottom: 0px solid transparent; } } .letter-X{ top: 2px; left: 38px; -webkit-animation: logoAnimationX 1s ease 1.8s forwards; -moz-animation: logoAnimationX 1s ease 1.8s forwards; -o-animation: logoAnimationX 1s ease 1.8s forwards; -ms-animation: logoAnimationX 1s ease 1.8s forwards; animation: logoAnimationX 1s ease 1.8s forwards; .parts-1,.parts-2 { top: 8px; } .parts-2,.parts-4 { left: 38px; } .parts-3,.parts-4 { top: 45px; } .parts-1 { border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 21px solid transparent; border-right: 38px solid #2162af; } .parts-2 { border-top: 0px solid transparent; border-right: 0px solid transparent; border-bottom: 21px solid transparent; border-left: 38px solid #369cd6; } .parts-3 { border-bottom: 0px solid transparent; border-left: 0px solid transparent; border-top: 21px solid transparent; border-right: 38px solid #2162af; } .parts-4 { border-bottom: 0px solid transparent; border-right: 0px solid transparent; border-top: 21px solid transparent; border-left: 38px solid #369cd6; } } } @-webkit-keyframes logoRotate { 0% { @include rotate(45deg); } 100% { @include rotate(3600deg); } } @-moz-keyframes logoRotate { 0% { @include rotate(45deg); } 100% { @include rotate(3600deg); } } @-ms-keyframes logoRotate { 0% { @include rotate(45deg); } 100% { @include rotate(3600deg); } } @-o-keyframes logoRotate { 0% { @include rotate(45deg); } 100% { @include rotate(3600deg); } } @keyframes logoRotate { 0% { @include rotate(45deg); } 100% { @include rotate(3600deg); } } @-webkit-keyframes logoAnimationX { 0% { left: 38px; } 100% { left: 85px; } } @-moz-keyframes logoAnimationX { 0% { left: 38px; } 100% { left: 85px; } } @-ms-keyframes logoAnimationX { 0% { left: 38px; } 100% { left: 85px; } } @-o-keyframes logoAnimationX { 0% { left: 38px; } 100% { left: 85px; } } @keyframes logoAnimationX { 0% { left: 38px; } 100% { left: 85px; } } @-webkit-keyframes logoAnimationH { 0% { left: 38px; } 100% { left: 0; } } @-moz-keyframes logoAnimationH { 0% { left: 38px; } 100% { left: 0; } } @-ms-keyframes logoAnimationH { 0% { left: 38px; } 100% { left: 0; } } @-o-keyframes logoAnimationH { 0% { left: 38px; } 100% { left: 0; } } @keyframes logoAnimationH { 0% { left: 38px; } 100% { left: 0; } } #container{ width: 290px; height: 210px; padding-top:100px; background:url(imgs/bg.jpg); font-family: 'Ropa Sans', cursive; } #copy { text-align: center; font-size: 10px; display: none; /* エフェクト適用前に一瞬見えるのを防ぐため */ } #copy span { position: relative; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Happy Valentine's Day 2014 この作品は、WebGL 開発者フォーラムのバレンタイン企画への投稿作品です。 ■ Happy Valentines Day + WebGL http://jp.wgld.org/WebGL-Valentin/ ■ WebGL 開発者フォーラム https://groups.google.com/forum/#!forum/japan-webgl-dev ハートのドット絵は以下のものを参考にさせて頂きました。 ■ Q-BLOCK Create 3D Pixel Art Online http://kyucon.com/qblock/#/82 <関連> ■ Happy Valentine's Day 2014 ver2 - jsdo.it - 某チョコを落下させてみるテスト - http://jsdo.it/cx20/HappyValentinesDay2014ver2 Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author cx20 URLhttp://profile.hatena.ne.jp/cx20/ プログラマ(マイクロソフト系の言語を使用することが多いです。) JavaScript のライブラリを色々と試して遊んでます。 ■ 各種 WebGL ライブラリによる基本サンプル一覧 http://qiita.com/cx20/items/0fa19c96aa6470d98807 ■ 各種 WebGLライブラリと3D物理演算ライブラリの組み合わせ一覧 http://qiita.com/cx20/items/3ebed669fb9c9e797935 ■ glTF 対応ライブラリのサンプル一覧 https://github.com/cx20/gltf-test ■ Grimoire.js サンプル一覧 http://jsdo.it/tag/Grimoire.js ■ GLBoost サンプル一覧 http://jsdo.it/tag/GLBoost Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/8meZ/js"></script> art&design css3 html5 html5_elements&api library&test Discussion Questions on this code? Tags art&design css3 html5 html5_elements&api library&test Forked sort by latest page views favorite forked forked: Happy Valentine's Day inzrb 00 824 539/20/259 art&design css3 html5 html5_elements&api library&test