jQueryでサムネイル画像をセンタリング+トリミング。 - Qiita
はじめに。 個別にサムネイル画像を準備できれば問題ないのですが、システム案件や顧客側で更新作業をする場合など、 それが難しい場合にjQueryで画像をリサイズ、センタリングしサムネイルを表示する覚え書きです。 表示イメージ 縦長、横長、パノラマの画像を使っていますが、こんなかんじでトリミングしていきます。 （ 画像はこちらからお借りしました。http://www.ashinari.com/ ） サムネイル画像を配置 HTML <div class="trimming"><img src="image1.jpg"></div> <div class="trimming"><img src="image2.jpg"></div> <div class="trimming"><img src="image3.jpg"></div> <div class="cle"></div> div.trim
モバイル対応も万全のLightbox 『fancyBox3』の使い方とオプション
Lightboxなどに代表される、画像やビデオをページを推移せずにオーバーレイ表示させる機能は、昨今のwebサイトでは必須の技術と言っても良いでしょう。 現在、jQueryプラグインとしてさまざまなオーバーレイ プログラムが提供されていますが、中でも設定の簡単さとオプションの充実度、そしてスマートフォンにもレスポンシブも万全さという面でお勧めしたいのが今回解説する『fancyBox3』です。 その名の通り以前から公開されているfancyBoxシリーズの3世代目となる同プラグイン。その設置手順を動作デモ付きで解説していきます。 『fancyBox3』の主な機能と特徴 まずはfancyBox3の主な機能と特徴をピックアップしてみましょう。 モバイルファースト設置、設定が簡単分かりやすくて便利なUIYouTubeやVimeoやGoogleマップ、Instagramなどの対応画像はもちろん、inl
たった1行！jQueryで指定箇所までアニメーションつきで自動スクロールさせる方法 - Qiita
jQueryで指定したセレクタの箇所まで自動でスクロールする方法を紹介します。 次のように1行で書くことができます。
【jQuery】特定の位置まで来たらイベントを実行 - blog del Teorico
ホーム>【jQuery】特定の位置まで来たらイベントを実行 【jQuery】特定の位置まで来たらイベントを実行 【jQuery】特定の位置まで来たらイベントを実行 2017-08-02 jQueryを利用して特定の位置に来たらイベントを発火させる ある特定の要素の位置まで来たら何かしらのイベントを起こしたい時があると思います。 案件によってはあるのでメモがてら。 var thisOffset; $(window).on('load', function () { thisOffset = $('セレクタ').offset().top + $('セレクタ').outerHeight(); }); $(window).scroll(function () { if ($(window).scrollTop() + $(window).height() > thisOffset) { // 特定
jQueryでmarginも含めた幅や高さを取得 | このコードわからん
しょぼい話し。 たとえば #id{ height: 10px; width: 10px; margin: 5px; padding: 5px; } とした時に、jQueryで普通に $('#id').height(); を実行してもheightで帰ってくる値は 10。 しかしながら、 $('#id').outerHeight(); ってやると、paddingを含んだ高さが返ってきます。 今回の場合は20。 marginを含めるには、trueを渡す必要がある。 $('#id').outerHeight(true); ってやると30だ。
コピペで実装OK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ
ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる HTML/CSS スニペットをまとめてご紹介します。ただいま流行中のWebトレンドの実装を可能にする最新レイアウトから、どんなプロジェクトにも活用したくなるエフェクトやテクニックなどを中心にまとめています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 コピペでOK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ 01. Fixed Images That Fades as You Scroll 画面を２分割し、スク
jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redirecting