javascriptでcssスプライト用ロールオーバー機能を作る

jsでcssスプライト用ロールオーバー

今日は、前々から欲しいと思っていた機能を試しに作ってみたのでメモっときます

スマホの場合、cssスプライトを使う場面は多々あると思うのですが

よくググって出てくるロールオーバー用のJSは、画像ファイル名を置換するものが大半で

cssのクラス名を置換してくれる物が、見つからなかったので作りました

ググる力が足りなかっただけかもしれませんが・・・。

※DOMの操作なのでメモリが消費されるから、".off()"とか入れた方がよろしいかも・・・。

導入手順

使い方は、めっちゃ簡単！！

1.背景画像を指定しているデフォルトクラスに"XXX_off"というように"_off"をクラス名の語尾につける

2.ロールオーバー用の背景画像が指定されているクラス名に"XXX_on"というように"_on"をクラス名の語尾につける

3.トリガー用の"Rollover_js"をつける

4.ロールオーバー用javascriptとJquery.jsかzepto.jsを読み込ませる





あら不思議！！

タッチした瞬間にロールオーバー用の画像が表示され

離した瞬間に元画像にもどります。

使用例

■html

<p class="Rollover_js btnbg_ss_off margin_top10"></p>
<p class="Rollover_js btnbg_s_off margin_top10"></p>
<p class="Rollover_js btnbg_m_off margin_top10"></p>
<p class="Rollover_js btnbg_ll_off margin_top10"></p>
※こんな感じでクラスが、複数してされていても"_off"と"_on"の置換のみ行います

■ロールオーバー用javascript

         $(function(){

             //一応改良した時にグローバルを汚染しないように即時関数にしてみた
             (function(){

                 //トリガー用クラス指定
                 $('.Rollover_js').on({

                     //タッチスタート用イベント
                     touchstart:function(){

                         //タッチされたノードのクラス名を取得し、"_off"を"_on"に変更
                         var _on = $(this).attr('class').replace('_off','_on');

                         //"_on"になったクラス名に書き換え
                         $(this).attr('class',_on);
                     },

                     //タッチエンド用イベント
                     touchend:function(){

                         //"_on"を"_off"に変更
                         var _off = $(this).attr('class').replace('_on','_off');

                         //"_off"になったクラス名に書き換え
                         $(this).attr('class',_off);
                     }
                 });
             }());
         });

これを作るのに手伝ってもらった方がいるので、ものすごく感謝

とともにひたすら開発しないと、読めるのみになってまう＞＜



「もりもり書いて色んなものつくりなさい

この一年で思いっきり知識つめこんだんだから

これからはアウトプットに徹しなよ」



この言葉をうちに秘めて、ひっそり、こっそり開発して行きますー！！

grunt0,4でstyledoccoを使う

           

grunt0,4でstyledoccoを使う

            前回に引き続き、grunt系をかきます！

            ・前回の記事は、grunt0,4でsass,compassをコンパイル

           

            世の中、一昔前からoocss等騒がれていて概要を調べたら、cssをモジュール化して使うというような

            感じだったので、styleguideはうってつけの存在！！

            一目で、欲しいパーツがわかり更新にも耐えられて

            デザイナーの方とやりとりもしやすい（実際にhtmlで見れる為）という理由で、導入を決めました。

            気になる方は、ぜひ試してください！

            費用対効果は、最高にいいです！

            ※scssファイルのままで、構築出来ます。（コンパイルする必要ないです）
           

導入手順

            ※既にnode.jsが、入ってる状態から書きます

            　まだインストールされてない方は、こちらを参考にお願いします

           

            1.grunt-styleguideをインストール

            2.styledocco用のディレクトリ等、用意

            3.Gruntfile.jsにタスク追加

            4.ターミナルから、実行
           

grunt-styleguideをインストール

           

               $ npm install styledocco　ーg
               または
               $ sudo npm install styledocco　ーg
           

           

styledocco用のディレクトリ等、用意

           ※どの位置にディレクトリを用意してもいいのですが、自分の場合は下記になります。
           

            root
              |-Gruntfile.js

              |-node_modules
                 └-grunt-styleguide
              |-package.json
              └-hogegit
                   └-hoge2
                        |-hoge3style
                            |-index.html
                            └-styleguid.html
                        └-css
                            |-styledocco
                                └-styleguid.scss
                            |-style.css
                            └-sass
                                └-style.scss
           

           

Gruntfile.jsにタスク追加

            ※// styleguideが、追加された項目
           

module.exports = function(grunt){
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        //compass用
        compass :{
            dist :{
                options: {
                    config: 'hanagit/sass_flower/config.rb'
                }
            }
        },
        //コピー用
        copy: {
            dist: {
                files: {
                    //コピー先:コピー元
                    'hanagit/html/css/style.css': 'hanagit/sass_flower/css/style.css'
                }
            }
        },
        // styleguide
        styleguide: {
            dist: {
                options: {
                    name: 'hoge', // スタイルガイドのタイトル
                },
                //書き出しhtml:変換用ファイル指定
                files: {
                    'hogegit/hoge2/hoge3style': 'hogegit/hoge2/css/sass/styledocco/*.scss'
                }
            }
        },
        // styleguide
        clean: ['hogegit/hoge2/hoge3style/'],
        watch :{
            scsscompile: {
                files:['hanagit/sass_flower/css/sass/*.scss','hanagit/sass_flower/css/sass/cp/*.scss'],
                tasks:['compass']
            },
            filecopy: {
                //監視用ファイル
                files:'hanagit/sass_flower/css/style.css',
                tasks:['copy']
            },
            // styleguide
            stylecompile: {
                files: ['hogegit/hoge2/css/sass/styledocco/**/*.scss','hogegit/hoge2/css/sass/styledocco/*.scss'],
                tasks: ['clean','styleguide']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib');
    // styleguide
    grunt.loadNpmTasks('grunt-styleguide');
    grunt.registerTask('default', ['watch']);
};
           

           

ターミナルから、実行

           

                デフォルトタスクにしているので、下記のみで起動
               $ grunt
           

           

           

            次は、JSの事書く予定!!

            多分・・・。

grunt0,4でsass,compassをコンパイル

grunt0,4でsass,compassをコンパイルする方法

・公式サイトは、こちら
・grunt0.4インストール方法は、こちら
・grunt0.3から0.4へのアップデート方法は、こちら
・その他の必要な物は、こちら

ディレクトリ構造

           

           root
              |-Gruntfile.js
              |-node_modules
              |-package.json
              └-hogegit
                   └-hoge2
                        |-config.rb
                        └-css
                            |-style.css
                            └-sass
                                └-style.scss
           
           

Gruntfile.js記述内容

           

           
               module.exports = function(grunt){
               grunt.initConfig({
               pkg: grunt.file.readJSON('package.json'),
               compass :{
               dist :{
               options: {
               config: 'hanagit/sass_flower/config.rb'
               }
               }
               },
               copy: {
               dist: {
               files: {
               //コピー先:コピー元
               "hogegit/html/css/style.css": "hogegit/hoge2/css/style.css"
               }
               }
               },
               watch :{
               filecopy: {
               //監視ファイル
               files:'hanagit/sass_flower/css/style.css',
               //実行タスク
               tasks:['copy']
               },
               scsscompile: {
               files:'hanagit/sass_flower/css/sass/*.scss',
               tasks:['compass']
               }
               }
               });
               grunt.loadNpmTasks('grunt-contrib');
               grunt.registerTask('default', ['watch']);
               };
           
           

※コピー用のタスクも記述されてます

config.rb記述内容

           

           
               http_path = "/"
               css_dir = "hogegit/hoge2/css"
               sass_dir = "hogegit/hoge2/css/sass"
               images_dir = "/img"
               javascripts_dir = "/js"
               #output_style = :expanded
               output_style = :compressed
               line_comments = false
               #sassミニファイ用
               #compressed
               #デフォルト
               #expanded
           
           

実行方法

1.ターミナルを開きrootのディレクトリまで移動
2."grunt"と入力して、実行
3.下記内容が表示されたら、実行中

Running "watch" task
Waiting...