デザインTweetこんにちは、生形です。最近、嬉しいことにアシアルの書籍の売れ行きが軒並み好調です。6月に入り、弊社岡本が執筆した「イラストでよくわかるPHP」が、Kindleの月替わりセール対象商品になりました。なんと699円(紙の本の価格の64%OFF!)で購入いただけます。現在、アマゾンWebプログラミングカテゴリの売れ筋ランキング1位です!セールは今月いっぱいですので、ぜひこの機会に。個人的な目標の1万部まであと少しというところまで来ました!セミナー等でお会いした方には本を買いましたよと声をかけて頂くこともあり、大変ありがたく思っております。購入者特典としてjQueryのTips集を翔泳社のスラスラわかるシリーズ公式サイトで配布していますので、ご存じなかった方はぜひダウンロードしてみて下さい!さて、今日はこのTips集から、「スクロールで画像がめくれる動きを表現する」を紹介します。完成イメージは、こちらのページを見て下さい。画像が2枚重ねて配置されていて、ページをスクロールすると前面の画像がめくれて背面の画像が見えるようになります。コードの量はほんの少しだけで、とても簡単です。それでは見てみましょう。});});index.htmlには、画像を囲む<div>要素が2つあります。これがそれぞれ、前面と背面に表示している画像です。初期状態では、<div>要素と画像の高さはどちらも600pxに指定しています。ページをスクロールすると、スクロールした分だけ前面の<div>要素の高さを低くしています。仮に200px分スクロールした場合は、<div>要素の高さは400pxになります。このように、スクロールと連動して上に重なっている要素の高さを変化させることで、あたかも画像が捲れ上がっていくように見せることができます。日めくりカレンダーのように次から次へと画像がめくれていくようにしたりと、色々な表現が楽しめると思います。byスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。