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>
