jQueryを使った横からフェードインするアニメーション効果です。
軽量なものなので、他のJavaScriptと組み合わせても可能です。
CSSでのposition配置をJavaScriptで制御しています。
まずは、HTMLからですが、
<div id="wrapper"> <p id="inner_anime">ここに動かしたいものを挿入</p> </div>
jQueryは、ver2.1.1.min.jsを使用しました。
<script type="text/javascript" src="jquery-2.1.1.min.js"></script> <script type="text/javascript"> $(function(){ //アニメーションさせる {marginLeft : '500px'}がアニメーションによる移動距離です $('#inner_anime').animate({marginLeft : '500px'} , 2000 , 'swing' , function(){ }); }); </script>
そして、CSSでは、任意の要素をpositionでマイナスの位置に置いてます。
<style type="text/css"> #wrapper { position: relative; } #inner_anime { position: absolute; top: 100px; left: -500px; width: 400px; height: 267px; } </style>