ホタルっぽい雰囲気の演出をCSSだけで作る

edo_m18

2011-12-07 16:01:30

License: MIT License

Fork: 134

Fav: 9

View: 89501

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();
}());

ホタルっぽい雰囲気の演出を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; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

edo_m18

URL
http://edom18.hateblo.jp/

Unity/VRエンジニア。最近のもっぱらの興味は機械学習（ディープラーニング）とレイマーチング（とレイトレ）。

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/aYlu/js"></script>

QR Code

Discussion

Questions on this code?

Favorite by

migi

shiho_takaha

moyumo

phongjalvn

kodaka123

dwim_world

ds729

alt:

CSS3

caramelb0612:

アニメーション canvas

Forked

sort by

forked: ホタルっぽい雰囲気の演出をCSSだけで作る

recruiter012

373/1/46

forked: ホタルっぽい雰囲気の演出をCSSだけで作る

kurehanitsu

373/1/46

forked: ホタルっぽい雰囲気の演出をCSSだけで作る

goodluck777

0
0
1095

373/1/46

forked: ホタルっぽい雰囲気の演出をCSSだけで作る

kinstrum

373/1/46

ホタルっぽい雰囲気の演出をCSSだけで作る

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Favorite by

Forked