Vivus.jsを使用してSVGロゴを線で描画した後にフェードインして表示させる方法 | oku-log
sketchやIllustratorなどで作成したロゴデータを準備します。 （sketchで書き出したSVGでも対応出来ますが、classや色の指定がIllustratorの方が楽なのでIllustratorの方がオススメです。） sketchの場合はExportで、Illustratorの場合は別名保存でSVGデータを用意します。 その際、テキストデータはアウトライン化しておいてください。 SVGのパスアニメーションが使えるプラグインです。 ダウンロードはこちらから。 jQuery本体 サンプルでは執筆時点で最新バージョンの3.3.1を使用してますが、必要に応じてバージョンは選択してください。 1系でも動作は可能です。 実装方法 Vivus.jsとjQuery本体を読み込む htmlファイルやphpファイルなど実際にアニメーションを表示させるページに二つを読み込みます。 <script
2段階でアニメーションさせるスクロールエフェクト | oku-log
最近、よく見かけるスクロールすると文字とかの背景が横からブワッと出てきて、そのままブワッと消えて文字が現れるみたいなエフェクト。 例えばこういうのです。 https://tympanus.net/Development/BlockRevealers/ シンプルなレイアウトでも動きをつけることで単調にならないってメリットもあり、こういうエフェクトは重宝します。 実装する場合、いくつか方法はあるのですが今回は二つほど紹介します。 プラグイン「Block Reveal Effects」を使う方法 先ほどリンクを貼った「Block Reveal Effects」はcodropsで公開されています。 まずは以下のページの「Download source」から一式ダウンロード可能です。 https://tympanus.net/codrops/2016/12/21/block-reveal-effec
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
