Animation

Developer
Mp_graphic
Size
13,775 Kb
Views
36,432
  1. Animation Previews
  2. Animation HTML Codes
  3. Animation CSS Codes
  4. Animation JS Codes

How do I make an animation?

What is a animation? How do you make a animation? This script and codes were developed by Mp_graphic on 06 August 2022, Saturday.

Animation Previews
IQ Test

Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"> <nav id="navi" class="hide"> <div> <ul> <li class="logo"><a href="#qtop"><img src="http://jsrun.it/assets/p/b/v/P/pbvPq.png" alt="" /></a></li> <li class="vol1"><a href="#vol1">Vol.1</a></li> <li class="vol2"><a href="#vol2">Vol.2</a></li> <li class="vol3"><a href="#vol3">Vol.3</a></li> </ul> </div> </nav>	<div id="contents"> <section id="qtop" class="content"> <header> <h1> <img id="logo" src="http://jsrun.it/assets/p/l/I/u/plIu4.png" alt="Web Creator's Contest Q the 2nd"> </h1> </header> <p> 自分を、ためす。未来を、ひらく。<br> “Q”は、すべてのWebクリエイターのための<br> アイデア＆スキルコンテストです。 </p> <ul> <li class="vol1"><a href="#vol1">Vol.1</a></li> <li class="vol2"><a href="#vol2">Vol.2</a></li> <li class="vol3"><a href="#vol3">Vol.3</a></li> </ul> <!-- / #top --></section> <section id="vol1" class="content"> <header> <p class="label">Vol.1</p> <h1>夏を涼しくする表現にチャレンジしてください</h1> </header> <section> <p> 気づけば今年も暑い夏の季節がやってきました。<br> HTML5、JavaScript、CSSを駆使して、暑い夏をひんやり涼しくするような作品をつくってください。<br> お手本コードのような水が流れる作品や、風を感じる作品、花火などなど、どんな表現でも構いません。<br> あなたの得意分野でチャレンジしてみてください！下記のお手本コードをFork（＝あなたなりのアレンジ）すると自動的にエントリーとなります。自由な発想をお待ちしています！ </p> </section> <section> <h1>Schedule</h1> <dl> <dt>作品投稿期間</dt> <dd>7.26 木 〜 8.22 水</dd> <dt>審査期間</dt> <dd>8.23 木 〜 8.31 金</dd> <dt>結果発表</dt> <dd>9.4 火</dd> </dl> </section> <section> <h1>Award</h1> <dl> <dt>GOLD</dt> <dd>ルンバ780</dd> <dt>SILVER</dt> <dd>Nintendo 3DS LL</dd> <dt>BRONZE</dt> <dd>WebMoney 5,000円分</dd> </dl> </section> <section> <h1>Sponsor</h1> <ul> <li><a href="http://www.cyberagent.co.jp/recruit/" target="_blank">Cyber Agent</a></li> </ul> </section> <ul class="pager"> <li class="next"><a href="#vol2">Vol2 &gt;&gt;</a></li> <ul> <!-- / #page1 --></section> <section id="vol2" class="content"> <header> <p class="label">Vol.2</p> <h1>魅力的な画面遷移をつくってください</h1> </header> <section> <p> 画面が切り替わる際の演出を魅力的につくってください。<br> サンプルコードでは3つの画面をフェードイン・フェードアウトで切り替えています。<br> こちらを元にして演出を加えても良いですし、もちろんJavaScript, HTML, CSSをゼロからコードを書き直してもOKです。<br> 複数の画面をクリックなどで切り替えるものであれば、自由に作成していただいて構いません。<br> 画面遷移であればスライドを切り替えるような演出であったり、スマートフォンのトランジションでも良いので、あなたの得意分野でチャレンジしてください。<br> 下記のお手本コードをFork（＝あなたなりのアレンジ）すると自動的にエントリーとなります。自由な発想をお待ちしています！ </p> </section> <section> <h1>Schedule</h1> <dl> <dt>作品投稿期間</dt> <dd>8.23 木 〜 9.19 水</dd> <dt>審査期間</dt> <dd>9.20 木 〜 9.28 金</dd> <dt>結果発表</dt> <dd>10.2 火</dd> </dl> </section> <section> <h1>Award</h1> <dl> <dt>GOLD</dt> <dd>プレイステーション3＋torne＋nasne</dd> <dt>SILVER</dt> <dd>Wii ＋ 『ドラゴンクエストX 目覚めし五つの種族 オンライン』</dd> <dt>BRONZE</dt> <dd>WebMoney 5,000円分</dd> </dl> </section> <section> <h1>Sponsor</h1> <ul> <li><a href="http://www.cyberagent.co.jp/recruit/" target="_blank">Cyber Agent</a></li> <li><a href="http://www.gree.co.jp/recruit/" target="_blank">GREE</a></li> </ul> </section> <ul class="pager"> <li class="prev"><a href="#vol1">&lt;&lt; Vol1</a></li> <li class="next"><a href="#vol3">Vol3 &gt;&gt;</a></li> <ul> <!-- / #vol2 --></section> <section id="vol3" class="content"> <header> <p class="label">Vol.3</p> <h1>comming soon.</h1> </header> <section> <p> 9/20 公開予定 </p> </section> <section> <h1>Schedule</h1> <dl> <dt>作品投稿期間</dt> <dd>9/20 木 〜 </dd> </dl> </section> <section> <h1>Award</h1> <dl> <dt>豪華賞品！ご期待下さい！</dd> </dl> </section> <section> <h1>Sponsor</h1> <ul> </ul> </section> <ul class="pager"> <li class="prev"><a href="#vol2">&lt;&lt; Vol2</a></li> <ul> <!-- / #vol3 --></section>	</div>
<!-- / #container --></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animation - Script Codes CSS Codes

body, div, dl, dt, dd, ul, ol, li, h1, p, section, header, footer, nav {	margin: 0;	padding: 0;
}
section, header, footer, nav { display: block; }
li { list-style: none; }
html,
body { width: 100%; height: 100%; }
body { position: relative; font-size: 12px; font-family: Myriad, Helvetica, Arial, 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'Meiryo', 'メイリオ', sans-serif; background-color: #f4efef; background-image: -webkit-linear-gradient(top, #fff, #f4efef); background-image: -moz-linear-gradient(top, #fff, #f4efef); background-image: -ms-linear-gradient(top, #fff, #f4efef); background-image: -o-linear-gradient(top, #fff, #f4efef); background-image: linear-gradient(top, #fff, #f4efef); background-repeat: none; background-attachment: fixed; overflow-x: hidden; overflow-y: visible;
}
a { text-decoration: none; }
/* ---------------------------------- Navigation
---------------------------------- */
nav { position: relative; top: 0; width: 100%; line-height: 40px; font-size: 12px; text-align: center; z-index: 100; overflow: hidden; padding-top: 24px;
}
nav > div { position: relative; margin: 0 auto; max-width : 800px;
}
nav ul,
nav li { display: inline-block; }
nav li { overflow: hidden; margin: 0 18px; vertical-align: bottom;
}
nav a { color: #fff; display: block; width: 48px; height: 48px; line-height: 48px; -webkit-border-radius: 24px; -moz-border-radius: 24px; -ms-border-radius: 24px; -o-border-radius: 24px; border-radius: 24px; background-color: #202020;
}
/* Contents */
nav li.vol1 a:hover,
nav li.vol1.active a { color: #fff; background-color: rgba(3, 180, 204, .7);
}
nav li.vol2 a:hover,
nav li.vol2.active a { color: #fff; background-color: rgba(255, 0, 255, .7);
}
nav li.vol3 a:hover,
nav li.vol3.active a { color: #202020; background-color: rgba(255, 255, 0, .7);
}
nav li.logo a { position: relative; }
nav li.logo a:hover,
nav li.logo.active a { background-color: rgba(255, 255, 255, .7);
}
nav li.logo a img { position: absolute; top: 0; left: 0;
}
nav li.logo.active img,
nav li.logo a:hover img { top: -48px;
}
/* Use javascript */
nav.transition-enable { -webkit-transition-property: top; -moz-transition-property: top; -ms-transition-property: top; -o-transition-property: top; transition-property: top; -webkit-transition-duration: .2s; -moz-transition-duration: .2s; -ms-transition-duration: .2s; -o-transition-duration: .2s; transition-duration: .2s; -webkit-transition-timing-function: cubic-bezier(.12, .51, .60, .87); -moz-transition-timing-function: cubic-bezier(.12, .51, .60, .87); -ms-transition-timing-function: cubic-bezier(.12, .51, .60, .87); -o-transition-timing-function: cubic-bezier(.12, .51, .60, .87); transition-timing-function: cubic-bezier(.12, .51, .60, .87);
}
nav.hide { top: -82px; }
/* ---------------------------------- Content
---------------------------------- */
/* Container */
#container { width: 100%; height: 100%; margin: 0 auto; -webkit-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 125px; perspective-origin: 50% 125px; overflow: hidden; /* 高さ調節用 */ -webkit-transition: height 0.3s linear; transition: height 0.3s linear;
}
/* Contents */
#contents { display: none; /* 最初は非表示に */ position: relative; margin: 0 auto; max-width: 800px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(-500px); transform: translateZ(-500px); overflow: visible;
}
/* Page */
#contents > section { position: absolute; top: 0; left: 0; width: 100%; padding: 0 0 30px; color: #202020; line-height: 1.75; /*-webkit-filter: blur(0);*/
}
/* Page header */
#contents > section > header { padding: 30px 40px 0 40px; margin: 0 0 15px;
}
#contents > section > header > p.label { display: inline-block; margin-bottom: 10px; padding: 5px 10px; font-size: 11px; line-height: 1em; color: #fff; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px;
}
#contents > section > header > h1 { font-size: 22px; font-weight: normal;
}
/* Page inner */
#contents > section > section { padding: 0 40px 0 40px; }
#contents > section > section p { margin: 20px 0; }
#contents > section > section li,
#contents > section > section dd { margin-left: 25px; }
/* Page pager */
#contents > section .pager { padding: 0 40px 20px 40px; }
#contents > section .pager li { margin: 0; }
#contents > section .pager li.prev { float: left; }
#contents > section .pager li.next { float: right; }
/* Page section */
#contents > section > section { margin: 0 0 35px; }
#contents > section > section > h1 { padding: 5px 0 5px 15px; margin-bottom: 15px; font-size: 14px; color: #fff;
}
/* Page elements */
#contents > section h1,
#contents > section p,
#contents > section li,
#contents > section dt,
#contents > section dd { -webkit-transition-property: -webkit-transform, opacity, color; transition-property: transform, opacity, color; -webkit-transition-duration: 1.5s; transition-duration: 1.5s; /* バウンドするような動き, Safari では超過が効かない模様 */ -webkit-transition-timing-function: cubic-bezier(0.610, -0.220, 0.555, 1.105); transition-timing-function: cubic-bezier(0.610, -0.220, 0.555, 1.105);
}
#contents > section,
#contents > section section { -webkit-transform-style: preserve-3d;
}
/* Use javascript */
#contents > .transition-enable { -webkit-transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-timing-function: cubic-bezier(0, .99, .17, 1); transition-timing-function: cubic-bezier(0, .99, .17, 1);
}
#contents > .animation-enable { -webkit-animation: rot 10s linear infinite; animation: rot 10s linear infinite;
}
/* ---------------------------------- Issue
---------------------------------- */
/* Inactive content */
section.content.inactive { -webkit-animation: rot 60s linear infinite; animation: rot 60s linear infinite; /*-webkit-filter: blur(2px) !important;*/
}
/* Javascript で .content セレクタを指定した要素の id にはサフィックスを追加するので指定もサフィックスをつけて行う #qtop -> #qtop-content
*/
/* Top */
section#qtop-content { color: #202020; font-size: 14px; text-align: center;
}
/* Top logo */
section#qtop-content > header { width: 180px; height: 110px; margin: 10px auto;
}
/* Top navigation */
section#qtop-content ul,
section#qtop-content ul li { display: inline-block; }
section#qtop-content ul { margin: 25px 0; }
section#qtop-content ul li { margin: 0 10px; }
section#qtop-content ul li a { color: #fff; font-size: 12px; font-weight: bold; text-shadow: none; width: 47px; height: 47px; line-height: 47px; display: inline-block; background-color: #202020; -webkit-border-radius: 24px; -moz-border-radius: 24px; -ms-border-radius: 24px; -o-border-radius: 24px; border-radius: 24px;
}
section#qtop-content ul li.vol1 a:hover { background-color: rgba(3, 180, 204, .7); }
section#qtop-content ul li.vol2 a:hover { background-color: rgba(255, 0, 255, .7); }
section#qtop-content ul li.vol3 a { background-color: #606060; }
section#qtop-content ul li.vol3 a:hover { color: #000; background-color: rgba(255, 255, 0, .7);
}
/* Vol 1 */
section#vol1-content > header > p.label,
section#vol1-content > section > h1 { background-color: rgba(3, 180, 204, .7); }
section#vol1-content a { color: rgba(1, 146, 165, .7); }
section#vol1-content.inactive { color: rgba(3, 180, 204, .7); }
/* Vol 2 */
section#vol2-content > header > p.label,
section#vol2-content > section > h1 { background-color: rgba(255, 0, 255, .7);
}
section#vol2-content a { color: rgba(165, 0, 165, .7); }
section#vol2-content.inactive { color: rgba(255, 0, 255, .7); }
/* Vol 3 */
section#vol3-content > header > p.label,
section#vol3-content > section > h1 { color: #333 !important; background-color: rgba(255, 255, 0, .7);
}
section#vol3-content a { color: rgba(165, 165, 0, .7); }
section#vol3-content.inactive { color: rgba(255, 255, 0, .7); }
/* Animation */
@-webkit-keyframes rot { from { -webkit-transform: rotateY(0deg); } to { -webkit-transform: rotateY(360deg); }
}
@keyframes rot { from { -moz-transform: rotateY(0deg); } to { -moz-transform: rotateY(360deg); }
}

Animation - Script Codes JS Codes

// Global namespace
var Akm2 = Akm2 || {};
(function(window) { //"use strict"; // Log (function() { var limit = 0; var count = 0; function logLimit(limitCount) { limit = limitCount < 0 ? 0 : limitCount; } function log() { if (limit) { if (limit === count) return; count++; } window.console.log.apply(window.console, arguments); } window.logLimit = logLimit; window.log = log; })(); // Data type check // http://blog.livedoor.jp/dankogai/archives/51756459.html Akm2.typeOf = function(value) { if (value === null) return 'Null'; if (value === undefined) return 'Undefined'; var c = value.constructor; return c.hasOwnProperty('name') ? c.name : ('' + c).replace(/^\s*function\s*([^\(]*)[\S\s]+$/im, '$1'); }; Akm2.isObject = function(value) { return typeof value === 'object' && value !== null; }; Akm2.isNumber = function(value) { return typeof value === 'number'; }; Akm2.isNumeric = function(value) { return !isNaN(value) && isFinite(value); }; Akm2.isString = function(value) { return typeof value === 'string'; }; Akm2.isFunction = function(value) { return typeof value === 'function'; }; Akm2.isArray = function(value) { return Object.prototype.toString.call(value) === '[object Array]'; }; Akm2.isNull = function(value) { return value === null; }; Akm2.isUndefined = function(value) { return typeof value === 'undefined'; }; // Object extend Akm2.extend = function() { var target = arguments[0] || {}, o, p; for (var i = 1, len = arguments.length; i < len; i++) { o = arguments[i]; if (!Akm2.isObject(o) || Akm2.isNull(o)) continue; for (p in o) { target[p] = o[p]; } } return target; }; // Vendor Akm2.Vendor = (function() { var vendor = { prefix : '', transitionend : 'transitionend', animationstart : 'animationstart', animationend : 'animationend', animationiteration: 'animationiteration', // Caution! // 親が window でないとダメらしい // 使用しているスクリプトがあるので削除しないが, 使わないこと requestAnimationFrame: (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; })(), cancelAnimationFrame: (function(){ return window.cancelAnimationFrame || window.cancelRequestAnimationFrame || window.webkitCancelAnimationFrame || window.webkitCancelRequestAnimationFrame || window.mozCancelAnimationFrame || window.mozCancelRequestAnimationFrame || window.oCancelAnimationFrame || window.oCancelRequestAnimationFrame || window.msCancelAnimationFrame || window.msCancelRequestAnimationFrame || function(id) { window.clearTimeout(id); }; })(), // Test getProperty: function(property) { return this.prefix ? this.prefix + property.charAt(0).toUpperCase() + property.slice(1) : property; } }; switch (true) { case (/webkit/i).test(navigator.appVersion): vendor.prefix = 'webkit'; vendor.transitionend = 'webkitTransitionEnd'; vendor.animationstart = 'webkitAnimationStart'; vendor.animationend = 'webkitAnimationEnd'; vendor.animationiteration = 'webkitAnimationIteration'; break; case (/firefox/i).test(navigator.userAgent): vendor.prefix = 'Moz'; break; case (/msie/i).test(navigator.userAgent): vendor.prefix = 'ms'; vendor.transitionend = 'MSTransitionEnd'; vendor.animationstart = 'MSAnimationStart'; vendor.animationend = 'MSAnimationEnd'; vendor.animationiteration = 'MSAnimationIteration'; break; case 'opera' in window: vendor.prefix = 'O'; vendor.transitionend = 'oTransitionEnd'; // otransitionend vendor.animationstart = 'oAnimationStart'; vendor.animationend = 'oAnimationEnd'; vendor.animationiteration = 'oAnimationIteration'; break; default: break; } return vendor; })(); // Random Akm2.random = Math.random; Akm2.randUniform = function(max, min) { if (min === undefined) min = 0; return Akm2.random() * (max - min) + min; }; Akm2.randInt = function(max, min) { if (min === undefined) min = 0; return Math.floor(Akm2.random() * (max - min + 1) + min); }; Akm2.randomSeed = function(seed) { Akm2.random = !seed && seed !== 0 ? Math.random : Alea(seed).random; }; /** * Akm2.Point */ Akm2.Point = function(x, y) { this.set(x, y); }; Akm2.Point.interpolate = function(p1, p2, f) { var dx = p2.x - p1.x, dy = p2.y - p1.y; return new Akm2.Point(p1.x + dx * f, p1.y + dy * f); }; Akm2.Point.polar = function(length, angle) { return new Akm2.Point(length * Math.cos(angle), length * Math.sin(angle)); }; Akm2.Point.prototype = { set: function(x, y) { if (Akm2.isObject(x)) { y = x.y; x = x.x; } this.x = x || 0; this.y = y || 0; return this; }, offset: function(x, y) { this.x += x || 0; this.y += y || 0; return this; }, add: function(p) { this.x += p.x; this.y += p.y; return this; }, sub: function(p) { this.x -= p.x; this.y -= p.y; return this; }, scale: function(scale) { this.x *= scale; this.y *= scale; return this; }, length: function() { return Math.sqrt(this.x * this.x + this.y * this.y); }, lengthSq: function() { return this.x * this.x + this.y * this.y; }, normalize: function(thickness) { if (Akm2.isUndefined(thickness)) thickness = 1; var len = Math.sqrt(this.x * this.x + this.y * this.y); var nx = 0, ny = 0; if (len) { nx = this.x / len; ny = this.y / len; } this.x = nx * thickness; this.y = ny * thickness; return this; }, angle: function() { return Math.atan2(this.y, this.x); }, angleTo: function(p) { var dx = p.x - this.x, dy = p.y - this.y; return Math.atan2(dy, dx); }, distanceTo: function(p) { var dx = this.x - p.x, dy = this.y - p.y; return Math.sqrt(dx * dx + dy * dy); }, distanceToSq: function(p) { var dx = this.x - p.x, dy = this.y - p.y; return dx * dx + dy * dy; }, negate: function() { this.x *= -1; this.y *= -1; return this; }, eq: function(p) { return this.x === p.x && this.y === p.y; }, isEmpty: function() { return !this.x && !this.y; }, clone: function() { return new Akm2.Point(this.x, this.y); }, toArray: function() { return [this.x, this.y]; }, toString: function() { return '(x:' + this.x + ', y:' + this.y + ')'; } }; /** * Random generator * * Alea, Mash function * @see http://baagoe.com/en/RandomMusings/javascript/ */ var Alea = (function() { /** * Mash function */ function Mash() { var n = 0xefc8249d; return function(data) { data = data.toString(); for (var i = 0, len = data.length, h; i < len; i++) { n += data.charCodeAt(i); h = 0.02519603282416938 * n; n = h >>> 0; h -= n; h *= n; n = h >>> 0; h -= n; n += h * 0x100000000; } return (n >>> 0) * 2.3283064365386963e-10; }; } // Export function return function() { var seeds = arguments.length ? Array.prototype.slice.call(arguments) : [new Date().getTime()]; var s0 = 0; var s1 = 0; var s2 = 0; var c = 1; var mash = Mash(); s0 = mash(' '); s1 = mash(' '); s2 = mash(' '); for (var i = 0, len = seeds.length, seed; i < len; i++) { seed = seeds[i]; s0 -= mash(seed); if (s0 < 0) s0 += 1; s1 -= mash(seed); if (s1 < 0) s1 += 1; s2 -= mash(seed); if (s2 < 0) s2 += 1; } mash = null; var random = function() { var t = 2091639 * s0 + c * 2.3283064365386963e-10; s0 = s1; s1 = s2; return s2 = t - (c = t | 0); }; var uint32 = function() { return random() * 0x100000000; }; var fract53 = function() { return random() + (random() * 0x200000 | 0) * 1.1102230246251565e-16; }; return { random: random, uint32: uint32, fract53: fract53 }; }; })(); /* * Akm2.SimplexNoise * * Base code jwagner's simplex-noise.js (http://github.com/jwagner/simplex-noise.js) * * @see http://github.com/jwagner/simplex-noise.js * @see http://staffwww.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf */ Akm2.SimplexNoise = function(seed) { this.seed(seed); }; Akm2.SimplexNoise.prototype = { octaves: 4, fallout: 0.5, _F2: 0.5 * (Math.sqrt(3.0) - 1.0), _G2: (3.0 - Math.sqrt(3.0)) / 6.0, _F3: 1.0 / 3.0, _G3: 1.0 / 6.0, _F4: (Math.sqrt(5.0) - 1.0) / 4.0, _G4: (5.0 - Math.sqrt(5.0)) / 20.0, _GRAD3: (function() { var grad3 = [ 1, 1, 0, -1, 1, 0, 1, -1, 0, -1, -1, 0, 1, 0, 1, -1, 0, 1, 1, 0, -1, -1, 0, -1, 0, 1, 1, 0, -1, 1, 0, 1, -1, 0, -1, -1 ]; return window.Float32Array ? new Float32Array(grad3) : grad3; })(), _GRAD4: (function() { var grad4 = [ 0, 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1, 0, -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1, 1, 0, 1, 1, 1, 0, 1, -1, 1, 0, -1, 1, 1, 0, -1, -1, -1, 0, 1, 1, -1, 0, 1, -1, -1, 0, -1, 1, -1, 0, -1, -1, 1, 1, 0, 1, 1, 1, 0, -1, 1, -1, 0, 1, 1, -1, 0, -1, -1, 1, 0, 1, -1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, -1, 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1, 0, -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1, 0 ]; return window.Float32Array ? new Float32Array(grad4) : grad4; })(), seed: function(seed) { var random = Alea(seed || new Date().getTime()).random; window.Uint8Array = window.Uint8Array || Array; var i; var p = new Uint8Array(256); for (i = 0; i < 256; i++) { p[i] = random() * 256 | 0; } var perm = new Uint8Array(512); var permMod12 = new Uint8Array(512); for (i = 0; i < 512; i++) { perm[i] = p[i & 255]; permMod12[i] = perm[i] % 12; } this._perm = perm; this._permMod12 = permMod12; }, /** * @see http://processingjs.org/reference/noise_/ */ noise: function(x, y, z, w) { var octaves = this.octaves; var fallout = this.fallout; var amp = 1, f = 1, sum = 0; var i; switch (arguments.length) { case 1 : for (i = 0; i < octaves; ++i) { amp *= fallout; sum += amp * (1 + this.noise2d(x * f, 0)) * 0.5; f *= 2; } break; case 2 : for (i = 0; i < octaves; ++i) { amp *= fallout; sum += amp * (1 + this.noise2d(x * f, y * f)) * 0.5; f *= 2; } break; case 3 : for (i = 0; i < octaves; ++i) { amp *= fallout; sum += amp * (1 + this.noise3d(x * f, y * f, z * f)) * 0.5; f *= 2; } break; case 4 : for (i = 0; i < octaves; ++i) { amp *= fallout; sum += amp * (1 + this.noise4d(x * f, y * f, z * f, w * f)) * 0.5; f *= 2; } break; default : return sum; } return sum; }, noise2d: function (xin, yin) { var F2 = this._F2, G2 = this._G2, GRAD3 = this._GRAD3, perm = this._perm, permMod12 = this._permMod12; var n0, n1, n2; var s = (xin + yin) * F2; var i = (xin + s) | 0; var j = (yin + s) | 0; var t = (i + j) * G2; var X0 = i - t; var Y0 = j - t; var x0 = xin - X0; var y0 = yin - Y0; var i1, j1; if (x0 > y0) { i1 = 1; j1 = 0; } else { i1 = 0; j1 = 1; } var x1 = x0 - i1 + G2; var y1 = y0 - j1 + G2; var x2 = x0 - 1.0 + 2.0 * G2; var y2 = y0 - 1.0 + 2.0 * G2; var ii = i & 255; var jj = j & 255; var t0 = 0.5 - x0 * x0 - y0 * y0; if (t0 < 0) { n0 = 0.0; } else { var gi0 = permMod12[ii + perm[jj]] * 3; t0 *= t0; n0 = t0 * t0 * (GRAD3[gi0] * x0 + GRAD3[gi0 + 1] * y0); } var t1 = 0.5 - x1 * x1 - y1 * y1; if (t1 < 0) { n1 = 0.0; } else { var gi1 = permMod12[ii + i1 + perm[jj + j1]] * 3; t1 *= t1; n1 = t1 * t1 * (GRAD3[gi1] * x1 + GRAD3[gi1 + 1] * y1); } var t2 = 0.5 - x2 * x2 - y2 * y2; if (t2 < 0) { n2 = 0.0; } else { var gi2 = permMod12[ii + 1 + perm[jj + 1]] * 3; t2 *= t2; n2 = t2 * t2 * (GRAD3[gi2] * x2 + GRAD3[gi2 + 1] * y2); } return 70.0 * (n0 + n1 + n2); }, noise3d: function (xin, yin, zin) { var F3 = this._F3, G3 = this._G3, GRAD3 = this._GRAD3, perm = this._perm, permMod12 = this._permMod12; var n0, n1, n2, n3; var s = (xin + yin + zin) * F3; var i = (xin + s) | 0; var j = (yin + s) | 0; var k = (zin + s) | 0; var t = (i + j + k) * G3; var X0 = i - t; var Y0 = j - t; var Z0 = k - t; var x0 = xin - X0; var y0 = yin - Y0; var z0 = zin - Z0; var i1, j1, k1; var i2, j2, k2; if (x0 >= y0) { if (y0 >= z0) { i1 = 1; j1 = 0; k1 = 0; i2 = 1; j2 = 1; k2 = 0; } else if (x0 >= z0) { i1 = 1; j1 = 0; k1 = 0; i2 = 1; j2 = 0; k2 = 1; } else { i1 = 0; j1 = 0; k1 = 1; i2 = 1; j2 = 0; k2 = 1; } } else { if (y0 < z0) { i1 = 0; j1 = 0; k1 = 1; i2 = 0; j2 = 1; k2 = 1; } else if (x0 < z0) { i1 = 0; j1 = 1; k1 = 0; i2 = 0; j2 = 1; k2 = 1; } else { i1 = 0; j1 = 1; k1 = 0; i2 = 1; j2 = 1; k2 = 0; } } var x1 = x0 - i1 + G3; var y1 = y0 - j1 + G3; var z1 = z0 - k1 + G3; var x2 = x0 - i2 + 2.0 * G3; var y2 = y0 - j2 + 2.0 * G3; var z2 = z0 - k2 + 2.0 * G3; var x3 = x0 - 1.0 + 3.0 * G3; var y3 = y0 - 1.0 + 3.0 * G3; var z3 = z0 - 1.0 + 3.0 * G3; var ii = i & 255; var jj = j & 255; var kk = k & 255; var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0; if (t0 < 0) { n0 = 0.0; } else { var gi0 = permMod12[ii + perm[jj + perm[kk]]] * 3; t0 *= t0; n0 = t0 * t0 * (GRAD3[gi0] * x0 + GRAD3[gi0 + 1] * y0 + GRAD3[gi0 + 2] * z0); } var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1; if (t1 < 0) { n1 = 0.0; } else { var gi1 = permMod12[ii + i1 + perm[jj + j1 + perm[kk + k1]]] * 3; t1 *= t1; n1 = t1 * t1 * (GRAD3[gi1] * x1 + GRAD3[gi1 + 1] * y1 + GRAD3[gi1 + 2] * z1); } var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2; if (t2 < 0) { n2 = 0.0; } else { var gi2 = permMod12[ii + i2 + perm[jj + j2 + perm[kk + k2]]] * 3; t2 *= t2; n2 = t2 * t2 * (GRAD3[gi2] * x2 + GRAD3[gi2 + 1] * y2 + GRAD3[gi2 + 2] * z2); } var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3; if (t3 < 0) { n3 = 0.0; } else { var gi3 = permMod12[ii + 1 + perm[jj + 1 + perm[kk + 1]]] * 3; t3 *= t3; n3 = t3 * t3 * (GRAD3[gi3] * x3 + GRAD3[gi3 + 1] * y3 + GRAD3[gi3 + 2] * z3); } return 32.0 * (n0 + n1 + n2 + n3); }, noise4d: function (x, y, z, w) { var F4 = this._F4, G4 = this._G4, GRAD4 = this._GRAD4, perm = this._perm, permMod12 = this._permMod12; var n0, n1, n2, n3, n4; var s = (x + y + z + w) * F4; var i = (x + s) | 0; var j = (y + s) | 0; var k = (z + s) | 0; var l = (w + s) | 0; var t = (i + j + k + l) * G4; var X0 = i - t; var Y0 = j - t; var Z0 = k - t; var W0 = l - t; var x0 = x - X0; var y0 = y - Y0; var z0 = z - Z0; var w0 = w - W0; var rankx = 0, ranky = 0, rankz = 0, rankw = 0; if (x0 > y0) rankx++; else ranky++; if (x0 > z0) rankx++; else rankz++; if (x0 > w0) rankx++; else rankw++; if (y0 > z0) ranky++; else rankz++; if (y0 > w0) ranky++; else rankw++; if (z0 > w0) rankz++; else rankw++; var i1, j1, k1, l1; var i2, j2, k2, l2; var i3, j3, k3, l3; i1 = rankx >= 3 ? 1 : 0; j1 = ranky >= 3 ? 1 : 0; k1 = rankz >= 3 ? 1 : 0; l1 = rankw >= 3 ? 1 : 0; i2 = rankx >= 2 ? 1 : 0; j2 = ranky >= 2 ? 1 : 0; k2 = rankz >= 2 ? 1 : 0; l2 = rankw >= 2 ? 1 : 0; i3 = rankx >= 1 ? 1 : 0; j3 = ranky >= 1 ? 1 : 0; k3 = rankz >= 1 ? 1 : 0; l3 = rankw >= 1 ? 1 : 0; var x1 = x0 - i1 + G4; var y1 = y0 - j1 + G4; var z1 = z0 - k1 + G4; var w1 = w0 - l1 + G4; var x2 = x0 - i2 + 2.0 * G4; var y2 = y0 - j2 + 2.0 * G4; var z2 = z0 - k2 + 2.0 * G4; var w2 = w0 - l2 + 2.0 * G4; var x3 = x0 - i3 + 3.0 * G4; var y3 = y0 - j3 + 3.0 * G4; var z3 = z0 - k3 + 3.0 * G4; var w3 = w0 - l3 + 3.0 * G4; var x4 = x0 - 1.0 + 4.0 * G4; var y4 = y0 - 1.0 + 4.0 * G4; var z4 = z0 - 1.0 + 4.0 * G4; var w4 = w0 - 1.0 + 4.0 * G4; var ii = i & 255; var jj = j & 255; var kk = k & 255; var ll = l & 255; var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0 - w0 * w0; if (t0 < 0) { n0 = 0.0; } else { var gi0 = (perm[ii + perm[jj + perm[kk + perm[ll]]]] % 32) * 4; t0 *= t0; n0 = t0 * t0 * ( GRAD4[gi0] * x0 + GRAD4[gi0 + 1] * y0 + GRAD4[gi0 + 2] * z0 + GRAD4[gi0 + 3] * w0); } var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1 - w1 * w1; if (t1 < 0) { n1 = 0.0; } else { var gi1 = (perm[ii + i1 + perm[jj + j1 + perm[kk + k1 + perm[ll + l1]]]] % 32) * 4; t1 *= t1; n1 = t1 * t1 * ( GRAD4[gi1] * x1 + GRAD4[gi1 + 1] * y1 + GRAD4[gi1 + 2] * z1 + GRAD4[gi1 + 3] * w1); } var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2 - w2 * w2; if (t2 < 0) { n2 = 0.0; } else { var gi2 = (perm[ii + i2 + perm[jj + j2 + perm[kk + k2 + perm[ll + l2]]]] % 32) * 4; t2 *= t2; n2 = t2 * t2 * ( GRAD4[gi2] * x2 + GRAD4[gi2 + 1] * y2 + GRAD4[gi2 + 2] * z2 + GRAD4[gi2 + 3] * w2); } var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3 - w3 * w3; if (t3 < 0) { n3 = 0.0; } else { var gi3 = (perm[ii + i3 + perm[jj + j3 + perm[kk + k3 + perm[ll + l3]]]] % 32) * 4; t3 *= t3; n3 = t3 * t3 * ( GRAD4[gi3] * x3 + GRAD4[gi3 + 1] * y3 + GRAD4[gi3 + 2] * z3 + GRAD4[gi3 + 3] * w3); } var t4 = 0.6 - x4 * x4 - y4 * y4 - z4 * z4 - w4 * w4; if (t4 < 0) { n4 = 0.0; } else { var gi4 = (perm[ii + 1 + perm[jj + 1 + perm[kk + 1 + perm[ll + 1]]]] % 32) * 4; t4 *= t4; n4 = t4 * t4 * ( GRAD4[gi4] * x4 + GRAD4[gi4 + 1] * y4 + GRAD4[gi4 + 2] * z4 + GRAD4[gi4 + 3] * w4); } return 27.0 * (n0 + n1 + n2 + n3 + n4); } };
})(window);
// forked from Event's "Web Creator's Contest Q the 2nd【vol.2】エントリー用コード" http://jsdo.it/Event/zojr
(function() { // Run $(initialize); //--------------------------- // CONSTANTS //--------------------------- var TOP_ID = 'qtop'; // トップページを示す id var CONTENT_MAX_WIDTH = 800; // コンテンツの最大幅 var TRANSFORM_ELEM_EXPR = 'h1, p, li, dt, dd'; // 変形させるコンテンツ以下の対象要素 //--------------------------- // VARS //--------------------------- // ベンダープレフィックスとプロパティ名 var prefix = Akm2.Vendor.prefix; var prefixHyphen = prefix ? '-' + prefix.toLowerCase() + '-' : ''; var transformKey = getVendorProperty('transform'); var animationNameKey = getVendorProperty('animationName'); // コンテンツの共通スタイルオブジェクト var contentStyles = { active: { opacity: 1, zIndex: 99 }, inactive: { opacity: 0.75, zIndex: 0 } }; contentStyles.active[transformKey] = 'rotateY(0) translateZ(500px)'; contentStyles.inactive[transformKey] = 'rotateY(0) translateZ(0)'; var naviButtonsList = []; // ナビゲーションボタン要素のリスト var contentsIdList = []; // コンテンツ id のリスト //--------------------------- // INITIALIZE //--------------------------- function initialize() { $nav = $('#navi'); $container = $('#container'); $contents = $('.content'); var $buttons = $('#navi li'); $contents.each(function(i) { var $content = $(this); // コンテンツの id を取得する var id = $content.attr('id'); contentsIdList.push(id || null); // ハッシュの変更でジャンプしてしまわないよう id を変更 if (id) $content.attr('id', id + '-content'); // 対応するボタンを取得する, コンテンツへのアンカー指定のあるリンクを子として持つリストアイテムをコンテンツの順で配列に格納 var $targetButton = null; $buttons.each(function() { var $button = $(this); if ($button.children('a:first-child').attr('href') === '#' + id) { $targetButton = $button; return false; } }); naviButtonsList[i] = $targetButton; }); // スクロール用に要素をキャッシュ var $html_body = $('html, body'); // 全てのリンクを走査 $('a').each(function(i) { var $link = $(this); var href = $link.attr('href'); // リンクがハッシュなら if (href && href.search(/^#/) > -1) { // 対象コンテンツのインデックスを取得 var targetIndex = contentsIdList.indexOf(href.replace(/^#/, '')); // ハッシュが示す id がコンテンツに存在しなければスキップ if (targetIndex < 0) return true; // リンクにクリックイベントリスナーを追加 $link.on('click', function(e) { // 現在のインデックスと同じなら抜ける if (currentIndex === targetIndex) return; // 対象インデックスが範囲内なら if (targetIndex >= 0 || targetIndex < $contents.length) { setNaviActiveButton(targetIndex); contentsTransition(targetIndex); } // 一番上までスクロール $html_body.animate({ scrollTop: 0 }, 200); // アンカーを無効に e.preventDefault(); }); } }); $window = $(window); // URL ハッシュの変更を監視 $window.on('hashchange', onWindowHashChange); // ウィンドウのリサイズを監視, translateZ を更新する $window.on('resize', onWindowResize); onWindowResize(null); // ハッシュから現在のインデックスを取得 currentIndex = getTargetIndexFromHash(); // ナビゲーションの状態を設定 setNaviActiveButton(currentIndex); naviVisible(contentsIdList[currentIndex] !== TOP_ID); // ナビゲーションの CSS アニメーションを有効にする $nav.addClass('transition-enable'); // コンテンツの状態を設定 $contents.each(function(i) { var css = {}; var range = Math.min(width, CONTENT_MAX_WIDTH) * 0.5; var randInt = Akm2.randInt; $(this) .addClass('inactive') .css(contentStyles.inactive) // 要素をランダム配置 .find(TRANSFORM_ELEM_EXPR).each(function() { var $elem = $(this); css[transformKey] = 'translateX(' + randInt(range, -range) + 'px) ' + 'translateY(' + randInt(range * 0.5, -range) + 'px) ' + // 少し上に行くよう調整 'translateZ(' + randInt(range, -range) + 'px) ' + 'rotateX(' + randInt(360, -360) + 'deg) ' + 'rotateY(' + randInt(360, -360) + 'deg) ' + 'rotateZ(' + randInt(360, -360) + 'deg) '; css.opacity = 0.5; $elem.css(css); }); }); // コンテンツを表示 $('#contents').fadeIn('first'); contentsTransition(currentIndex); } /** * Window 'resize' listener */ function onWindowResize(e) { width = window.innerWidth; height = window.innerHeight; adjustContainerHeight($container.height()); } /** * Window 'hashchange' listener */ function onWindowHashChange(e) { var targetIndex = getTargetIndexFromHash(); // 現在のインデックスと同じなら抜ける if (currentIndex === targetIndex) return; setNaviActiveButton(targetIndex); contentsTransition(targetIndex); } /** * Content element 'transitionend' listener */ function onContentTransitionEnd(e) { var $content = $(this).removeClass('transition-enable'); $content[0].removeEventListener(Akm2.Vendor.transitionend, onContentTransitionEnd, false); // ハッシュを更新 window.location.hash = contentsIdList[currentIndex]; if ($content.hasClass('inactive')) { // 現在のコンテンツでなければアニメーションを開始 $content[0].style[animationNameKey] = 'rot'; } else { // 現在のコンテンツならコンテンツコンテナの高さを調整 adjustContainerHeight($content.height() + 135); } } //--------------------------- // FUNCTIONS //--------------------------- /** * コンテンツを遷移させる * * @param targetIndex 対象コンテンツのインデックス */ function contentsTransition(targetIndex) { var css = {}; var range = Math.min(width, CONTENT_MAX_WIDTH) * 0.5; var randInt = Akm2.randInt; // コンテンツの状態を設定 $contents.each(function(i) { var $content = $(this), content = $content[0]; // jQuery で css の反映が遅れている気がするので一応要素そのものも取得 content.addEventListener(Akm2.Vendor.transitionend, onContentTransitionEnd, false); if (i === targetIndex) { // transition-enable クラスがあるなら削除 if ($content.hasClass('transition-enable')) { $content.removeClass('transition-enable'); } // inactive なら現在の変形の値を取得してアニメーションを停止し値を反映させる if ($content.hasClass('inactive')) { var transformValue = getComputedStyle($content[0], '')[transformKey]; content.style[animationNameKey] = 'none'; content.style[transformKey] = transformValue; } // 強制的にリフロー // @see http://level0.kayac.com/#!2012/08/detecting_css_transition_end.php content.offsetTop; // 要素に適用する css を準備 css[transformKey] = 'translateX(0px) translateY(0px) translateZ(0px) '+ 'rotateX(0deg) rotateY(0deg) rotateZ(0deg)'; css.opacity = 1; // 要素とコンテンツを定位置へ $content.find(TRANSFORM_ELEM_EXPR).each(function() { $(this).css(css); }); $content .addClass('transition-enable') .removeClass('inactive') .css(contentStyles.active); } else { // 要素をランダム配置 $content.find(TRANSFORM_ELEM_EXPR).each(function() { css[transformKey] = 'translateX(' + randInt(range, -range) + 'px) '+ 'translateY(' + randInt(range * 0.5, -range) + 'px) '+ // 少し上に行くよう調整 'translateZ(' + randInt(range, -range) + 'px) '+ 'rotateX(' + randInt(360, -360) + 'deg) ' + 'rotateY(' + randInt(360, -360) + 'deg) ' + 'rotateZ(' + randInt(360, -360) + 'deg) '; css.opacity = 0.5; $(this).css(css); }); // コンテンツを下げる $content .addClass('transition-enable') .addClass('inactive') .css(contentStyles.inactive); } }); // ナビゲーションの状態を設定 naviVisible(contentsIdList[targetIndex] !== TOP_ID); currentIndex = targetIndex; } /** * コンテンツコンテナの高さを調整する * * @param containerHeight 高さの目標値, ウィンドウサイズより小さい場合は反映されない */ function adjustContainerHeight(containerHeight) { containerHeight = Math.max(height, containerHeight); $container.css('height', containerHeight + 'px'); } /** * ナビゲーションの状態を設定する * * @param show 表示するか示す, false にした場合は hide クラスセレクタが付与される */ function naviVisible(show) { $nav[show ? 'removeClass' : 'addClass']('hide'); } /** * 対象コンテンツに対応するナビゲーションボタンを設定する * * @param targetIndex 対象コンテンツのインデックス */ function setNaviActiveButton(targetIndex) { $.each(naviButtonsList, function(i, $button) { if ($button.hasClass('active')) $button.removeClass('active'); if (i === targetIndex) $button.addClass('active'); }); } /** * URL ハッシュに対応するコンテンツのインデックスを取得する * * @return 対象コンテンツのインデックス, ハッシュがない場合は 0 を返す */ function getTargetIndexFromHash() { var hash = window.location.hash; return hash ? contentsIdList.indexOf(hash.replace(/^#/, '')) || 0 : 0; } /** * 文字列にベンダープレフィックスを追加して返す * * @return プレフィックスを追加した文字列 */ function getVendorProperty(property) { return prefix ? prefix + property.charAt(0).toUpperCase() + property.slice(1) : property; }
})();
Animation - Script Codes
Animation - Script Codes
Home Page Home
Developer Mp_graphic
Username mp_graphic
Uploaded August 06, 2022
Rating 3
Size 13,775 Kb
Views 36,432
Do you need developer help for Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mp_graphic (mp_graphic) Script Codes
Name
SlideDown Menu
Background
Animated Scroll Up Button
Tool tip
Ticker
Menu
Animation
Scroll fade
Facebook
MatchHeight
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!