テンプレート・トーク:Highlighter
ナビゲーションに移動
検索に移動
アンダーラインを動かす提案[編集]
「エンペディアの見た目をもっと変えていこうキャンペーン」第１弾です。
画面をスクロールして上位1/3に入った時に、アンダーラインが左から右に動くように設定したらイケてると思うのですが、いかがでしょうか。簡単にイメージを掴みたい人はこちらのページの冒頭を見てください。
エンペディア上で動作確認したい方は、下記を使ってご確認ください。
- CSS
.highlighter {
position: relative;
display: inline-block;
}
.highlighter::after {
z-index: -1;
position: absolute;
bottom: 0.3em;
left: 0;
content: '';
width: 100%;
height: 0.5em;
background-color: #A7D7AB;
transform: scale(0, 1);
transform-origin: left top;
transition: transform 1s;
}
.highlighter.js-scroll::after {
transform: scale(1, 1);
}
- JS
var scroll;
var winH = $(window).height();
var objH = $('.highlighter').outerHeight();
var objTop = $('.highlighter').offset().top;
var objBottom = objTop + objH;
$(window).on('scroll', function(){
scroll = $(window).scrollTop();
if(scroll >= objBottom - winH/3){
$('.highlighter').addClass('js-scroll');
}
});
- 動作確認ページ
実装する場合には「MediaWiki:Common.css」「MediaWiki:Common.js」に書き加える形になります。ご意見お待ちしております。---謎の管理者もどき BadEditor 2023-03-06T15:01:59 (JST)
- （追記）ご指摘踏まえ、色や重なりなどを微修正。速度もややゆっくりに変更。---謎の管理者もどき BadEditor 2023-03-07T14:33:46 (JST)
- いいと思います。もう少し色が濃くする以外に異論はないです。--1108-Kiju/Talk 2023-03-06T20:20:46 (JST)
- いいアイデアかも。一点だけ気になることとして、現状のソースでは、印刷用バージョンを開くと highlighter と重なる部分が白く消えてしまっていますので、可能ならその点は修正してほしい気がします（Enpediaの記事を印刷する人なんていないかもしれませんが...一応...）。--Written By 360度 (Talk) 2023-03-06T22:30:40 (JST)
- これ、１個難点としては、記事のボトムで使った場合、上位1/3までスクロールされないので、アンダーラインが発動しないということですね。解決策は......「常時アンダーラインを表示」するための引数を追加するぐらいでしょうか。（ごちゃごちゃした仕様になるなぁ）---謎の管理者もどき BadEditor 2023-03-16T22:39:53 (JST)
