CREATOR BLOG

「tan」の記事の一覧

指定した要素がスクロールで画面内に入った時、イベントを発動させるjQueryプラグインjquery-scrollInFunc.js

2015/02/16
tan
  • このエントリーをはてなブックマークに追加

前回公開した「指定した要素がスクロールで画面内に入った時、内包要素を順番にフェードインするjQueryプラグインjquery-scrollInTurn.js」ですが、最近このプラグインだけでは物足りなくなってきました。
「指定した要素がスクロールで画面内に入った時」、特定のアニメーション効果などを実装したいときが多々あったので、その部分に特化したプラグインをもうひとつ作りました。

その名も「指定した要素がスクロールで画面内に入った時、イベントを発動させるjQueryプラグインjquery-scrollInFunc.js」です!
ファーストビューに入っていない要素に対してのアニメーションを、スクロール位置によって発動させることができます。

続きを読む

【jQuery】初心者が陥りやすいjQueryの罠3つ

2014/12/26
tan
  • このエントリーをはてなブックマークに追加

jQueryはデザイナー向けのと言われるだけあり、扱いが簡単です。
そのためプログラミングはよく分からないけどjQueryはなんとか動かせる…という方も多いです。
私もその一人だったのですが…何度もjQuery罠にハマりました。
中でもはまりやすい有名なものとその解決法を、3つ紹介します。

もくじ

  1. アニメーションが連続してしまう
  2. セレクタに「#」や「.」を付け忘れる
  3. jQueryで追加した要素にイベントセレクタを指定しても、動かない

続きを読む

すごいサイトのテクニックを学ぼう!デベロッパーツールでソースを見る

2014/11/19
tan
  • このエントリーをはてなブックマークに追加

月曜に引き続きtanです。
今回はすごいサイトからテクニックを学ぶための方法をまとめてみました!

html/css/jsは、ブラウザ上でも簡単にソースを見ることができます。あたりまえですね。
逆に、ソースが見れないという例をあげると、画像です。
画像は保存することはできますが、専用ソフトで開いてもどのようなレイヤー構造をして、どのようなフィルターをかけているのか、どのようにマスクをかけているのかなどを知ることはできません。
ですがhtml/css/jsはソースを見ることができるんです!!

ogp_r2_c1

ソースを見れるということは恵まれた環境にあると思います。
私は定期的にすごいサイトを見てはデベロッパーツールを立ち上げて技術を学んでいます。
デベロッパーツールの紹介と、どのようなことをポイントとしてソースを見ているかをまとめました。

続きを読む

静的サイトジェネレータ「Phest」導入のメリット5

2014/11/16
tan
  • このエントリーをはてなブックマークに追加

静的サイトジェネレータがブームだとか聞きます。
私の場合は、大変な要件が来た時になにかいい方法はないものか・・・と辿り着いたのが
静的サイトジェネレータでした。
初期に集中して構築した結果、その後の修正や運用でとてつもない工数の削減ができたので、
導入は大成功となりました。

静的サイトジェネレータですが、初期コーディングの時点でも威力を発揮しました。
ここでは初期コーディングにおいての静的サイトジェネレータのメリットを5つまとめました。

もくじ

  • そもそも静的サイトジェネレータとは?
  • 選ばれたのはPhestでした
  • メリット1:同じことを複数記述しなくていい
  • メリット2:ルールを把握しやすい
  • メリット3:パスの設定方法が豊富
  • メリット4:テスト用、本番用ファイルの生成が楽
  • メリット5:パターンのテストが簡単にできる
  • 最後に

続きを読む

sublime text「プラグイン」「マクロ」「ファイルで検索」を使ったテクニック3選!

2014/09/26
tan
  • このエントリーをはてなブックマークに追加

sublime textは使い方次第で効率よく作業できます。
まずはショートカットキーやデフォルト機能、プラグインをどんどん試して欲しいです。
さまざまな機能を組み合わせることで更に便利な使い方を模索したので、その中から3つ紹介します。

もくじ

  1. 「ファイルで検索」を別の用途で活用する!
  2. マクロで複数プラグインを1アクションで実行!
  3. 他に作成したマクロの紹介

続きを読む

Recent Entry

CSSの単位まとめ pxからvm/vh/vmin/vmaxまで

レスポンシブHTMLメールを作ってみての感想

CSSのリファクタリングでした5つのこと

大人が読んでも頭を使う絵本の紹介

サイト内にうまくInstagramを取り入れてるサイト11選

Category

Archive