jQueryでクリック(click)での、連打を防止して アニメーションが終わるまでクリックボタン無効にする
jQueryでアニメーション効果を与えるボタンでの連打をすることによって、アニメーションがぐちゃぐちゃになってしまわないように、連打できないようにする工夫
ページスクロールでダイナミックな切り替えエフェクトが楽しい コンテンツスライダー 「multiScroll.js」
jQueryのプラグインを紹介。コンテンツがダイナミックに切り替わるエフェクトが特徴的な コンテンツスライダー的なものを実装するプラグイン
スクロールで色が流れ込む演出を作るアイディア – Icons Filling Effect
スクロールに合わせて アイコンに色が注入されていくような演出を実装するアイディア
背景がスクロールに合わせて少しづつ動く ワンランクアップのパララックス
CSSで背景を固定した要素とそうではない要素を組み合わせてパララックスにすることがあります その場合は background-attachment の fixed か scroll かの違いをうまく使い分けて行います & […]
要素や画像を好きな形に、四角、丸、楕円、多角にトリミングができる CSSのclip-pathのまとめ
以前、clip-path を使ってpolygonで多角形にくり抜く方法を紹介しましたが 今回は、それ以外にもある 丸、楕円 を紹介 (四角形系もありますが 再現出来なかったので今回は省略) 以前紹介したもの […]
自由な形に画像の切り抜きができるSVGのclip-path polygonを CSSで行う
CSSで画像の切り抜きをする SVG の ClipPath で polygon というものがあり 3点以上の座標をX点とY点で指定することで、その領域を切り抜くことが出来ます 画像編集ソフトでクリッピングするようなもので […]
背景が4方向にスライドするコンテンツの切り替えが美しい jQueryをつかったアイディア
複数のコンテンツを、コンテンツごとに1画面表示にして それぞれを、表示するときの切り替えが美しい
jQueryをつかって、中身はそのままでHTMLタグを書き換える
HTMLタグを強制的に変更したいときに HTMLから操作がするのが難しいケースや、動的に変更させたいときに使える方法 jQueryを使ってHTMLのタグの中身はそのままで、タグのみを変更する […]
jQueryだけでiframeを再読み込み(reload)させる方法とプレーンなjavascriptを使った方法
アニメーションが伴うものや ランダムな要素があるもので、何度か確認したいものがあります そんな時にはiframe内を再読み込みさせてやりたい それを解決する方法
jQueryを使ってページの先頭へのスムーズにスクロールするボタンと、スクロールに合わせて表示を作る
jQueryを使って ある程度スクロールしたら、ページ先頭へ戻るボタンが出てきて クリックすると、スムーズにスクロールしてページの先頭まで移動するボタンを作ります
【簡単】コピペで設置 Feedlyの購読者数のカウントボタンを作る
Feedly の高読者数を取得して表示し FacebookやTwitterの様に、カウントを表示したボタンを作る方法
自動で途切れなくエンドレスにスライドし続けるCSSだけでつくるギャラリーのアイディア
jQueryプラグインのスライダーとかで、自動で動くエンドレスなスライダーを 実装することが多々有りますが こちらの方法は、javascriptを使わずにCSSのみで エンドレスに途切れずに流れるスライダーを実現しています また背景と、画像がパララックスに動いているのも良い
要素が画面内に現れた時にイベントを実行する jQuery.invew プラグインの使い方
パララックスのWEBサイト等で スクロールしていくと、次々にコンテンツが表示されたり アニメーションしたりするものがありますよね そういったものを簡単に実装することが出来るのが jQuery.inview […]
画面が分割されてコンテンツが表示されるWEBサイトのエントランスページのデザインのアイディア
ENTER ボタンをお押すことで内容が見れるようになる エントランスページのデザインのアイディア
CSSのぼかし(blur)のテクニック ～filterを使う方法とfiterを使わない方法～
最近気に入っているのが、CSSを使ったブラー・ぼかしを与える効果 いろいろな演出に利用出来ます 単純にCSSにあるfilterを使ってblurを掛ける方法と テキスト限定ですが、filterを使わずにblu […]
jQueryのscrollTopを使った変化する要素を作る
最近、スクロールすると ヘッダー部分のナビゲーションが変化するのをよく見かけますね ある程度スクロールするとついてくるタイプのものや スクロールするとサイズや形が変化するタイプのもの等々ありますね 大体は、 […]
フォーカスでシュワーっと消えていく、プレースホルダ
input要素の欄にフォーカス(入力できる状態)にすると input要素にあるプレースホルダが、ぼやけてシュワーーっと消えていくアニメーションが特徴的 jQueryを使って、フォーカスが当たると、 blurというクラスをつけて、文字をぼかしています
テキストをスロットのようにグルグルと回転させて表示するコード(プラグイン)
スロットのロールに文字を入れて それを回転させて、指定した文字が表示冴えれるようにしたものです 初期設定があるので、その部分を変更することで簡単に目的の文字や、他の表示される文字を決めることが出来ます
要素の角に斜めのリボンをテキストが常に中央に来るようにする方法(工夫)
HTMLで角にリボンをつけてやるときに、テキストが常に中央になるようにする工夫。一定の条件を守れば、常に45度のリボンに出来る
background-blend-mode: overlay; を使って、画像、グラデーションを重ねて表示させる方法
background blend mode を使って、背景をオーバーレイ処理する方法。まだ対応しているブラウザは限られていますが、今後が楽しみなプロパティ
