読者です 読者をやめる 読者になる 読者になる

東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

【SVG】SVGアニメーション(ロゴ編-線を描いた後色を塗る)

illustratorでロゴをsvgで保存。こんとき、1.1で。

②保存したsvgテキストエディタで開いて以下を全て選択してコピーしてhtmlのbodyタグ内にペースト。 ③svgタグに「logo1」というクラス名を付与しcss記述。fillがロゴの塗りの指定。strokeが線の設定。aiデータからsvgにすると、もちろんpathだけで生成されるわけでなく、polygonやellopseやcircleで生成されることもあるのでそれぞれセレクタ指定を忘れずに。もしpathなど個別にcss指定したければ該当するpathなどにクラス付与して指定。

svg{
	display:block;
	margin: 0 auto;
	max-width: 100%;
    height: auto;
    }


.logo1 path{
	stroke-width:0.1em;
	stroke:#000;
	stroke-dasharray: 500;
        fill:#000;
    stroke-dashoffset: 500;
    animation: drawline 4s linear forwards,FillIn 2s 4s linear both;
    }

.logo1 polygon{
	stroke-width:0.1em;
	stroke:#000;
	stroke-dasharray: 500;
        fill:#000;
    stroke-dashoffset: 500;
    animation: drawline 4s linear forwards,FillIn 2s 4s linear both;
    }


.logo1 ellipse{
	stroke-width:0.1em;
	stroke:#000;
	stroke-dasharray: 500;
        fill:#000;
    stroke-dashoffset: 500;
    animation: drawline 4s linear forwards,FillIn 2s 4s linear both;
    }

/*一部色を変えたい場合*/

.logo1 path.green{
fill:#6FB92C;
}


/*キーアニメーションは線を書いた後、塗りを足して線を消すという命令を*/

    @keyframes drawline {
     to {stroke-dashoffset:0;}
     }
    @keyframes FillIn {
     from { fill-opacity: 0;stroke:#000;stroke-width:0.1em;}
     to { fill-opacity: 1;stroke:none;stroke-width:0em;}
     }


そして、指定のところでスクロールが来たらそれをトリガーにしてsvgアニメーションをはじめたかったのだけれど、ぐぐっても全然やり方がでない。。。waypoint.jsでクラス付与とかもやってみたけども全然・・・誰かアドバイスをいただけませんでしょうかww


【参考URL】
http://freyjasrm.com/2014/12/14/svg%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A7%E5%8B%95%E3%81%8F%E3%83%AD%E3%82%B4%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86/