TOP

サイト開くとなぜか落ちてくる?

シリウスサイトに導入仕様したお遊び的装飾品で、サイトが開くとわずかのずれ時差で
上からちこっと落ちる画像、もしくは該当するコンテンツのタイトルを配置しましょうという

 

無理にお勧めするほどではないが、たまにはいいかなコンテンツ

 

当ページで左上に画像をおいてますが、多分少し落ちたと思います?

 

原本は、CSS3テンプレートで反応するものでして、記事やフッターを横移動で時差ずれ
表示するものでしたが、シリウスのレスポンシブTPですとうまく反応しない...

 

無理くりシリウス構造にCSS3を入れると操作画面上での記事入力方法が面倒になる
..そこまでやる気はございませんで、致し方なく一つのみ、上から下へずれるを採用

 


 

導入手順

 

まず表示させたいページの記事内に、一応h1で作成したコードをコピーして貼り付けて
ください

 

<div id="wrap">
<h1><img src="<% pageDepth %>img/gifer.gif" style="width:100px;" alt="" /></h1>
</div>

 

<h1>ここはタイトル テキストでもよい</h1>

 


 

CSS配置

 

 

スタイルシートに以下記載を張り付け

 

#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>
解凍して導入するサイトのディレクトリーにアップロードしてください

 

HTML配置

 

<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>

 

 

数値を書き換えて、落ちる位置や時差を調整

 

 

これで終わり

 

 

トップ、カテゴリー エントリーHTMLすべてに配置すれば、どちらのページでも中身を変えて
表示させることができます
<h1>画像 テキストどちらでもよい</h1>

 


 

上記で言いました、コンテンツやフッターのずれ導入はお勧めしませんが、何かしらで
お役立てできるよう以下CSS3記載を配置します

 

 

<!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>

 

 

上からすっと落ちてくるタイトルか、もしくは画像か?を導入
jquery採用の装飾系まとめ
トップページ