[JS]スライド内の複数の要素それぞれに異なるアニメーションを設定できるスライダー -Fraction Slider
スライド内に複数の要素を配置し、それぞれ異なるタイミングで異なるアニメーションを設定できるスライダーを実装するjQueryのプラグインを紹介します。 デモ：Animation Basic それぞれ対角にアニメーションでスライドします。 Fraction Sliderの使い方 実装は非常にシンプルです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="fractionslider.css"> <script src="jquery-1.9.0.min.js" type="text/javascript"></script> <script src="jquery.fractionslider.js" type="text/javascript" ></script>
CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 - NxWorld
特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、imgであれば画像を配置してwidth:100%;とheight:auto;辺りを指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。 背景画像でも同じように縦横比を維持しつつ横幅いっぱいに画像（背景画像）を表示させたいときは以下の方法で実装することができます。 実装には背景画像を表示したい部分に下記のようなCSSを記述することで縦横比を維持しつつ横幅いっぱいに背景画像を表示させることができ、以下のサンプルは表示させたい画像が「横幅：1000px 高さ：300px」の画像だった場合のものになります。 .background { width: 100%; height: 0; paddin
Font Awesomeアイコンを素早く検索しコピー。Photoshopなどでの使い方 (PIXEL LAB)
いまやウェブ制作に欠かせない、Font Awesomeですが、500アイコン以上あるので、なかなか探すのも大変です。 公式サイトで、アイコンを検索できますが、あまり一覧性が高くないので、このページで、オリジナルのアイコン検索を作成しました。アイコン名から検索するほか、サイズを指定したり、回転したりと、アイコンをカスタマイズできます。 以上です。 ここから下は、Font Awesomeの基本的な使い方などについて紹介します。 Font Awesomeとは Font Awesomeは、500以上のアイコンが利用できる、オープンソースのアイコンフォント（ウェブフォント）です。 無料で利用でき、導入も非常に簡単です。ファイルをダウンロードしてサイトに組み込むこともできれば、CDNでも配信しているので、CDNのパスを取得して、ページに貼り付ければ、すぐに利用することもできます。Bootstrapとの
アクセス解析を学びたいなら絶対に読んでおくべき書籍厳選4冊
Web担当者は、コンバーションまでたどり着いた経緯と仕掛けをしっかり認識しておかなければ、継続的に結果を出し続けることは困難でしょう。ホームページのアクセスデータを解析し、根拠のある仮説を立てて地道に検証をくり返していくことは、成果を上げるためには不可欠です。そして、仮説を立てる手前の分析を適切に行えなければ、ホームページを成長させることはできません。 皆様は、仮説を導き出すための適切なアクセス解析は行えているでしょうか。なんとなく解析データを眺めているだけになってしまっているという方は少なくないのではないでしょうか。今回は、Webマーケティング初心者の方でも理解しやすい、アクセス解析の基本が学べる書籍4冊をご紹介します。アクセス解析に自信が無い方は是非どれか一冊でも読んでみることをオススメします。 アクセス解析とは 「アクセス解析」とは、企業や個人で運営しているWEBサイトに訪問した人が
カスタマイズしやすい！自分で作るjQueryモーダルウィンドウ | それからデザイン スタッフブログ
いまやWEB制作に欠かせないモーダルウィンドウですが、既存のプラグインを利用すると「やりたい表現があるけど、どこをどうカスタマイズすればいいかわからない…」という状況に陥ってしまった経験がある方も多いのではないでしょうか。 今回は、カスタマイズしやすい簡単なモーダルウィンドウの作り方をご紹介します。 デモはこちら。 必要なコードは以下です。（jQueryの読み込み必須） html <!-- モーダルウィンドウを開くボタン --> <p><a href="#modal01" class="modalOpen">Open</a></p> <!-- モーダルウィンドウ --> <div class="modal" id="modal01"> <!-- モーダルウィンドウが開いている時のオーバーレイ --> <div class="overLay modalClose"></div> <!-- モ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
