2014-11-03

nodebrewでバージョン管理してる場合にSublimeText3でCSScombが動かない問題

SublimeTextにCSScombというめちゃくちゃ便利なパッケージがあります。CSScombはNode.jsで動いているので、使うときはNode.jsをインストールする必要があります。

CSScomb JS を Sublime Text 3 で使ってみる | Web Design Leaves
※記事では「CSScomb js」となっていますが現在は「CSScomb」と表示されるようです。

ところがNode.jsをnodebrewで管理している場合、パッケージをインストールしてもCSScombが動いてくれません。

ググっても情報が出てこないので、パッケージ内のファイルを調べているとREADMEにこのような記述がありました。
Package/CSScomb/README.md

### Caveats

If node has been installed with NVM you need to make a symlink to node in `/usr/local/bin`. Using OS X, the binary path would typically be `/Users/[your name]/.nvm/[node version]/bin/node`.

英語は苦手なのですが、Node.jsのバージョン管理ツールNVMを使っているときはシンボリックリンクを貼る必要がありますよ、と書いてあるようです。

解決方法

この情報を参考に下記コマンドでシンボリックリンクを作成したところ、CSScombがうまく動いてくれました。

$ li -s ~/.nodebrew/current/bin/node /usr/local/bin/node

なんとか解決できました。

2014-08-21

CSS3で立体を作る

CSS3

CSS3のtransformをひと通りやりたかったので作ってみた。

表示例

文章でかなり説明しづらいので、最初に動いているものを…
止まっているとよくわからないので回してみました。

立体を表示する画面に設定するプロパティ

perspective

奥行きを設定するプロパティです。
数値が小さいほど奥行きが大きくなります。

perspective-origin

視点を設定します。
前の値が縦軸、後ろの値が横軸です。
50％に設定すると正面から見た視点になります。

立体の親要素に設定するプロパティ

transform-style

要素の子要素が3D空間に配置されるかどうかを設定します。
初期値がflatなので3Dにする場合は設定が必要です。

立体の子要素に設定するプロパティ

実際にtransformを使って変形させる為のプロパティです。

transform: translateZ();

3D空間での前後の位置を設定します。マイナスの値を入れると元の位置よりも前に、プラスのあたいを入れると元の位置より後ろに配置されます。

transform: rotatoX,Y,Z();

2Dではrotato()で設定しますが、3DではX軸、Y軸、Z軸を基準に回転します。

HTML

<div class="wrap">
    <div class="box">
        <div class="dot parts"></div>
        <div class="red parts">1</div>
        <div class="blue parts">2</div>
        <div class="green parts">3</div>
        <div class="orange parts">4</div>
        <div class="pink parts">5</div>
        <div class="gray parts">6</div>
    </div>
</div>

SCSS

実際に作成する時はperspective-origin: 150% 150%;くらいで角度をつけてやると、各パーツの位置が見やすくなります。

html{
    height: 100%;
}

body {
  background: #fff;
  font: 12px sans-serif;
  height: 100%;
}

/* 立体をレンダリングする領域の設定 */
.wrap{
    overflow: hidden;
    height: 100%;
    -webkit-perspective: 250px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective: 250px;
    -moz-perspective-origin: 50% 50%;
}

/* 立体の設定 */
.box{
    position: absolute;
    font-size: 50px;
    width: 100px;
    height: 100px;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
}

/* 立体のパーツの基本設定 */
.parts{
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    line-height: 100px;
}

.dot{
    border: 1px dashed black;
}

/* 立体の各パーツを配置 */
.red{
    background: rgba(red,0.8);
    -webkit-transform: translateZ(50px);
    -moz-transform: translateZ(50px);
}

.blue{
    background: rgba(blue,0.8);
    -webkit-transform: translateZ(-50px);
    -moz-transform: translateZ(-50px);
}

.green{
    background: rgba(green,0.8);
    -webkit-transform: rotateX(-90deg) translateZ(50px);
    -moz-transform: rotateX(-90deg) translateZ(50px);
}

.orange{
    background: rgba(orange,0.8);
    -webkit-transform: rotateX(90deg) translateZ(50px);
    -moz-transform: rotateX(90deg) translateZ(50px);
}

.pink{
    background: rgba(pink,0.8);
    -webkit-transform: rotatey(90deg) translateZ(50px);
    -moz-transform: rotatey(90deg) translateZ(50px);
}

.gray{
    background: rgba(gray,0.8);
    -webkit-transform: rotatey(-90deg) translateZ(50px);  
    -moz-transform: rotatey(-90deg) translateZ(50px);   
}


/* アニメーションの設定 */
.box{
    -webkit-animation: rotateY 5s linear infinite;
    -moz-animation: rotateY 5s linear infinite;
}

@-webkit-keyframes rotateY {
    0% {-webkit-transform: rotateY(0deg) rotateX(0deg)}
    100% {-webkit-transform: rotateY(360deg) rotateX(360deg)}
}

@-moz-keyframes rotateY {
    0% {-moz-transform: rotateY(0deg) rotateX(0deg)}
    100% {-moz-transform: rotateY(360deg) rotateX(360deg)}
}

2014-08-04

CSS3でパラパラアニメ

CSS3

スプライト画像を利用したCSS3を使ったパラパラアニメの作り方。

HTML

<div class="anime"><img src="[画像のURL]" alt=""></div>

SCSS

.anime{
    width: 160px;
    height: 300px;
    overflow: hidden;
    margin: 100px;
    img{
        margin-top: 0;
        -webkit-animation-name: anime;
        -webkit-animation-duration: 1.0s;
        -webkit-animation-timing-function: steps(4,end);
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: anime;
        -moz-animation-duration: 1.0s;
        -moz-animation-timing-function: steps(4,end);
        -moz-animation-iteration-count: infinite;
        -ms-animation-name: anime;
        -ms-animation-duration: 1.0s;
        -ms-animation-timing-function: steps(4,end);
        -ms-animation-iteration-count: infinite;
    }
}

@-webkit-keyframes anime{
    100% {margin-top: -1200px;}
}

@-moz-keyframes anime{
    100% {margin-top: -1200px;}
}

@-ms-keyframes anime{
    100% {margin-top: -1200px;}
}

画像

f:id:kawabataryo:20140818135319p:plain

画像：ドロイドちゃん
ドロイドちゃんgifアニメ003 -歩く横向き- | ドロイドちゃんまとめサイトアンドロイド擬人化無料フリー素材

animation-timing-functionでstepsを指定すると、なめらかなアニメーションではなく、終着点の値まで飛ぶ事が可能です。
この画像の場合は4コマで作っているので、steps(4,end)と指定することで終着点までを4分割した値までアニメーションせずに変化します。

.anime img{
    margin-top: 0;
　  -webkit-animation-timing-function: steps(4/* コマ数 */,end);
}

@keyframes anime{
    100% {margin-top: -1200px/* 終着点までの距離（画像の高さ） */;}
}

実際に動かすとこんな感じ

2014-07-22

CSS3 アニメーションで要素を表示・非表示

CSS3

iOS用のWEBアプリ制作のためのメモ。
iOS専用でCSS3アニメーションが使用できるので、アニメーション部分をCSS3で作ってJavaScriptでトリガーを制御します。

HTML

.onが使いたいのでjQueryを読み込んでおく。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="inc/css/common_sc.css" />
   <script type="text/javascript" src="inc/js/library/jquery-1.10.2.min.js"></script>
   <script type="text/javascript" src="inc/js/common.js"></script>
</head>
<body class="body">

<div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

<div>
    <button>表示/非表示</button>
</div>

</body>
</html>

CSS

表示、非表示のアニメーションをそれぞれ設定します。
非表示の場合はデフォルトの値をtransform: scale(0, 0);にしないとアニメーション後に再度元のサイズで表示されてしまいます。

.box{
    display: none;
    margin: 20px;
    width: 100px;
    height: 100px;
    background-color: #ff0000;
}

.anime_in .box,
.anime_out .box{
    display: inline-block;
}


/**
 * webkit
 */
.anime_in .box{
    -webkit-animation: anime_in 0.5s;
}

.anime_out .box{
    -webkit-animation: anime_out 0.5s;
    -webkit-transform: scale(0, 0);
}

@-webkit-keyframes anime_in {
    0% { -webkit-transform: scale(0, 0); }
    50% { -webkit-transform: scale(1.3, 1.3); }
    100%{ -webkit-transform: scale(1, 1); }
}

@-webkit-keyframes anime_out {
    0% { -webkit-transform: scale(1, 1); }
    50% { -webkit-transform: scale(1.3, 1.3); }
    100%{ -webkit-transform: scale(0, 0); }
}

JavaScript

とりあえず簡単にclassを付け替えるトリガーを設定。
classを付け替えるタイミングで、それぞれのclassに設定したCSS3アニメーションが発火します。

$(function(){

    $(window).on('load',function(){
        $('#container').addClass('anime_in');
    });

    $('button').on('click',function(){
        $('#container').toggleClass('anime_out').toggleClass('anime_in');
    });

});

実際に動かすとこんな感じ

2014-07-07

画像を使わずに矢印を作る

CSS3

スマートフォンサイトでよくある、右側に矢印があるリストを画像を使わずに作った。

HTML

       <ul class="list">
            <li><a href="">リスト01</a></li>
            <li><a href="">リスト02</a></li>
            <li><a href="">リスト03</a></li>
            <li><a href="">リスト04</a></li>
            <li><a href="">リスト05</a></li>
        </ul>

SCSS

 .list{

        li{
            list-style: none;
            font-size: 12px;

            a{
                position: relative;
                display: block;
                margin-bottom: -1px;
                height: 30px;
                border: 1px solid #000;
                background-color: rgba(#000,0.8);
                color: #fff;
                text-align: left;
                text-decoration: none;
                text-indent: 10px;
                line-height: 2.8;

                &:before{
                    position: absolute;
                    top: 13px;
                    right: 10px;
                    display: block;
                    width: 6px;
                    height: 1px;
                    background: #fff;
                    content: "";
                    -webkit-transform: rotate(45deg);
                    transform: rotate(45deg);
                }

                &:after{
                    position: absolute;
                    top: 17px;
                    right: 10px;
                    display: block;
                    width: 6px;
                    height: 1px;
                    background: #fff;
                    content: "";
                    -webkit-transform: rotate(135deg);
                    transform: rotate(135deg);
                }
            }
        }
    }

実際の表示はこんな感じ。

※Sassのシンタックスハイライトってまだ対応してないんですね。

bata's log

フロントエンド系のTipsとかメモ

nodebrewでバージョン管理してる場合にSublimeText3でCSScombが動かない問題

解決方法

CSS3で立体を作る

表示例

立体を表示する画面に設定するプロパティ

perspective

perspective-origin

立体の親要素に設定するプロパティ

transform-style

立体の子要素に設定するプロパティ

transform: translateZ();

transform: rotatoX,Y,Z();

HTML

SCSS

CSS3でパラパラアニメ

HTML

SCSS

画像

実際に動かすとこんな感じ

CSS3 アニメーションで要素を表示・非表示

HTML

CSS

JavaScript

実際に動かすとこんな感じ

画像を使わずに矢印を作る

HTML

SCSS