ソースコード：文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードジェネレータ

イントロダクション

「文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードジェネレータ」の JavaScript コードを掲載します。

文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードジェネレータのソースコード

<!-- program start -->

<br />
<form onsubmit="return false;">
<b>スタイルを適用するテキスト:</b><input id="input-text" style="width: 500px;" type="text" /><br />
例）こんにちは！<br />
<br />
<b>テキストのスタイルシート(CSS):</b><br />
<textarea cols="90" id="input-css" rows="20"></textarea><br />
アニメーションの1フレームに使用したいスタイルを一行ずつ記載してください。<br />
例）<br />
text-shadow: 4px 4px 4px rgba(150, 150, 150, 1);<br />
text-shadow: 8px 8px 8px rgba(150, 150, 150, 1);<br />
text-shadow: 12px 12px 12px rgba(150, 150, 150, 1);<br />
<br /></form>
<br />
<b>プレビュー：</b><br />
<div id="preview">
ここにデータが出力されます。
</div>
<br />
<b>貼り付けコード：</b><br />
<textarea cols="90" id="output-html" rows="20">ここに貼り付け用のコードが出力されます。
</textarea>
<br />
このコードをWebページのソースコードに貼り付けてください。<br />
<script id="anime-css-main" type="text/javascript">
<!--
(function(){function e(){a.setAttribute("style",c[b]);f&&(d.innerHTML="",d.appendChild(document.createTextNode("style:"+c[b])));b++;b>=c.length&&(b=0);setTimeout(e,1E3)}var a=document.getElementById("anime-css-container");if(a){a.removeAttribute("id");var c="CSS-DATA".split(/\r\n|\r|\n/g);if(!(0>=c.length)){var f=!0,d=null;f&&(d=document.createElement("div"),a.parentNode.insertBefore(d,a));var b=0;e()}}})();
//-->
</script>

<script type="text/javascript">
<!--
    (function () {

        var id_input_text = "input-text";
        var id_input_css = "input-css";
        var id_output_preview = "preview";
        var id_output_html = "output-html";


        // 前回検査時の入力値
        var input_old_text = "";
        var input_old_css = "";


        // 定期的に入力を監視し、入力が変化していたら、出力する
        setInterval((function () {

            var input_text = document.getElementById(id_input_text).value;
            var input_css = document.getElementById(id_input_css).value;

            if (input_text != input_old_text ||
                input_css != input_old_css) {


                // 出力データ形成
                var obj_output = document.createElement("div");

                obj_output.setAttribute("id", "anime-css-container");
                obj_output.appendChild(document.createTextNode(input_text));


                var multiline_css = input_css.replace(/\r\n|\r|\n/g, "\\r\\n");

                var default_anime_css_script = document.getElementById("anime-css-main").innerHTML;
                var anime_css_script = default_anime_css_script.replace("CSS-DATA", multiline_css);

                var obj_script = document.createElement("script");
                obj_script.setAttribute("type", "text/javascript");
                obj_script.innerHTML = anime_css_script;
                obj_output.appendChild(obj_script);


                // 画面へ出力
                var obj_output_container = document.createElement("div");
                obj_output_container.appendChild(obj_output);

                document.getElementById(id_output_html).value = "<!-- anime css begin -->\r\n" +
                    obj_output_container.innerHTML + "\r\n" +
                    "<!-- anime css end -->";


                var obj_output_preview = document.getElementById(id_output_preview);
                obj_output_preview.innerHTML = "";
                obj_output_preview.appendChild(obj_output);


                input_old_text = input_text;
                input_old_css = input_css;
            }

        }), 500);

    })();

//-->
</script>
<!-- program end -->

解説

解説は、以下のページで行っています。

ソースコード解説：文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードジェネレータ
http://upa-pc.blogspot.com/2015/02/explain-anime-css-code.html