【続】両手塞がってる人におすすめ!勝手にスクロールしてブログが読める機能を改良したよ!【ジョジョ仕様】

この前作った勝手にスクロールして「右手に箸、左手にお茶碗」状態でもブログ読めちゃうゴミ機能
あいつをアップデートして神機能にしました!
3連休初日からいい休日過ごしたZE!
 

前回までのごみきのう!

 

前回の記事はこちら

 

sizimi24.hatenablog.com

 

ボタンクリックすると画面がゆっくりスクロールしてマウスぐりぐりしたりスマホすっすってしなくてもブログ読めちゃう

でも、ストップボタンないから途中で止まらないっていうゴミ仕様

 

とりあえず使ってみよう!

 
さあ、下のボタンをクリックだ!!!
スマホの人もやってみよう!!!
 (スマホの人うまくいかなかったらごめんぬ)
 

スクロール

 

 

 

 

 

 

 どう?

 

ゆっくり動いてない?

 

 

 

じゃあ、またメロスでもコピペしとくから読んでみてね

 

 

メロスは激怒した。必ず、かの邪智暴虐じゃちぼうぎゃくの王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。きょう未明メロスは村を出発し、野を越え山越え、十里はなれたシラクスの市にやって来た。メロスには父も、母も無い。女房も無い。十六の、内気な妹と二人暮しだ。この妹は、村の或る律気な一牧人を、近々、花婿はなむことして迎える事になっていた。結婚式も間近かなのである。メロスは、それゆえ、花嫁の衣裳やら祝宴の御馳走やらを買いに、はるばる市にやって来たのだ。先ず、その品々を買い集め、それから都の大路をぶらぶら歩いた。メロスには竹馬の友があった。セリヌンティウスである。今は此のシラクスの市で、石工をしている。その友を、これから訪ねてみるつもりなのだ。久しく逢わなかったのだから、訪ねて行くのが楽しみである。歩いているうちにメロスは、まちの様子を怪しく思った。ひっそりしている。もう既に日も落ちて、まちの暗いのは当りまえだが、けれども、なんだか、夜のせいばかりでは無く、市全体が、やけに寂しい。のんきなメロスも、だんだん不安になって来た。路で逢った若い衆をつかまえて、何かあったのか、二年まえに此の市に来たときは、夜でも皆が歌をうたって、まちは賑やかであったはずだが、と質問した。若い衆は、首を振って答えなかった。しばらく歩いて老爺ろうやに逢い、こんどはもっと、語勢を強くして質問した。老爺は答えなかった。メロスは両手で老爺のからだをゆすぶって質問を重ねた。老爺は、あたりをはばかる低声で、わずか答えた。

 

 

え?早い?追いつかない?

 

そんな時は右下のボタンをクリックしてみよう!

 

読むの追いついたらもう一度クリック! 

 


「王様は、人を殺します。」
「なぜ殺すのだ。」
「悪心を抱いている、というのですが、誰もそんな、悪心を持っては居りませぬ。」
「たくさんの人を殺したのか。」
「はい、はじめは王様の妹婿さまを。それから、御自身のお世嗣よつぎを。それから、妹さまを。それから、妹さまの御子さまを。それから、皇后さまを。それから、賢臣のアレキス様を。」
「おどろいた。国王は乱心か。」
「いいえ、乱心ではございませぬ。人を、信ずる事が出来ぬ、というのです。このごろは、臣下の心をも、お疑いになり、少しく派手な暮しをしている者には、人質ひとりずつ差し出すことを命じて居ります。御命令を拒めば十字架にかけられて、殺されます。きょうは、六人殺されました。」
 聞いて、メロスは激怒した。「あきれた王だ。生かして置けぬ。」

 

 

以下略

 

 

 

上に戻る

 

 

 

 どう?

 

 DIO様でてきたでしょ?

 

 

 そう、DIO様がザ・ワールドしてくれることでスクロールが止まるようになったのだ

 

使い方

 

記事内に作りたい場合はHTML編集モードにしてこれを記事の最初とか最後にコピペ

まあどこに貼り付けてもOK

 

<div id="overlay"> </div>

<div id="stopImg" style="display: none;"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/sizimi24/20170715/20170715023136.png" /></div>
<div id="restartImg" style="display: none;"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/sizimi24/20170715/20170715023931.jpg" /></div>

<a id="scrollChange" class="square_btn" style="display: none;" href="#">時を止める</a>

 

 

overlayってのがcssの方

DIO様登場時になんか画面全体を暗くするデザイン

scrollChangeが右下に固定で出てくるボタン

stopImgとrestartImgがスクロールを止めたりまた動かす時に出てくるDIO様なんだけど、srcの後のアドレスは自分で用意してくだしあ

僕は記事書く時に画像のアップロードできるじゃん?

そこにDIO様アップロードして一回記事に貼り付けするとアドレスわかるからそれコピペした

 

次はスクロール開始位置にこれをコピペ

<a id="start" class="square_btn" href="#">スクロール</a> 

 

 スクロール止めたい位置にこれをコピペ

 

 <a id="return" class="square_btn" href="#">上に戻る</a>

 

JavaScriptは記事の最後とかにコピペ

 

<script>

$("#start").on('click',function(e){
    isScroll = true;
    var nowLoc = $(window).scrollTop();
    var finLoc = $('#return').offset().top;
    var dur = (finLoc - nowLoc) * 30;
    $("html,body").animate().clearQueue();
    $('#scrollChange').css('display','block');
    $('#scrollChange').stop().animate({'bottom' : '0px'}, 300);
    $("html,body").animate({scrollTop:$('#return').offset().top}, { duration: dur});
    return false;
});

$("#return").on('click',function(e){
    isScroll = false;
    $("html,body").animate().clearQueue();
    $('#scrollChange').fadeOut();
    $("html,body").animate({scrollTop:$('#start').offset().top});
    return false;
});

$('#scrollChange').on('click', function(){
    if (isScroll) {
        $("html,body").animate().stop();
        $("html,body").animate().clearQueue();
        $('#scrollChange').text('そして、時は動き出す');
        isScroll = false;
        var nowLoc = $(window).scrollTop();
        $('#stopImg').css('display','block');
        $("#overlay").fadeIn();
        $('#stopImg').offset({ top: nowLoc, left: 200 });
        setTimeout(function(){
            $('#stopImg').css('display', 'none');
            $("#overlay").fadeOut();
        },3000);
       return false;
    } else {
        var nowLoc = $(window).scrollTop();
        var finLoc = $('#return').offset().top;
        var dur = (finLoc - nowLoc) * 30;
        $("html,body").animate().clearQueue();
        $('#scrollChange').text('時を止める');
        isScroll = true;
        $('#restartImg').css('display','block');
        $("#overlay").fadeIn();
        $('#restartImg').offset({ top: nowLoc, left: 200 });
        setTimeout(function(){
            $('#restartImg').css('display', 'none');
            $("#overlay").fadeOut();
            $("html,body").animate({scrollTop:$('#return').offset().top}, { duration: dur});
        },3000);
        return false;
    }
});

$(window).scroll(function(){
    var test2 = $('#return').offset().top;
    if($(this).scrollTop()>test2){
        $('#scrollChange').fadeOut();
    }
});
</script>

 

前回はスクロールさせる時間とかは手動で決めてたけど、現在位置に合わせて自動で計算するように変更したよ!

 

あとjQueryもりもりだから読み込みとか遅いかも

 

あと最後にCSS

「デザイン」→「カスタマイズ」→「デザインcss」にこれをコピペ 

 

.square_btn {
position: relative;
display: inline-block;
padding: 0.25em 0.5em;
text-decoration: none;
color: #FFF;
background: #fd9535;/*色*/
border-radius: 4px;/*角の丸み*/
box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
font-weight: bold;
border: solid 2px #d27d00;/*線色*/
}

#scrollChange {
position: fixed;
bottom: 20px;
right: 20px;
}

#scrollChange a {
display: block;
z-index: 999;
padding: 8px 0 0 8px;
border-radius: 30px;
width: 35px;
height: 35px;
background-color: #9FD6D2;
color: #fff;
font-weight: bold;
text-decoration: none;
text-align: center;
}

#scrollChange a:hover {
text-decoration: none;
opacity: 0.7;
}

#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}

 

コードは以上!意外と多いな、、、

ちなみに、半分ぐらいDIO様登場させるためのコードだよ!

 

まとめ

 

これ意外と良くない?

 

ゴミ機能から神機能でいいよね? 

 

あ、でも動作環境とかどうだろう

safarichromeは動くはず

スマホちょっとどうなるかわからぬ

 

とりあえず流行れ!