なにかっぽいヘッダー
あれですよ、あれあれ。
最近評判が悪い某140文字投稿サービス風なヘッダーを考えて見ました。
実用性は皆無です。
とりあえずめんどくさいのでjQuery使ってます。
[html title=”ソース全文”]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>それっぽいヘッダー</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
function getScrollTop(){
console.debug($(window).scrollTop());
}
$(window).on("scroll resize",function(){
var s = 300 – 16;
console.debug($(window).scrollTop()-s);
if($(window).scrollTop()>=s)
{
$(‘.header-icon’).stop().animate({top:0},500);
$(‘.header-image’).css({position:’fixed’,top:’-284px’});
$(‘.header-info’).css({position:’fixed’,top:’16px’});
}else{
$(‘.header-icon’).stop().animate({top:’174px’},500);
$(‘.header-image’).css({position:’relative’,top:0});
$(‘.header-info’).css({position:’relative’,top:0});
}
});
});
</script>
<style>
body
{
margin:0;padding:0;
min-height:10000px;
}
header
{
position:relative;
width:100%;
}
header .header-image
{
background-image:url(bg.png);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:100%;
height:300px;
position:relative;
}
header .header-info
{
height:60px;
width:100%;
background-color:#fff;
border-bottom: 1px solid #e1e8ed;
position:relative;
padding:0 0 0 10%;
}
header .header-info .header-info-icon
{
border-radius:3px;
width:48px;
height:48px;
margin:6px 0;
display:inline-block;
vertical-align:top;
}
header .header-info dl
{
display:inline-block;
margin:6px 0;
padding:0;
}
header .header-info dt,
header .header-info dd
{
margin:6px;
padding:0;
}
header .header-info dt
{
font-size:18px;
}
header .header-info dd
{
font-size:13px;
color:#ccc;
}
header .header-icon
{
width:212px;
height:212px;
border-radius:12px;
background-color:#fff;
position:absolute;
bottom:174px;
left:10%;
top:174px;
}
header .header-icon img
{
width:200px;
height:200px;
margin:6px;
border-radius:12px;
}
</style>
</head>
<body style="background-color:#ccc;">
<header>
<div class="header-image"></div>
<div class="header-info"><img src="001.png" class="header-info-icon"><dl><dt>いけさん</dt><dd>@hide3tu</dd></div>
<div class="header-icon"><img src="001.png"></div>
</header>
</body>
</html>
[/html]
例によって実行状態が見たい方はこちら
もうちょい滑らかにすることもまあできるっちゃできますが、やってる最中に仕事しようって気になったのでこの辺で。