SVG pathの長さを取得する方法 & アニメーションのデモ – How to get path length. | Stronghold Archive
どうもこんばんは。Toshikuraです。今回のTipsは【SVG pathの長さを取得する方法 & アニメーションのデモ – How to get path length.】です。見慣れたタイトルですが備忘として書いておきます。この方法を使えば複数のパスの長さでも取得できて便利です。 <svg viewBox="0 0 500 500"> <path d="M419.8,65.6L81.2…"/> </svg> <script> $(function(){ $('path').each(function(i){ var $this = $(this); var path = this; var len = path.getTotalLength(); // lenがパスの長さです。 }); }); </script> pathのMethods【getTotalLength】を使用します。
TweenLiteを使用して SVG polygon（polyline） を任意の形状へ変形アニメーションさせる方法 | Stronghold Archive
どうもこんばんは。Toshikuraです。久しくTipsを書いていなかったのですが地味に便利でしたので【TweenLiteを使用して SVG polygon を任意の形状へ変形（アニメーション）させる方法】をメモしておきます。今回のTipsでは TweenLite（Gsap）を使用します。 SVGのpolygon（もしくはpolyline）はSVG内のXY座標をpoints=”X1,Y1 X2,Y2 …”と指定し、点と点と繋ぐ事で図形を描写しています。 <a id="onChangeByTM" href="#">HOVER</a> <svg viewBox="0 0 158.5 183" width="200px"> <polygon id="poly" points="0,45.8 79.2,0 158.5,45.8 158.5,137.3 79.2,183 0,137.3"/> </s
ページが見つかりませんでした | Stronghold Archive
404 Not Found. ページが見つかりませんでした。URLが変更されたか削除された可能性があります。The page you were looking for doesn't exist. You may have mistyped the address or the page may have moved.
ページが見つかりませんでした | Stronghold Archive
404 Not Found. ページが見つかりませんでした。URLが変更されたか削除された可能性があります。The page you were looking for doesn't exist. You may have mistyped the address or the page may have moved.
ページが見つかりませんでした | Stronghold Archive
404 Not Found. ページが見つかりませんでした。URLが変更されたか削除された可能性があります。The page you were looking for doesn't exist. You may have mistyped the address or the page may have moved.
CSS 画像やテキスト要素を縦横中央配置する6つの方法 – How to Center Elements Horizontally and Vertically. | Stronghold Archive
CSS 画像やテキスト要素を縦横中央配置する6つの方法 – How to Center Elements Horizontally and Vertically. どうもこんにちは。Toshikuraです。今回のTipsは【CSS 画像やテキスト要素を縦横中央配置する6つの方法】です。CSSの基礎的な記事ですが縦横中央配置には色々な方法がありますのでメモしておきます。うまく使い分けると便利な場面もあったりしますので備忘としてお役に立つかもしれません。 1. display:tableでの実装 CSSのdisplayプロパティによって要素をテーブル化し、vertical-alignで縦方向へ中央配置する方法でレスポンシブ化も容易です。もっとも安定した方法だと思いますがIE7では動作しません。 HTML <div class="table"> <p>p tag p tag p tag p ta
ページ遷移やローディングで使えそうなパラパラめくれる画面を作ってみたよ。 | Stronghold Archive
どうもこんにちは。Toshikuraです。今回のTipsは【ページ遷移やローディングで使えそうなパラパラめくれる画面を作ってみたよ。】です。最近ちょっと可愛いローディングを見つけたので、簡単にアニメーションの速度やタイミングを変更できるように試してみました。 実装方法 コードの流れはシンプルです。画面の分割数を指定しfor文でappend、その際それぞれの要素にtransition-delayを設定しCSS3アニメーションをすこしづつ遅延させています。分割には%を使用していますのでレスポンシブでも使用可能かと思います。CSS3transitionを使用していますのでブラウザは選びますが、使い方によっては面白くなるかなと思います。 <script src="js/jquery-1.X.X.min.js"></script> </head> <body> <a href="" id="btn"
WordPress get_posts()とquery_posts() それぞれでの特定記事を除外した一覧取得 | Stronghold Archive
どうもこんにちは。Toshikuraです。今回のTipsは【Wordpress get_posts()とquery_posts() それぞれでの特定記事を除外した一覧取得】です。記事一覧から特定記事を表示させない場合や詳細ページにて同一カテゴリから現在の記事を除外したい場合に使えますのでメモしておきます。 get_postでは’exclude’を用いて指定した記事を除外します。さらに詳しく知りたい場合はテンプレートタグ/get postsをご参照ください。 記事ID「20」を除外した一覧 <?php $posts = get_posts(array('exclude' => 20,'posts_per_page' => 10));?> <?php if($posts): foreach($posts as $post): setup_postdata($post); ?> … <?php
YouTube Player APIを使用したiframe動画の基本vol3 – 音量の設定と操作 | Stronghold Archive
どうもこんにちは。toshikuraです。今回のTipsは【YouTube Player APIを使用したiframe動画の基本vol3 – 音量の設定と操作】です。前回から引き続きYouTube Player APIのiframe Embedsの記事です。前回は動画の設置と再生停止とミュートに関しての記事でしたが今回は音量の設定とその操作が対象なります。 実装方法 音量の設定と編集にはHTML5のinputtype=”range”を使っています。音量の初期値はgetVolumeで取得することができますので取得することができますのでこの値をrangeのvalueに入れこみます。 HTML <div id="player"></div> <input class="youtube_volume" type="range" max="100" min="0" value=""> <input
YouTube Player APIを使用したiframe動画の基本vol2 – ミュートの切り替え | Stronghold Archive
どうもこんにちは。toshikuraです。今回のTipsは【YouTube Player APIを使用したiframe動画の基本vol2 – ミュートの切り替え】です。前回から引き続きYouTube Player APIのiframe Embedsの記事です。前回は動画の設置と再生停止に関しての記事でしたが今回は音量の切り替えが対象なります。 実装方法 動画の設置に関しては割愛していますので詳しくは動画の設置と再生停止をご確認ください。 HTML <div id="player"></div> <a class="youtube_mute" href="#">MUTE</a> <a class="youtube_unmute" href="#">UNMUTE</a> $(‘.youtube_mute’).click(function(){ player.mute(); }); アンミュート
YouTube Player APIを使用したiframe動画の基本vol1 – 動画の設置と再生停止 | Stronghold Archive
どうもこんにちは。toshikuraです。今回のTipsは【YouTube Player APIを使用したiframe動画の基本vol1 – 動画の設置と再生停止】です。少し前にvimeoAPIについて記事を書きましたのでYouTubePlayerAPIについても書いてみようかと思いました。内容は簡単ですができることも多いので覚えておいても損は無いかと思います。 まずはじめに 最初にYouTube Player APIを使用したiframe動画（YouTube Player API Reference for iframe Embeds）を使用するにあたってAPIを読み込んでおく必要があります。また今回のデモではコードを短くしたかったのでjQueryを使用しています（なくてもOKです）。 <script src="js/jquery-1.9.0.min.js"></script> <scr
12種類 CSS3アニメーションで枠線に楽しい動きをつけてみた | Stronghold Archive
どうもこんにちは。Toshikuraです。今回のTipsは【12種類 CSS3アニメーションで枠線に楽しい動きをつけてみた】です。Flash主流時代にはよく見たので作ってみました。実装は比較的簡単ですのでよろしければ遊んでみてください。まずはデモ（クラス切り替えでの実装）｜デモ（マウスホバーでの実装）を見ていただけると内容が把握できるかと思います。 実装方法 実装には下記HTMLが必要になります。枠線とは書きましたが正確にはそれぞれ上下左右に配置されたDIV要素になります。 HTML <div class="box"> <h1>1</h1> <div class="bd1 bd"> <div class="bdT"></div> <div class="bdB"></div> <div class="bdR"></div> <div class="bdL"></div> </div> </
ページが見つかりませんでした | Stronghold Archive
404 Not Found. ページが見つかりませんでした。URLが変更されたか削除された可能性があります。The page you were looking for doesn't exist. You may have mistyped the address or the page may have moved.
ページが見つかりませんでした | Stronghold Archive
404 Not Found. ページが見つかりませんでした。URLが変更されたか削除された可能性があります。The page you were looking for doesn't exist. You may have mistyped the address or the page may have moved.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
