–」をリニューアルしました。今回は制作したときのポイントなどをまとめておきます。ε:)1.SVGで手書き風アニメーション1.1.SVGファイルとコードの作成1.2.HTMLに組み込む2.独自のソーシャルボタンでページを軽量化2.1.HTML2.2.CSS2.3.jQuery3.「MixItUp」でサムネイルのソートを実装3.1.HTML3.2.CSS3.3.jQuery4.まとめSVGで手書き風アニメーション温かみのある手書き風のイラストをSVGで再現してみました。ページを読み込むと一筆書きで線を繋いでいきます。PainterというサイトでSVGのタグを出力します。Painterシェイプはシルエットデザインよりお借りしております。シルエットデザイン作成したSVGをドラッグアンドドロップしてアップロードします。アップロードするとSVGのシェイプをなぞるようにアニメーションします。下にあるスライダーで色や線の太さを調整することができます。clipboard」でコードをコピーします。});このコードをjsファイルを新規作成して保存します。今回は「deer.js」と名前を付けました。HTMLに組み込むまずは表示させたい部分にdivタグでIDを割り振っておきます。id="deer"></div>続いてはHTMLに必要なJSを読み込みます。GitHubからダウンロード出来ます。src="js/deer.js"></script>これでSVGが表示されるようになりました。DemozipファイルをDownloadSVGは今まで使用したことがなかったので、以下の記事を参考にしてページに組み込みました。初心者の私でも簡単に使えました。公式のソーシャルボタンは読み込みに時間がかかってしまうため、オリジナルデザインのソーシャルボタンを設置してみました。ソーシャルボタンのタグは以前ご紹介したボタンのHTMLを使用し、今回新たにjQueryで吹き出しにソーシャルボタンの押された回数をカウントする機能を付けました。カウント方法は以下のページを参考にしました。create(アクアクリエイト)「MixItUp」でサムネイルのソートを実装MixItUp.jsを使用し、ページのカテゴリのソート機能を実装しました。上部のタブを切り替えるとアニメーションしながら並び替えていきます。dl.mix{display:none;}CSSで.mixを「display:none;」にしないと正しく動作しません。従ってJavascriptを無効にするとサムネイルが表示されなくなります。src="js/jquery.mixitup.min.js"></script><script>$(function(){$('#workList').mixItUp();});</script>jQuery本体と「jquery.mixitup.min.js」を読み込み、ソートしたいIDを上記のように記述します。ファイルは公式ページの「MixItUp」からダウンロードします。DemozipファイルをDownloadこの動作は以下のページを参考にしました。他にも様々なオプションが用意されているみたいなので試してみたいと思います。ASCII.jp:要素をアニメーションでカッコよく並び替えるMixItUp|こうめの“これから使える”jQueryプラグインまとめとりあえず形になったので公開しておりますが、制作物の詳しい情報が無かったりとポートフォリオとしては未完成です。これから少しずつアップデートしていき、オシャレなページを完成させていきたいです。鹿このブログを管理している鹿。Webデザインとガジェットが好き。Meこのブログを運営している”自称”カワイイ鹿。フロントエンドエンジニアを目指して勉強しているなかで、スマートフォンやタブレットなどのモバイルガジェットを集めています。Inkscape」を試してみました。Simsellerで「梅の花満開!ウインターセール」を開催中。キャンペーン2020」で事務手数料無料+SIMのみプランが激安価格で申し込める!Satechiの電流・電圧チェッカー「ST-TCPM」レビュー。UBOOM」レビュー。Clip(クリエイタークリップ)は、ウェブデザインやガジェットについて書いているブログです。フロントエンドエンジニアを目指して勉強しているなかで、スマートフォンやタブレットなどのモバイルガジェットを集めています。ClipHOMEABOUTPROFILECONTACT。