shmurakami/comment.html

## comment.html
<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <title>comment</title>
    <style type="text/css">
        * {
            margin:0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            font-size: 22px;
        }

        .main {
            background-color: #000;
            width: 100%;
            height: 100%;
        }

        .main .comment {
            color: #fff;
            width: 100%;
            position: absolute;
            white-space: nowrap;
        }

        footer {
            width: 100%;
            background-color: #fff;
            position: fixed;
            bottom: 0;
            line-height: 1em;
            padding: 10px 0;
        }

        footer p.comment {
            width: 100%;
        }

        footer input.comment {
            float: left;
            padding: 10px;
            margin-left: 10px;
            width: 85%;
            border: 1px solid #888;
            border-radius: 4px;
            font-size: 16px;
        }

        footer p.comment .send-comment {
            float: right;
            padding: 5px 10px;
            margin-right: 10px;
            border: 1px solid #888;
            border-radius: 4px;
            text-align: center;
            font-size: 16px;
            background-color: #fff;
            width: 10%;
        }
    </style>
</head>
<body>
    <main id="main" class="main">
    </main>

    <footer>
        <p class="comment">
            <label for="comment"><input id="comment" class="comment" type="text"></label>
            <input id="send" class="send-comment" type="button" value="書き込む">
        </p>
    </footer>

<script src="lib/js/jquery.js"></script>
<script>
(function($) {
    var ipt = $('#comment');
    ipt.focus();
    var main = $('#main');
    var send = $('#send');
    var enter = 13;

    send.click(function() {
        var text = ipt.val();
        if (text !== null || text !== '') {
            sendComment(text);
        }
    });

    ipt.keypress(function(event) {
        if (event.which === enter) {
            sendComment($(this).val());
        }
    });

    function sendComment(comment) {
        var p = document.createElement('p');
        p = $(p).text(comment);
        render(p);
        ipt.val('');
        ipt.focus();
    }

    function render(element) {
        main.append(prepareCommandStyle(element));
        doAnimation(element);
    }

    function prepareCommandStyle(text) {
        var width = main.width();
        var height = main.height() - 100;
        var top = Math.random() * (height);
        text.addClass('comment');
        text.css('marginLeft', width);
        text.css('top', top);
        return text;
    }

    function doAnimation(element) {
        var width = 0 - getTextLength(element);
        element.animate({
                marginLeft: width
            }, {
            duration: 7 * 1000,
            easing: 'linear',
            queue: false,
            complete: function() {
                var self = this;
                self.remove();
            }
        });
    }

    function getTextLength(element) {
        return (element.text().length + 1) * 2 * 10;
    }

})($);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="jp">
	<head>
	<meta charset="UTF-8">
	<title>comment</title>
	<style type="text/css">
	* {
	margin:0;
	padding: 0;
	}

	html, body {
	width: 100%;
	height: 100%;
	font-size: 22px;
	}

	.main {
	background-color: #000;
	width: 100%;
	height: 100%;
	}

	.main .comment {
	color: #fff;
	width: 100%;
	position: absolute;
	white-space: nowrap;
	}

	footer {
	width: 100%;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	line-height: 1em;
	padding: 10px 0;
	}

	footer p.comment {
	width: 100%;
	}

	footer input.comment {
	float: left;
	padding: 10px;
	margin-left: 10px;
	width: 85%;
	border: 1px solid #888;
	border-radius: 4px;
	font-size: 16px;
	}

	footer p.comment .send-comment {
	float: right;
	padding: 5px 10px;
	margin-right: 10px;
	border: 1px solid #888;
	border-radius: 4px;
	text-align: center;
	font-size: 16px;
	background-color: #fff;
	width: 10%;
	}
	</style>
	</head>
	<body>
	<main id="main" class="main">
	</main>

	<footer>
	<p class="comment">
	<label for="comment"><input id="comment" class="comment" type="text"></label>
	<input id="send" class="send-comment" type="button" value="書き込む">
	</p>
	</footer>

	<script src="lib/js/jquery.js"></script>
	<script>
	(function($) {
	var ipt = $('#comment');
	ipt.focus();
	var main = $('#main');
	var send = $('#send');
	var enter = 13;

	send.click(function() {
	var text = ipt.val();
	if (text !== null \|\| text !== '') {
	sendComment(text);
	}
	});

	ipt.keypress(function(event) {
	if (event.which === enter) {
	sendComment($(this).val());
	}
	});

	function sendComment(comment) {
	var p = document.createElement('p');
	p = $(p).text(comment);
	render(p);
	ipt.val('');
	ipt.focus();
	}

	function render(element) {
	main.append(prepareCommandStyle(element));
	doAnimation(element);
	}

	function prepareCommandStyle(text) {
	var width = main.width();
	var height = main.height() - 100;
	var top = Math.random() * (height);
	text.addClass('comment');
	text.css('marginLeft', width);
	text.css('top', top);
	return text;
	}

	function doAnimation(element) {
	var width = 0 - getTextLength(element);
	element.animate({
	marginLeft: width
	}, {
	duration: 7 * 1000,
	easing: 'linear',
	queue: false,
	complete: function() {
	var self = this;
	self.remove();
	}
	});
	}

	function getTextLength(element) {
	return (element.text().length + 1) * 2 * 10;
	}

	})($);
	</script>
	</body>
	</html>