Demo page of MOA Text

Lens

Source

<div class="moatext_lens">
I have a dream ...
</div>

Try it

back to TOP

Wave

Source

<div class="moatext_wave">
I have a dream ...
</div>

Try it

back to TOP

Opacity

Source

<div class="moatext_opacity">
I have a dream ...
</div>

Try it

back to TOP

Lens and Wave

Source

<script type="text/javascript" language="JavaScript"><!--
  $(function(){
    $(".moamix1").moatext({effects:["lens","wave"]});
  });
-->
</script>

<div class="moamix1">
I have a dream ...
</div>

Try it

back to TOP

Lens and Wave(animate by word)

Source

<script type="text/javascript" language="JavaScript"><!--
  $(function(){
    $(".moamix1w").moatext({effects:["lens","wave"],parser:jQuery.fn.moatext.parser_byword});
  });
-->
</script>

<div class="moamix1w">
I have a dream ...
</div>

Try it

back to TOP

Lens, Wave and Opacity

Source

<script type="text/javascript" language="JavaScript"><!--
  $(function(){
    $(".moamix2").moatext({effects:["lens","wave","opacity"]});
  });
-->
</script>

<div class="moamix2">
もちろん日本語でも大丈夫です。No problem about Japanese language.
</div>

Try it

back to TOP

Original functions

Source

<script type="text/javascript" language="JavaScript"><!--
  $(function(){
    $(".moafunc").moatext({hover:[
        function(){$(this).css({
            color: "#FF0000",
            fontWeight: "bold"
        });},
        function(){$(this).css({
            color: "#000000",
            fontWeight: "normal"
        });}
    ]});
  });
-->
</script>

<div class="moafunc">
Please visit our site ...
</div>

Try it

back to TOP

Omikuji

Source

<script type="text/javascript" language="JavaScript"><!--
  $(function(){
	$(".omikuji").css({opacity:"0.0"})
			.eq(Math.floor(Math.random()*3))
			.css({opacity:"1.0"})
			.moatext({
				effects:["opacity"],
				oneway:true,
				values:{opacity:{base:"0.0"}}
				});
-->
</script>

<div class="omikuji">大吉 Great blessing!</div>
<div class="omikuji">吉 Blessing!</div>
<div class="omikuji">凶 Curse!</div>

Try it

back to TOP

Greeting

Source

<script type="text/javascript" language="JavaScript"><!--
  $(function(){
	$(".moaoptions").moatext({
		effects: ["lens","wave","opacity"],
		values:{
			"opacity": {
				"base": "1.0",
				"enter": "0.1",
				"leave": "1.0"
			},
			"wave": {
				"enter": ["-50px","20px"]
			}
		},
		duration:2000,
		easing:"swing"
	});
  });
-->
</script>

<div class="moaoptions">Hello　こんにちは...</div>

Try it

These greeting messages in various languages are quoted from here

back to TOP

Japanese smiley

Source

<script type="text/javascript" language="JavaScript"><!--
  $(function(){
	$(".smiley").moatext({
				effects:["lens","wave"],
				action_type: "hover"
				});
-->
</script>

<div class="smiley">(^_^)(^○^)(^-^)(^_-)-☆(^-^)</div>

Try it

back to TOP