jQuery｜ぼうびろく

19 May

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

27 June

アコーディオン開閉パネル　fontawesomeでアイコンも変える

js
//アコーディオンパネル
$('.button i').attr('class', 'fa-plus-square');
$(function(){
    $('.button')
    .on('click', function(){
        $('#panel').slideToggle(400);
        $('.button i').toggleClass('fa-minus-square');
        return false;
    });

});

html
<a class="button">　ぼたん　<i class="fa fa-plus-square fa-fw"></i></a>

<ul id="panel">
<li></li>
<li></li>
<li></li></ul>

css
#panel{
display:none;
}

複数のアコーディオンパネルをそれぞれのボタンで開閉する場合はこうする
$(this).next('#panel').slideToggle(400);

25 May

本のようにめくれるjquery 　turn.js

http://jsfiddle.net/A9a7E/9278/

WPで動かそうと色々検索したが、最新のは　4th　とかもうよくわかんない。
オプションがすごいたくさんあるけど、それを解説してる日本のページは一切ない。
http://www.turnjs.com/docs/Main_Page

turn.js4thを落として中の数あるsampleから選んで実装してみたけど、footerが下へもぐりこむはスマホ対応らしいのにスマホで擬似要素がおかしいわと、なんか無理矢理PCだけで動かした。

その後、2つの本を設置することになり、2個おいてみたら、1個目が表示されなくなった。
これ2個置けないの？あーもうめんどくせーと、また何か手がかりはないかと検索の旅にでた。
そして公式のオプションページのメインページに、jsfiddle.netへのリンクがあり、そこで一番簡単な状態から色々試せるようになっていた。

ならここで試して見ようと思い、#flipbook　をコピペして#flipbook_02を用意し、css、js、html　全部に#fipbook_02を追加した。そしたら2個表示できてどっちも正常に動いた！
複数設置できるんだやったー！そんで左側にjqueryUIやらmobileやら色々読み込まれてて、全部必要なのか…と思ったけど、jquery本体だけで動くっぽい。

これらのコードをコピペしてWPのphpに直書き。cssはheaderで読み込ませるようになんとかっていうツールでやった。

その後私がしたかったことは、1枚の横画像を見開きページとしてみせたい。
最初はわざわざ1枚を2分割して1つ筒登録していたが、ファイルが多くなってめんどくさい。なんかないもんかとオプションを翻訳機をかけてみていると、

http://turnjs.com/docs/Scissor

scissorというものを発見。クラス名も.doubleだし、これでできんじゃね？とテンションがあがる。さっそく真似てコードを書き足してみたら画像が表示されなくなった。おかしい。はーなんで？と思い、scissor　turn.js　で検索してみると、googleが配布している？scissor.jsファイルによってこのオプションが動いてるらしいことがわかる。はあ？オプションのとこにかいとけや！
scissr.jsを設置してみると、画像は表示されるようになったが正常ではない。

なにげなくturns.js4thのsampleファイルを開くと、double　というフォルダを発見。もしやこれ？！と思い、中をみてみると、.double　がついていてcssの設定があった。
オプションの説明にcss設定もかいとけやまじで。なんなんだよふざけんなよ。
これをみながらcssをかき、widthの数値を変えるとやっと見開きで綺麗に表示されたよー；；；

メニューをつけたいがどうしてもできない。sampleファイルみると、メニューをつけるにはサムネ画像を用意しなきゃいけないみたいで超めんどい。タブメニューはfirefoxで正常に表示されない。普通のスライダーみたいなメニュー簡単にできねーのかよ。
なんかそんなの設置してたDEMOサイトあったけど、読み込むjs多すぎてなにがメニューに必要な記述なのかさっぱりわかんない。hash.js関係かなあ…。

表示がいらなくて、見開きからはじめたい場合。を検索したら日本語で書いてる人がいた！
ありがたい…この人いなかったら終わってた。

$('#selector').turn({

page: 2,

when: {

start: function(event, pageObject, corner) {

if (pageObject.next==1)

event.preventDefault();

turning: function(event, page, view) {

if (page==1)

event.preventDefault();

}

});

20 May

リアルな水の波紋が表示できるjquery.ripples

https://github.com/sirxemic/jquery.ripples
http://sirxemic.github.io/jquery.ripples/


$('body').ripples({
	resolution: 512,
	dropRadius: 20,
	perturbance: 0.04,
});

数値変えると波紋の状態が変わるんだろうけど、よくわかんないのでそのまま。

・注意点
canvasで描写しているので、背景imgがないと反映されません。
つまりbackground-colorだけつけても波紋出ません。
かつての透過gifを利用し、背景imgとして埋めます。そうすると背景未指定のtransparentでも波紋がみえるようになります。

17 May

メニューをhoverで横からぴょこっととびだすやつ

http://tympanus.net/Tutorials/FixedNavigationTutorial/
http://designlife7.blog2.fc2.com/blog-entry-37.html

他、メニュー時のアニメーション
http://www.webopixel.net/javascript/179.html

17 May

ナビゲーションメニューをスクロール位置に応じて点灯したい

http://blog.begoingto.jp/js-scroll-menu/
このサイトのjsがわかりやすいと思いました
offset.topの数値はメニューの位置にあわせて変える

css

#header {
    position: fixed;
    width: 100%;
    height: 50px;
    top: 0;
    text-align: center;
    background: rgba(180, 180, 180, 0.9);
    border-bottom: 1px solid #ccc;
}

$(function() {
    /**
     * ページ内スクロール
     */
    $('a[href^=#]').click(function(){
        var speed = 500;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top - 50;
        $("html, body").animate({scrollTop:position}, speed, "swing");
        return false;
    });
});




$(function() {
 
    /**
     * 現在スクロール位置によるグローバルナビのアクティブ表示
     */
    var scrollMenu = function() {
        // 配列宣言
        // ここにスクロールで点灯させる箇所のidを記述する
        // 数値は全て0でOK
        var array = {
            '#top': 0,
            '#menu-1': 0,
            '#menu-2': 0,
            '#menu-3': 0,
            '#menu-4': 0,
            '#menu-5': 0
        };
 
        var $globalNavi = new Array();
 
        // 各要素のスクロール値を保存
        for (var key in array) {
            if ($(key).offset()) {
                array[key] = $(key).offset().top - 10; // 数値丁度だとずれるので10px余裕を作る
                $globalNavi[key] = $('#header ul li a[href="' + key + '"]');
            }
        }
 
        // スクロールイベントで判定
        $(window).scroll(function () {
            for (var key in array) {
                if ($(window).scrollTop() > array[key] - 50) {
                    $('#header ul li a').each(function() {
                        $(this).removeClass('active');
                    });
                    $globalNavi[key].addClass('active');
                }
            }
        });
    }
 
    // 実行
    scrollMenu();
});