ホタルっぽい雰囲気の演出をCSSだけで作る edo_m18 Follow 2011-12-07 16:01:30 License: MIT License Fork134 Fav9 View95251 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 372 lines HTML 1 lines CSS 46 lines CSSだけで作るとか言っておきながら、 細かい位置調整についてはJSを使ってます。 ただ、光の加減、移動アニメーションは すべてCSSで実装しています。 ホタルっぽい雰囲気の演出をCSSだけで作る jQuery v1.7.1 (function () { 'use strict'; var isWebKitTransform3d = ('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()), prefix = '', isTransform = (function () { var propList = [ 'transform', 'webkitTransform', 'MozTransform', 'mozTransform', 'oTransform', 'msTransform' ], div = document.createElement('div'), css = div.style; for (var i = 0, l = propList.length; i < l; i++) { if (css[propList[i]] !== undefined) { prefix = ('-' + propList[i].replace(/Transform/g, '-')).toLowerCase(); return true; } } return false; }()); /** * * @name chkProperty * @function * @param propList * @return {Object.result(Boolean)} match result. * @return {Object.property} matched property. */ function chkProperty(propList) { var div = document.createElement('div'), css = div.style, property = '', result = false; for (var i = 0, l = propList.length; i < l; i++) { if (css[propList[i]] !== undefined) { property = propList[i]; result = true; break; } } return { result: result, property: property }; } /** * * @name getDuration * @function * @param target * @return {String / Number} value of transiton duration. */ function getDuration(target) { var duration, property = '', propList = [ 'transitionDuration', 'webkitTransitionDuration', 'MozTransitionDuration', 'mozTransitionDuration', 'oTransitionDuration', 'msTransitionDuration' ], prop = chkProperty(propList).property; duration = document.defaultView.getComputedStyle(target, '')[prop]; return { property: prop, time: duration } } function setProperty(context, toPos) { var durationItem, css = {}, $el = $(context.el); if (isWebKitTransform3d || isTransform) { durationItem = getDuration($el[0]); if (isWebKitTransform3d) { css[prefix + 'transform'] = 'translate3d(' + toPos.x + 'px, ' + toPos.y + 'px, 0)'; } else if(isTransform) { css[prefix + 'transform'] = 'translate(' + toPos.x + 'px, ' + toPos.y + 'px)'; } css.opacity = 0; ////////////////// $el[0].style[durationItem.property] = '0ms'; $el.css({ 'opacity': 1 }); setTimeout(function () { $el[0].style[durationItem.property] = durationItem.time; setTimeout(function () { $el.css(css); }, 10); }, 10); } else { css.left = toPos.x; css.top = toPos.y; css.opacity = 0; $el.css('opacity', 1); $el.animate(css, 2500); } } /** * FireflyCollection class * @class */ function FireflyCollection() { this.initialize.apply(this, arguments); } /** * Create `FireflyCollection` instance by `conf` arguments. */ FireflyCollection.create = function (conf) { var maxNum = conf.num || 5, fireflyCollection = new FireflyCollection(); for (var i = 0; i < maxNum; i++) { fireflyCollection.add(new Firefly(conf)); } return fireflyCollection; }; /** * FireflyCollection prototype */ FireflyCollection.prototype = { initialize: function () { this.fireflys = []; }, add: function (firefly) { this.fireflys.push(firefly); }, moveRandom: function (pos) { $.each(this.fireflys, function () { this.moveRandom(); }); }, start: function () { this._loop(); }, /** * Loop method. * looping redraw. * @private */ _loop: function () { var self = this; setInterval(function () { self._draw(); }, 7000); self._draw(); }, /** * Draw element animation * @private */ _draw: function () { this.moveRandom(); }, /** * Draw animation with click event. */ moveRadius: function (pos) { $.each(this.fireflys, function () { this.moveRadius(pos); }); } }; /** * Firefly class * @class */ function Firefly() { this.initialize.apply(this, arguments); } /** * class method. */ Firefly.chkProperty = chkProperty; Firefly.getDuration = getDuration; /** * Firefly prototype */ Firefly.prototype = { initialize: function (conf) { var random = Math.random, x = 0, y = 0, css = {}; if (!(conf && conf.stage)) { return false; } this.stage = $(conf.stage); this.width = this.stage.width(); this.height = this.stage.height(); this.delay = (Math.random() * 5000) << 0; this.r = ((Math.random() * 7) + 1) << 0; if (conf.position) { this.x = x = conf.position.x; this.y = y = conf.position.y; } else { x = (random() * this.width) << 0; y = (random() * this.height) << 0; } //set firefly size. css.width = css.height = this.r; css['border-radius'] = this.r / 2; css[prefix + 'border-radius'] = this.r / 2; if (isWebKitTransform3d) { css[prefix + 'transform'] = 'translate3d(' + x + 'px, ' + y + 'px, 0)'; } else if (isTransform) { css[prefix + 'transform'] = 'translate(' + x + 'px, ' + y + 'px)'; } else { css.left = x; css.top = y; } this.el = $('<div />') .addClass('fireflyDot') .css(css) .appendTo(this.stage); }, moveRandom: function () { var self = this, toPos = { x: ((Math.random() * this.width) << 0), y: ((Math.random() * this.height) << 0) }; setTimeout(function () { setProperty(self, toPos); }, this.delay); }, /** * move as radius by click event. */ moveRadius: function () { var $el = $(this.el), random = Math.random, x = ((random() * 200) - 100) << 0, y = ((random() * 200) - 100) << 0, durationItem, css = {}, toPos = { x: this.x + x, y: this.y + y }; function _remove() { $(this).remove(); } if (isWebKitTransform3d || isTransform) { durationItem = getDuration($el[0]); if (isWebKitTransform3d) { css[prefix + 'transform'] = 'translate3d(' + toPos.x + 'px, ' + toPos.y + 'px, 0)'; } else if(isTransform) { css[prefix + 'transform'] = 'translate(' + toPos.x + 'px, ' + toPos.y + 'px)'; } css.opacity = 0; ////////////// $el[0].style[durationItem.property] = '0ms'; $el.css({ 'opacity': 1 }); setTimeout(function () { $el[0].style[durationItem.property] = durationItem.time; setTimeout(function () { $el .css(css) .bind('transitionend webkitTransitionEnd mozTransitionEnd', _remove); }, 10); }, 10); } else { css.left = toPos.x; css.top = toPos.y; css.opacity = 0; $el.css('opacity', 1); $el.animate(css, 2500, _remove); } } }; /** * export class * @export */ window.Firefly = Firefly; window.FireflyCollection = FireflyCollection; // sample start var firefly1 = FireflyCollection.create({ stage: $('#stage'), num: 10 }).start(); }()); <div id="stage"></div> ホタルっぽい雰囲気の演出をCSSだけで作る body { background-color: #111; } #stage { position: relative; width: 300px; height: 300px; margin: 50px auto; border: solid 1px #111; background: #222; } .fireflyDot { position: absolute; left: 0; top: 0; width: 4px; height: 4px; background-color: rgba(255, 241, 202, 0.8); -webkit-border-radius: 2px; border-radius: 2px; opacity: 0; -webkit-box-shadow: 0 0 5px rgba(255, 241, 202, 0.8), 0 0 8px rgba(255, 241, 202, 0.8), 0 0 15px rgba(255, 241, 202, 0.9); -moz-box-shadow: 0 0 5px rgba(255, 241, 202, 0.8), 0 0 8px rgba(255, 241, 202, 0.8), 0 0 15px rgba(255, 241, 202, 0.9); -ms-box-shadow: 0 0 5px rgba(255, 241, 202, 0.8), 0 0 8px rgba(255, 241, 202, 0.8), 0 0 15px rgba(255, 241, 202, 0.9); -o-box-shadow: 0 0 5px rgba(255, 241, 202, 0.8), 0 0 8px rgba(255, 241, 202, 0.8), 0 0 15px rgba(255, 241, 202, 0.9); box-shadow: 0 0 5px rgba(255, 241, 202, 0.8), 0 0 8px rgba(255, 241, 202, 0.8), 0 0 15px rgba(255, 241, 202, 0.9); z-index: 5000; transition-property: transform, opacity; transition-duration: 2.5s; transition-timing-function: ease-out; -webkit-transition-property: -webkit-transform, opacity; -webkit-transition-duration: 2.5s; -webkit-transition-timing-function: ease-out; -moz-transition-property: -moz-transform, opacity; -moz-transition-duration: 2.5s; -moz-transition-timing-function: ease-out; -ms-transition-property: -ms-transform, opacity; -ms-transition-duration: 2.5s; -ms-transition-timing-function: ease-out; -o-transition-property: -o-transform, opacity; -o-transition-duration: 2.5s; -o-transition-timing-function: ease-out; } CSSだけで作るとか言っておきながら、 細かい位置調整についてはJSを使ってます。 ただ、光の加減、移動アニメーションは すべてCSSで実装しています。 (function () { 'use strict'; var isWebKitTransform3d = ('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()), prefix = '', isTransform = (function () { var propList = [ 'transform', 'webkitTransform', 'MozTransform', 'mozTransform', 'oTransform', 'msTransform' ], div = document.createElement('div'), css = div.style; for (var i = 0, l = propList.length; i < l; i++) { if (css[propList[i]] !== undefined) { prefix = ('-' + propList[i].replace(/Transform/g, '-')).toLowerCase(); return true; } } return false; }()); /** * * @name chkProperty * @function * @param propList * @return {Object.result(Boolean)} match result. * @return {Object.property} matched property. */ function chkProperty(propList) { var div = document.createElement('div'), css = div.style, property = '', result = false; for (var i = 0, l = propList.length; i < l; i++) { if (css[propList[i]] !== undefined) { property = propList[i]; result = true; break; } } return { result: result, property: property }; } /** * * @name getDuration * @function * @param target * @return {String / Number} value of transiton duration. */ function getDuration(target) { var duration, property = '', propList = [ 'transitionDuration', 'webkitTransitionDuration', 'MozTransitionDuration', 'mozTransitionDuration', 'oTransitionDuration', 'msTransitionDuration' ], prop = chkProperty(propList).property; duration = document.defaultView.getComputedStyle(target, '')[prop]; return { property: prop, time: duration } } function setProperty(context, toPos) { var durationItem, css = {}, $el = $(context.el); if (isWebKitTransform3d || isTransform) { durationItem = getDuration($el[0]); if (isWebKitTransform3d) { css[prefix + 'transform'] = 'translate3d(' + toPos.x + 'px, ' + toPos.y + 'px, 0)'; } else if(isTransform) { css[prefix + 'transform'] = 'translate(' + toPos.x + 'px, ' + toPos.y + 'px)'; } css.opacity = 0; ////////////////// $el[0].style[durationItem.property] = '0ms'; $el.css({ 'opacity': 1 }); setTimeout(function () { $el[0].style[durationItem.property] = durationItem.time; setTimeout(function () { $el.css(css); }, 10); }, 10); } else { css.left = toPos.x; css.top = toPos.y; css.opacity = 0; $el.css('opacity', 1); $el.animate(css, 2500); } } /** * FireflyCollection class * @class */ function FireflyCollection() { this.initialize.apply(this, arguments); } /** * Create `FireflyCollection` instance by `conf` arguments. */ FireflyCollection.create = function (conf) { var maxNum = conf.num || 5, fireflyCollection = new FireflyCollection(); for (var i = 0; i < maxNum; i++) { fireflyCollection.add(new Firefly(conf)); } return fireflyCollection; }; /** * FireflyCollection prototype */ FireflyCollection.prototype = { initialize: function () { this.fireflys = []; }, add: function (firefly) { this.fireflys.push(firefly); }, moveRandom: function (pos) { $.each(this.fireflys, function () { this.moveRandom(); }); }, start: function () { this._loop(); }, /** * Loop method. * looping redraw. * @private */ _loop: function () { var self = this; setInterval(function () { self._draw(); }, 7000); self._draw(); }, /** * Draw element animation * @private */ _draw: function () { this.moveRandom(); }, /** * Draw animation with click event. */ moveRadius: function (pos) { $.each(this.fireflys, function () { this.moveRadius(pos); }); } }; /** * Firefly class * @class */ function Firefly() { this.initialize.apply(this, arguments); } /** * class method. */ Firefly.chkProperty = chkProperty; Firefly.getDuration = getDuration; /** * Firefly prototype */ Firefly.prototype = { initialize: function (conf) { var random = Math.random, x = 0, y = 0, css = {}; if (!(conf && conf.stage)) { return false; } this.stage = $(conf.stage); this.width = this.stage.width(); this.height = this.stage.height(); this.delay = (Math.random() * 5000) << 0; this.r = ((Math.random() * 7) + 1) << 0; if (conf.position) { this.x = x = conf.position.x; this.y = y = conf.position.y; } else { x = (random() * this.width) << 0; y = (random() * this.height) << 0; } //set firefly size. css.width = css.height = this.r; css['border-radius'] = this.r / 2; css[prefix + 'border-radius'] = this.r / 2; if (isWebKitTransform3d) { css[prefix + 'transform'] = 'translate3d(' + x + 'px, ' + y + 'px, 0)'; } else if (isTransform) { css[prefix + 'transform'] = 'translate(' + x + 'px, ' + y + 'px)'; } else { css.left = x; css.top = y; } this.el = $('<div />') .addClass('fireflyDot') .css(css) .appendTo(this.stage); }, moveRandom: function () { var self = this, toPos = { x: ((Math.random() * this.width) << 0), y: ((Math.random() * this.height) << 0) }; setTimeout(function () { setProperty(self, toPos); }, this.delay); }, /** * move as radius by click event. */ moveRadius: function () { var $el = $(this.el), random = Math.random, x = ((random() * 200) - 100) << 0, y = ((random() * 200) - 100) << 0, durationItem, css = {}, toPos = { x: this.x + x, y: this.y + y }; function _remove() { $(this).remove(); } if (isWebKitTransform3d || isTransform) { durationItem = getDuration($el[0]); if (isWebKitTransform3d) { css[prefix + 'transform'] = 'translate3d(' + toPos.x + 'px, ' + toPos.y + 'px, 0)'; } else if(isTransform) { css[prefix + 'transform'] = 'translate(' + toPos.x + 'px, ' + toPos.y + 'px)'; } css.opacity = 0; ////////////// $el[0].style[durationItem.property] = '0ms'; $el.css({ 'opacity': 1 }); setTimeout(function () { $el[0].style[durationItem.property] = durationItem.time; setTimeout(function () { $el .css(css) .bind('transitionend webkitTransitionEnd mozTransitionEnd', _remove); }, 10); }, 10); } else { css.left = toPos.x; css.top = toPos.y; css.opacity = 0; $el.css('opacity', 1); $el.animate(css, 2500, _remove); } } }; /** * export class * @export */ window.Firefly = Firefly; window.FireflyCollection = FireflyCollection; // sample start var firefly1 = FireflyCollection.create({ stage: $('#stage'), num: 10 }).start(); }()); <div id="stage"></div> body { background-color: #111; } #stage { position: relative; width: 300px; height: 300px; margin: 50px auto; border: solid 1px #111; background: #222; } .fireflyDot { position: absolute; left: 0; top: 0; width: 4px; height: 4px; background-color: rgba(255, 241, 202, 0.8); -webkit-border-radius: 2px; border-radius: 2px; opacity: 0; -webkit-box-shadow: 0 0 5px rgba(255, 241, 202, 0.8), 0 0 8px rgba(255, 241, 202, 0.8), 0 0 15px rgba(255, 241, 202, 0.9); -moz-box-shadow: 0 0 5px rgba(255, 241, 202, 0.8), 0 0 8px rgba(255, 241, 202, 0.8), 0 0 15px rgba(255, 241, 202, 0.9); -ms-box-shadow: 0 0 5px rgba(255, 241, 202, 0.8), 0 0 8px rgba(255, 241, 202, 0.8), 0 0 15px rgba(255, 241, 202, 0.9); -o-box-shadow: 0 0 5px rgba(255, 241, 202, 0.8), 0 0 8px rgba(255, 241, 202, 0.8), 0 0 15px rgba(255, 241, 202, 0.9); box-shadow: 0 0 5px rgba(255, 241, 202, 0.8), 0 0 8px rgba(255, 241, 202, 0.8), 0 0 15px rgba(255, 241, 202, 0.9); z-index: 5000; transition-property: transform, opacity; transition-duration: 2.5s; transition-timing-function: ease-out; -webkit-transition-property: -webkit-transform, opacity; -webkit-transition-duration: 2.5s; -webkit-transition-timing-function: ease-out; -moz-transition-property: -moz-transform, opacity; -moz-transition-duration: 2.5s; -moz-transition-timing-function: ease-out; -ms-transition-property: -ms-transform, opacity; -ms-transition-duration: 2.5s; -ms-transition-timing-function: ease-out; -o-transition-property: -o-transform, opacity; -o-transition-duration: 2.5s; -o-transition-timing-function: ease-out; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? CSSだけで作るとか言っておきながら、 細かい位置調整についてはJSを使ってます。 ただ、光の加減、移動アニメーションは すべてCSSで実装しています。 Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author edo_m18 URLhttp://edom18.hateblo.jp/ Unity/VRエンジニア。 最近のもっぱらの興味は機械学習（ディープラーニング）とレイマーチング（とレイトレ）。 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/aYlu/js"></script> アニメーション ホタル 虫 Discussion Questions on this code? Tags CSS3 art&design canvas css アニメーション ホタル 虫 Favorite by migi shiho_takaha moyumo phongjalvn kodaka123 dwim_world ds729 alt: CSS3 caramelb0612: アニメーションcanvas Forked sort by latest page views favorite forked forked: ホタルっぽい雰囲気の演出をCSSだけで作る recruiter012 00 724 373/1/46 アニメーション ホタル 虫 forked: ホタルっぽい雰囲気の演出をCSSだけで作る kurehanitsu 00 695 373/1/46 アニメーション ホタル 虫 forked: ホタルっぽい雰囲気の演出をCSSだけで作る goodluck777 00 1241 373/1/46 css アニメーション ホタル 虫 forked: ホタルっぽい雰囲気の演出をCSSだけで作る kinstrum 00 1002 373/1/46 アニメーション ホタル 虫 1 2 3 4 5 6 7 8 9 10NEXT>>
