jQuery CollagePlus - an image gallery plugin by Ed Lea
An image gallery plugin for jQuery Download .zip Download .tar.gz View on GitHub This plugin for jQuery will arrange your images to fit exactly within a container. You can define the padding between images, give the images css borders and define a target row height. Example: Play with a live example on jsfiddle: http://jsfiddle.net/edlea/uZv3n/ or take a look at the demo Basic Usage // example HTM
CSS と jQuery で作るスクロールにあわせて回転するロゴ
Tumblr のスタッフ Blog を見てたら、ロゴ （正確にはロゴの周囲の部分） がスクロールにあわせて回転してて、ちょっと面白かったのでサンプルを使って実際にどういう風に実装されているかを解説してみようと思います。 結構仕組みは簡単で、jQuery の scrollTop() を使ってスクロール位置を取得し、その値を CSS の transform プロパティに都度突っ込んでいくっていう感じ。ソースコード自体は数行で実装できます。 まずは実際に動作するサンプルを下記に。 スクロールにあわせて CSS で回転するロゴのサンプル 画面をスクロールすると、ロゴが回転すると思います。わかりやすいようにロゴはスクロールに対して位置固定しています。ロゴの内容は個人的趣味によるものですので深い意味はありません... わかる人にはわかると思う。 なお、サンプルは transform プロパティを使用し
hetemlでpjax | soohei.net
hetemlでpjax 定例mtgをしていても、バスに乗っていても、話題はpjaxなので、 pjaxを勉強し直したまとめ。 クライアントサイド ・pjaxをするには、jQueryと、jQueryのpjaxライブラリを使う。 サーバーサイド ・環境はhetemlサーバー ・hetemlのサーバーはApacheなので、PHP (5.3.16)を使う。 ・PHP5.4未満なので、getallheaders関数が使えない。 最初に読み込むページ (open) <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>pjax test</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
Countdown Clock
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
diagonalFade : A jQuery plugin
is a jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements. All you have to do is import it, specify the container to which the group of items resides, and poof, you're off and away. diagonalFade is great for inventory or anything with a large amount of items ordered in a grid. diagonalFade has been tested in all modern bro
Klog » Blog Archive » jQueryとAjaxを使ってページ遷移無しでデータをロードする方法
最近のWebページにはある程度データを表示させた後、さらにデータを見たい場合に「もっと見る」のようなボタンがあり、それを押すとページ遷移なしで次のデータを取ってきてくれるようなシステムが実装されています。(Googleの画像検索などがその例) デモページを用意したので、こちらも参考にして下さい。 ・デモページ ※このブログのタイトルを最初10件表示し、moreボタンを押すたびに続きを5件ずつ表示します。 このようなシステムを実際に実装して見たので、その備忘録です。尚、ベースとなるコードは以下のサイトを参考にさせて頂きました。 ・http://www.9lessons.info/2009/12/twitter-style-load-more-results-with.html 必要となるファイルは次の6つです。参考記事ではスタイルシートとjavascriptを外部化していませんが、ここ
Demo | jquery.vgrid.js
Demo list - Variable grid layout. demo001 - Simple Example demo002 - Basic Option Example demo003 - Any Height Grid Example demo004 - FadeIn Option Example demo005 - Sort Example demo006 - Dynamic Grid, Start/Finish Event Example demo007 - Dynamic Image Grid, Start/Finish Event Example demo008 - Multi Box Grid Example demo009 - Grid Element Show/Hide Example demo010 - Drag And Drop Sort Example
champagne.js | fresh tilled soil
built by fresh tilled soil hello hola bon giorno ni hao guten tag namaste hello bonjour hola bon giorno ni hao chao guten tag namaste bonjour hola ni hao chao guten tag namaste hello bonjour hola bon giorno
HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO
そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
スクレイピングした画像をpinterest風に表示してみる | アライドアーキテクツ エンジニアブログ
こんにちは アライドアーキテクツの佐藤(ま)です。 最近入社して約一ヶ月がたちました。 まだ一ヶ月ではありますが、PHPと格闘しながらも「エビチカ」への引っ越しを決行し、歓迎会などして頂きながら、最近ではアライドの７周年記念パーティを迎える。などなど、わたくし的には非常に凝縮した一ヶ月間となりました。 さて、今回は覚えたてのPHPでなにか簡単なものを作ってみたいということで、「スクレイピング」と「画像をpinterest風に表示する」というのを組み合わせたページをつくってることにしました。 ◇まずはサンプルページから これは何かというと、基本的には画像をpinterest風に表示しているだけなのですが、表示している画像は下のダミーサイトの画像を切り出し（スクレイピング）して表示しています。仕組みとしては、URLにHTMLタグやID・クラス名を指定すると要素を取得することができるの
Panoramic Photoviewer in Javascript - Gaya Design
PRESS RELEASE You might of seen my work around the web. When My Direct Blinds contacted me back in late 2015 with an irresistible offer to help build out their digital assets and join the company with an ownership stake, it was an offer I could not refuse. Web design, interior design and window furnishings shared a common ground and something I could get behind. Thus, the decision was made to end
PHPでのスクレイピングやDOM操作をjQueryっぽく超簡単便利にできる「phpQuery」:phpspot開発日誌
phpmaster | Server-Side HTML Handling Using phpQuery PHPでのスクレイピングやDOM操作をjQueryっぽく超簡単便利にできる「phpQuery」。 紹介記事を読んで使ってみました。 phpQuery はjQueryのPHP版でDOMの操作をjQueryっぽくできるライブラリです。 HTMLのスクレイピングはもちろん、HTMLを追加したり要素に属性を追加等のDOMを操作も簡単に行えます。 jQueryの便利さがPHP上でも十分に使えますので知っておくと確実に面倒な処理を楽に書けるようになるでしょう。 スクレイピング HTMLのスクレイピングをする場合には超簡単かつ、jQueryを使ったことがある方なら抵抗なくすぐに習得できます。 ちょっとコードを書いて実験してみました。 と書くと <div id="two"></div>の中身である t
Typography Effects with CSS3 and jQuery
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared wi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
theissland.com
【かしこいFXで、毎日はもっと楽しくなる。】｜外為オンライン
Jessica Caldwell
3D Thumbnail Hover Effects
Swatch Book with CSS3 and jQuery
Loading...
