[JS]画像を拡大表示するLightboxの進化形、デバイスごとに異なる設定も可能な高性能な軽量スクリプト -Chocolat
デスクトップ、タブレット、スマホのそれぞれに合わせた方法で、指定したエリアやウインドウいっぱいに画像を拡大表示したり、そのまま複数の画像を表示するスライダーにすることもできる、軽量で高性能な画像を拡大表示するスクリプトを紹介します。 スクリプトだけでなく、ページ全体やデモなども非常に面白いデザインです。 Chocolatの特徴 個人ユーザーからプロのWeb制作者まで 専門的な知識がなくても簡単に実装でき、APIを使うと更に高性能な機能を提供します。 クロスブラウザ対応 全ての主要ブラウザで動作します。 テストブラウザ: IE7+, Firefox, Chrome, Opera, Safari 軽量 スクリプトはたった23KB、ミニファイ版は10KBです。 レスポンシブ対応 デスクトップ、タブレット、スマホをサポート。 デバイスごとに異なる画像を表示したり、自身のブレイクポイントを定義するこ
![[JS]画像を拡大表示するLightboxの進化形、デバイスごとに異なる設定も可能な高性能な軽量スクリプト -Chocolat](https://cdn-ak-scissors.b.st-hatena.com/image/square/38b45d852b9f815258fa2b8ef8ae530164b9fcfa/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072901-01.png)
ブラウザー上でサクッとコードの動作テストができるWebサイトいろいろ
2017年2月17日 便利ツール 作業中に、ふと動作確認がしたい…でも新規ファイルを作るのすらめんどくさい…なんてこと、ありませんか？（え？ない？w）そんな時はファイル不要！環境設定不要なオンラインテストサイトを使っちゃいましょう！動作確認用オンラインツールはいくつかありますが、実際に使っているもの、ブックマーク登録しているものをいくつか紹介します！ユーザー登録してコードを保存できるサイトもあるので、備忘録として使ってみてもよさそうです！ ↑私が10年以上利用している会計ソフト！ CodePen Webクリエイターボックスでも何度となく紹介してきたCodePen。フロントエンドの動作確認に最適です。Emmetの利用もOK！ライブプレビューができるので、いちいち保存したり実行ボタンをクリックして動作確認する必要はありません。作成したコードをブログへ埋め込んだり、シェアするのも簡単！ HTML
YoutubeやVimeoの動画を背景に指定できるjQueryプラグイン・OKFocus video
YoutubeやVimeoの動画を手軽に背景指定できる、というスクリプトのご紹介。jQueryに依存しています。既に同等のものが存在しますが、使いやすそうだったので備忘録。 動画を手軽に背景指定出来る、というもの。 動作サンプルです。 背景なので重ねたレイヤーの背景を透過すればマスクっぽく出来ますね。 <script src='jquery.js'></script> <script src='okvideo.js'></script>本体とスクリプトを読み込みます。 $(function(){ $.okvideo({ source: 'http://vimeo.com/*****', volume: 0 }) });VimeoまたはYoutubeの動画のURLを貼るだけ。これで背景に動画が流れます。ミュートはvolumeを0に指定します。 他にもオプションいろいろ。詳細は以下でご確認下さ
【流れるテロップのような表現ができるjQueryプラグイン「liScroll 」と「JQUERY NEWS TICKER」】｜今村だけがよくわかるブログ
【流れるテロップのような表現ができるjQueryプラグイン「liScroll 」と「JQUERY NEWS TICKER」】 テレビの下とかに流れる、テロップのような表現をwebサイトにも設置することができます。 「liScroll 」サンプルはこちらタブの「Result」で動作を確認ください 配布元はこちらhttp://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html もう１つ知ってるプラグインがありますんで、ご紹介します。 「JQUERY NEWS TICKER」サンプルはこちらタブの「Result」で動作を確認ください 配布元はこちらhttp://www.jquerynewsticker.com/ どちらもかっこいいですよね～。 シーンによって使い分け
[JS]リアルさが想像以上！ブラウザのウインドウを窓に喩えて、雨を楽しむ癒やし系スクリプト -rainyday.js
ひと昔前に、小さいドットを上からアニメーションで落として雪とか桜とかありましたが、これはそれらとは異なり、かなりリアルに雨を堪能できるスクリプトを紹介します。 ぼっーと見てると、音まで聞こえてきそうです。 Demo 2 雨はCanvasを使って再現しており、実装は下記のようになります。 <head> ... <script src="rainyday.js" type="text/javascript"></script> <script type="text/javascript"> function demo() { var engine = new RainyDay('canvas','demo1', window.innerWidth, window.innerHeight); engine.gravity = engine.GRAVITY_NON_LINEAR; engine.t
FacebookページのフィードURLを取得しウォールを自サイトに表示
表示のカスタマイズまた緑部分を、「item.title」にすれば省略した形で表示。「item.link」にすれば記事へのリンクが貼れる。 そしてこれらを合わせのカスタマイズも可。 $('#facebook ul').append('<li><a href="' + item.link + '">' + item.title + '</a><span class="posted">[' + formatData(item.publishedDate) + ']</span></li>'); とすると、 「item.title」は投稿時に書き込んだ部分のみが表示され添付画像は表示されない。それにFacebookへのリンク「item.link」が貼られる。3行目が日付だけなのは、書き込みをせずに画像だけ貼ったフィード。 以上、こんな感じで自サイトに自Facebookのウォールを貼り込むことができ
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
ポップアップ
HTML Include Script Files <script type='text/javascript' src='jquery.popeasy.js'></script> <script type='text/javascript' src='site.js'></script> Place in body <a class="popeasy" href="#">Click Me <div class="overlay"></div> <div class="modal"> <a href="#" class="closeBtn">Close Me</a> <!-- content here --> </div> CSS .overlay{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index:
jQuery：よく使用される機能をまとめて実装できるプラグイン - NxWorld
スムーススクロール・タブ切り替え・ロールオーバー・アコーディオンなどといった、サイト制作時によく使われる機能をまとめて実装することができるjQueryプラグインのまとめです。 予め使用する機能がはっきりわかっていれば、こういった便利なものを使用することでファイルの散乱も防げますし、管理もしやすくなりますね。 紹介するプラグインの中には必要な機能だけを選択してダウンロードできたりもします。 yuga.js web制作を優雅にするために作られたjQueryプラグインで、7種類の機能が実装されています。 ライセンスはMIT Licenseで、ライセンスに従う限り許可なく自由に使用できるそうです。 機能 ロールオーバー 現在のページをハイライト表示 外部リンクを別ウインドウで開く 画像をthickboxで表示（thickbox.jsを使用） スムーススクロール タブ機能 CSS3の擬似クラスをクラ
レスポンシブ、CSS3を使ったクールなギャラリー·least.js MOONGIFT
least.jsはJavaScript製のソフトウェア（）です。 スマートフォンの時代になって写真コンテンツが増えています。そして求められるのは写真コンテンツをいかに格好よく見せるかです。今回はレスポンシブWebデザインのギャラリー、least.jsを紹介します。 デスクトップサイズ。写真が5列で整然と並んでいます。 マウスオーバーで半透明なフィルタがかかります。 クリックで拡大。キャプションも下に表示されます。 タブレットくらいのサイズ。写真の列が3列に変わりました。 写真の拡大は変わらず。 さらにスマートフォンサイズ。写真は縦1列になります。 この場合は拡大してもさほど変わらないですね。 least.jsのアニメーションは格好が良く、一旦前の写真が引っ込んだ後に次の写真が読み込まれるようになっています。大きな写真を奇麗に見せたい時に使ってみたいライブラリです。 MOONGIFTはこう見
[JS]エレメントをグリッド状にランダムに配置したり、Pinterest風に配置するスクリプト - BlocksIt.js
BlocksIt.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトをhead内に記述します。 ※jQueryは1.7.1で開発。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> <script type="text/javascript" src="blocksit.js"></script> Step 2: HTML HTMLは対象となる範囲をラッパーで包み、各パネルを同列に配置します。 パネルはデフォルトでdiv要素を対象にしていますが、任意の要素で実装できます。 <div id="container"> <div>パネル</div> <div>パネル</div> <div>パネル</div
WEBタイポグラフィ関係のjQueryプラグイン集「jQuery plugins for awesome web typography」
TOP > WebDesign > WEBタイポグラフィ関係のjQueryプラグイン集「jQuery plugins for awesome web typography」 日本では互換性を重視する傾向がつよくまだあまり、特殊なフォントをjavascriptなどで作り出すような手法はスタンダードではありませんが、中には、挑戦的なサイトもあり、フォントをjsやCSSで見せるそんなサイトもあります。今日紹介するのはWEBタイポグラフィ関係のjQueryプラグイン集「jQuery plugins for awesome web typography」です。 FitText – A plugin for inflating web type フォントを加工するもの、テキストの組を特殊にしてくれるものなど、様々なフォント関連のjQueryプラグインが紹介されていますが、今回はその中から気にな
jQuery News Ticker
jQuery News Ticker now has support for multiple tickers per page! jQuery News Ticker now has support for right-to-left languages! jQuery News Ticker now has support for loading content via an RSS feed! jQuery News Ticker now has an optional fade effect between items! New updates have been made to jQuery News Ticker! Check below for more details! jQuery News Ticker is now compatible with jQuery 1.3
8500+ Best jQuery Plugins & Tutorials with jQuery Demo examples 2019 - 2018
Atropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects. Available for JavaScript, React and Vue.js
SVGを簡単に扱えるJSライブラリRaphael.js使ってみた
SVGを簡単に扱えるJSライブラリRaphael.js使ってみた jpgやpngはビットマップなため拡大すると画像が荒れてしまいますが、SVGはベクターデータなため拡大しても荒れることはなく単純な図形のような画像なら容量も抑えられるといった特徴があり注目されています。 この記事ではJavaScriptからSVGを描画できるRaphael.jsというライブラリをご紹介します。 投稿日2012年07月06日 更新日2012年07月06日 ライブラリのダウンロード 下記公式サイトからダウンロードしてください。 Raphael_JavaScript Library 解凍したフォルダの中にある「raphael-min.js」を読み込みます。 簡単な図形を描いてみる 最初に簡単な丸を描いてみます。 SVGを描画するための「div」を用意します。 html <div id="svg"></div> cs
css-lecture.com - css lecture リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
[JS]直感的な操作性がたのしい、画像ギャラリーのスクリプト -Fotorama
デスクトップだけでなく、iPhoneをはじめとするスマートフォンなど、さまざまなデバイスに対応した画像ギャラリーを実装するjQueryのプラグインを紹介します。 Fotorama [ad#ad-2] Fotoramaの主な特徴 Fotoramaのデモ Fotoramaの実装 Fotoramaの主な特徴 Fotoramaはセットアップも簡単で、直感的な操作性が楽しい画像ギャラリーのスクリプトです。 メインの画像をスライドするにはいくつかの方法が用意されています。 矢印ボタンでメイン画像をスライド ドラッグ操作でメイン画像をスライド ナビゲーションでメイン画像をスライド サムネイルでメイン画像をスライド サムネイルもドラッグでスライドすることができます。 サムネイルもドラッグでスライド サムネイルのボーダーはアニメーションで動作し、読み込み時のエフェクトも用意されています。 Fotoramaの
[JS]高性能で設置も簡単、ブラウザ枠いっぱいに背景画像を配置するスクリプト -bgStretcher
デモページ：Super Slider スライドのスーパー版で、斜め方向のスライドで画像を切り替えます。 bgStretcherの主な特徴 セットアップはシンプル 全てのモダンブラウザをサポート 画像は一枚だけでなく、複数枚にも対応 対応ブラウザ Internet Explorer 6, 7, 8, 9 Firefox 2, 3, 4 Opera 9+ Safari Chrome bgStretcherの使い方 Step 1: ファイルのダウンロード サイトの「Download」よりファイル一式をダウンロードします。 一式には必要なファイル全て（jqeury.jsも）が含まれています。 Step 2: 外部ファイル 外部ファイルを下記のように<head>～</head>に記述します。 <script type="text/javascript" src="../jquery-1.5.2.mi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
ボックス要素を綺麗に整列出来るjQueryプラグイン・jQuery MasonryにInfinite Scroll（無限スクロール）機能を加えたサンプル - かちびと.net
