レスポンシブ用に画像の表示幅・高さを変更する際に、その画像の主題にフォーカスエリアを設定し、そのエリアを中心に画像を表示できるスクリプトを紹介します。 フォーカスエリアは、それぞれの画像ごとに異なる指定が可能です。
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強(僕の中で)JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
お疲れ様です、ももこです。 おしゃれなWebサイトでコンテンツの表示に、モーダルウィンドウを使うと格好よく映えたりしますよね。 今回はクールなモーダルウィンドウを簡単に設置出来るJavaScript「SIMPLE MODAL」※すでに提供を終了していますをご紹介したいと思います。 「SIMPLE MODAL」 デモ 用意されているデモは全部で8種類あります。 その中でも特に使用頻度が高そうな5つのデモをご覧ください。 ALERT シンプルなアラート風ウィンドウ 商品紹介などに使えそうな基本的なウィンドウ MODAL AJAX AJAXを使用し、コンテンツにアコーディオンを含めているウィンドウ MODAL IMAGE LightBox風に画像を表示するウィンドウ VIDEO EMBED 動画を埋め込んで再生するウィンドウ 記述 ウィンドウ内のテキストや画像は全てスクリプトの中に含めます。 「
フォームのセレクトボックスは多くの選択肢を配置できる便利な要素ですが、他のフォームと操作性が異なるため一連の流れで入力しにくいのが弱点です。 セレクトボックスの操作性を改善し、デザインも簡単に変更できるスクリプトを紹介します。Quickの名前の通り、すぐに選択できるようになります。 通常のセレクトボックスの挙動 セレクトボックスは、タップとクリックの2つのオペレーションがあります。これはフォームの他の要素と操作性が異なり、ユーザーをフォームの一連の流れから外してしまうものです。 そこで注目すべき点は、通常セレクトボックスの選択肢の中にはより多く選択されるものがあることです。上記の例だと、「はい」「いいえ」が多いでしょう。 Quick[select]は、セレクトボックスの選択肢の中から、いくつかを表示させておくことができます。
タイトルで全部言っちゃってる気がしないではないですが、WebサイトにGoogleMAPを設置して、色々と簡単にAPIを叩けるプラグインです。 ちなみにこの記事の為にこのjQueryプラグインを読み込むなんてことはしておりませんので、説明で使用しているMAPは全てキャプチャー画像です。本来なら、ぐりぐりと拡大縮小出来るあのMAPを貼り付ける事が出来ます。気になる方は、最後に紹介するチュートリアルページをご覧になっていただければ、わかると思います。 まずは呼び出し 基本の呼び出し。 まずはページのどっかに書いて読み込みましょう。 <script src="javascripts/jquery.js"></script> <script type="text/javascript" src="//www.google.fr/jsapi"></script> <script type="text/
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる|Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法|Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー|Webpark とい
jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。 Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。 jQuery Tips Everyone Should Know -GitHub イラスト: Girls Design Materials コードはMITライセンスで、個人でも商用でも無料で利用できます。 ページの上に戻るボタン 画像のプリロード 画像がロードされているかチェック リンク切れの画像を自動修復 ホバーのトグル 入力欄を使用できなくする aタグのクリックイベントだけを利用する アニメーションを簡単に設定する シンプルなアコーディオン 異なる高さのdiv要素を揃える 外部リンクを新しいタブ・ウインドウで開く テキストが無い要素は非表示にする ページの上に戻るボタン
Flat Color 使い方は、簡単です。 Step 1: 外部ファイル 外部ファイルにjquery.jsを使用している場合は、下記の外部スクリプトを加えます。 <script type="text/javascript" src="//cdn.rawgit.com/icons8/bower-webicon/v0.10.7/jquery-webicon.min.js"></script> AngularJSバージョンも用意されています。 <script type="text/javascript" src="//cdn.rawgit.com/icons8/bower-webicon/v0.10.7/angular-webicon.min.js"></script> Step 2: HTML あとは、使用するアイコンのコードを書くだけです。 アイコンをクリックするとコードが表示されるので、そ
lightGallery A lightweight, modular, JavaScript image and video lightbox gallery plugin. Available for React.js, Vue.js, Angular, and TypeScript. View on GitHub
クリックで画像が拡大されるライブラリはlightboxなど数多くありますが、その中でもデザインの邪魔をせず、実装もかんたんなライブラリ、それがlity.jsです。 使い方公式サイトから一式ダウンロード。 ダウンロードしたファイルの中で使うのはdistフォルダ内のlity.js、lity.cssのみ。 jQueryの後に読み込ませます。 <link href="lity.css" rel="stylesheet"> <script src="jquery.js"></script> <script src="lity.js"></script> あとは、 <a href="http://image.jpg" data-lity>Image</a> のようにdata-lity属性をつけるだけで動きます。かんたんですね。下がlity.jsの表示サンプルです。 WordPressへの組み込みWor
実用的なテクニックから、こんなこともできるんだ!とワクワクするすごいアイデアまで、Web制作者はチェックしておきたいUIを実装するテクニックをCodePenから紹介します。 JavaScriptは最小限にして、アニメーションなどCSSでできることは全てCSSで、というのが実装の傾向ですね。
大きな画像を多用していたり、パララックスサイトなどで1ページあたりの容量が大きくなった場合、通信回線にもよりますが全ての画像とソースコードの読み込みが完了するまで結構な時間がかかったりします。 読み込み中の間は画像が順次表示されていって美しくなかったり、不具合が起きたり、訪問者がイライラして離脱に繋がったり…いろいろ不都合があります。 これを解消するために、ページを読み込み中の間はローディング画面を表示し、読み込み完了後にコンテンツを表示する方法をとります。 イメージとしては、読み込み中は上記の画像のようにコンテンツの上に目隠し用のレイヤーを表示し、全ての読み込みが完了したタイミングで目隠しを非表示にするイメージです。 ソースコードは左から右へ、上から下へと読まれていくので、ソースコードを書く位置にも注意しましょう。 ソースコードと画像が「全て読み込まれた」というイベントは、javascr
A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more Lightweight The modular structure provides excellent compression. Oh yes, it weights only ~23kb (~7kb gzipped) with every functionality included. Dependency-free Everything on board, ready for action. Written in vanilla JavaScript without hidden dependencies.
他ではあまり見かけることのないユニークな見せ方や動きを実装したいとき、遊び心あるイースターエッグを仕込んでおきたいときなどに個人的に使えそうだなと思ったスクリプトをまとめてみました。 ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。 窓に水滴がついていく様子を表現できる「rainyday.js」 とにかく実際に動いているデモを見てほしいのですが、雨が降って窓に水滴が徐々についていく様子をリアルに表現することができるスクリプトです。 水滴のサイズやついていくスピード、ぼかしや不透明度具合を調整することができます。 水面に滴が落ちているような感じを表現できる「Raindrops.js」 コンテンツやセクションの区切りなどを水面に見立て、そこに滴が落ちてきたようなエフェクトを実装できるjQueryプ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く