サイト開くとなぜか落ちてくる？
シリウスサイトに導入仕様したお遊び的装飾品で、サイトが開くとわずかのずれ時差で
上からちこっと落ちる画像、もしくは該当するコンテンツのタイトルを配置しましょうという
無理にお勧めするほどではないが、たまにはいいかなコンテンツ
当ページで左上に画像をおいてますが、多分少し落ちたと思います？
原本は、ＣＳＳ３テンプレートで反応するものでして、記事やフッターを横移動で時差ずれ
表示するものでしたが、シリウスのレスポンシブＴＰですとうまく反応しない...
無理くりシリウス構造にＣＳＳ3を入れると操作画面上での記事入力方法が面倒になる
..そこまでやる気はございませんで、致し方なく一つのみ、上から下へずれるを採用
導入手順
まず表示させたいページの記事内に、一応ｈ１で作成したコードをコピーして貼り付けて
ください
<div id="wrap">
<h1><img src="<% pageDepth %>img/gifer.gif" style="width:100px;" alt="" /></h1>
</div>
<h1>ここはタイトル テキストでもよい</h1>
ＣＳＳ配置
スタイルシートに以下記載を張り付け
#wrap {
margin: 0 auto;
width: 700px;
}
h1 {
position: absolute;
top:-200px;
}
.none{ display:none; }
jqueryの取り込みましょう
http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.jsをダウンロード
<a href="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js</a>
解凍して導入するサイトのディレクトリーにアップロードしてください
ＨＴＭＬ配置
<head>内に以下コードを張り付け
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
$(function(){
var hide = $('h1,#contents');
var title = $('h1');
var cont = $('#contents');
hide.addClass('none');
title.fadeIn(1000, function(){
$(this).animate({top : 0}, 500);
});
cont.fadeIn(1000, function(){
$('#footer').animate({width: 700, height: 100, left:1000, top: 100 }, 2000);
});
});
</script>
数値を書き換えて、落ちる位置や時差を調整
これで終わり
トップ、カテゴリー エントリーＨＴＭＬすべてに配置すれば、どちらのページでも中身を変えて
表示させることができます
<h1>画像 テキストどちらでもよい</h1>
上記で言いました、コンテンツやフッターのずれ導入はお勧めしませんが、何かしらで
お役立てできるよう以下ＣＳＳ３記載を配置します
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<style>
#wrap {
margin: 0 auto;
width: 700px;
}
h1 {
position: absolute;
top:-200px;
}
#contents {
position: relative;
top: 75px;
background:#bbb no-repeat;
height:300px;
width:100%;
}
#footer {
width: 0;
height: 100px;
background: #ddd;
position: relative;
margin-left: -1000px;
top: 100px;
}
.none{ display:none; }
</style>
<body>
<div id="wrap">
<h1>Title</h1>
<div id="contents">Contents</div>
<div id="footer">Footer</div>
</div>
<script>
$(function(){
var hide = $('h1,#contents');
var title = $('h1');
var cont = $('#contents');
hide.addClass('none');
title.fadeIn(1000, function(){
$(this).animate({top : 0}, 500);
});
cont.fadeIn(1000, function(){
$('#footer').animate({width: 700, height: 100, left:1000, top: 100 }, 2000);
});
});
</script>
<!--//削除してください！ここから-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-15849025-7', 'auto');
ga('send', 'pageview');
</script>
<!--//ここまで-->
</body>
</html>