topの値をいじってスルスルとアニメーションまずはシンプルに実装するHTML&CSSJavaScript(jQuery)レスポンシブに対応してみる動作サンプルHTML&CSSJavaScript(jQuery)おわりにはじめに今回は、画像がPC画面の中をスライドしていくようなエフェクトをjQueryを使って実装してみたいと思います。ポートフォリオサイトなんかで見かけるやつです。数行の簡単なコードで実装できるので、基本的な動作の仕組みを理解してカスタマイズしてみても面白いかもです!動作サンプル動作サンプルはこちらiMacの画面の中に、このブログのトップページを画像にしたものがあります。それをクリックすることで画面の中をスルスル〜とアニメーションしていきます。(こちらのサンプルはPCから閲覧することをおすすめします...)動作の仕組みについて実際にコードを書いていく前に仕組みを把握していきたいと思います。PCの画面を用意まずはベースとなる「PC画面」が必要になります。今回はフリー素材の中から、iMacを素材として使用しました。対象の画像をマスクする上記の画像でいうところの、ピンクの枠線部分にマスク用の<div>を配置します。その中にスライドしていく対象の画像を配置します。マスク用の<div>に対して、overflow:hidden;を指定し、はみ出した部分を非表示にすることで、Photoshopのマスク機能みたいなことを実現します。topの値をいじってスルスルとアニメーションtopが効くように対象の画像に対して、position:relative;を設定しておきます。したら、jQueryの.animate()を使ってtopをマイナス側に動かせば、スクロール(スライド)しているように見えますね。シンプルに実装するなんとなく仕組みが把握できたところで、実際にコードへ落としこんでいきます。HTML&CSSまずはHTMLです。見ればなんとなくわかると思いますが、screen_image.jpgが対象の画像、images/screen_frame.jpgがiMacの画像になっています。src="images/screen_frame.jpg"></div>次にCSSです。.scroll-screen__maskのサイズと位置は、使うPC画面によって調整が必要ですね。いい感じに画面サイズに合うように調整します。position:relative;}JavaScript(jQuery)実際に動きを付けていきます。});});画像をクリックしたら、スクロールのアニメーションが始まるようなものにしてみました!今回は極力シンプルなコードにするために固定値を入れていますが、画像の高さによってアニメーションの時間は調整が必要です。ここまでで最初の動作サンプルと同じ動きになりました!レスポンシブに対応してみる上記の方法では、マスク用の<div>に対してwidth:600px;などの様に固定値を入れていました。これだとレスポンシブなサイトではかなり使いづらいと思います。そこで、マスクのサイズ画像のtop値の2点を%指定することでレスポンシブへ対応してみます。動作サンプル動作サンプルはこちらブラウザのウィンドウを縮めたりしても、位置がずれたりせずに動いているのが分かるかと思います。HTML&CSSHTMLもCSSも、先ほどと大きくは変わらないので、%を使った相対的な指定に対応するためにちょっとずつ違うので注意が必要です。src="images/screen_frame.jpg"></div>HTMLはdiv.scroll-screen__mask__innerという要素が追加されているのがポイントです。cursor:pointer;}CSSの細かい説明は省いちゃいますが、.scroll-screen__mask、.scroll-screen__mask__innerの2つが大きく変わりました。});});こちらも、topの値を%で求めるように変更しただけでほとんど前と一緒ですね!おわりにjQueryで...って言っておきながら、一番大事なのはCSSっぽいなと途中で思いました。それほど難しくないコードで実装できるのでぜひ色々と試してみてもらえたらと思います!余談ですが、縦長のサイトを集めたリンク集MUUUUU.ORGさんで、こんな感じのエフェクトが使われていたと思います。この記事のコメントメールアドレスが公開されることはありません。お気軽にコメントどうぞ。コメントをキャンセル渋谷でWebサイトを作っています。ちなみに、「ダッケル」はドイツ語でダックスフンドの事だそうです。