WebDesign Dackel

jQueryで画像がPC画面をスライドしていくようなエフェクトを実装する

jQueryで画像がPC画面をスライドしていくようなエフェクトを実装する

Hatena0
Google+0
Pocket0
Feedly0

はじめに

今回は、画像がPC画面の中をスライドしていくようなエフェクトをjQueryを使って実装してみたいと思います。
たまにポートフォリオサイトなんかで見かけるやつです。

数行の簡単なコードで実装できるので、基本的な動作の仕組みを理解してカスタマイズしてみても面白いかもです!

動作サンプル

動作サンプル

動作サンプルはこちら

iMacの画面の中に、このブログのトップページを画像にしたものがあります。それをクリックすることで画面の中をスルスル〜とアニメーションしていきます。

(こちらのサンプルはPCから閲覧することをおすすめします…)

動作の仕組みについて

実際にコードを書いていく前に仕組みを把握していきたいと思います。

1. PCの画面を用意

まずはベースとなる「PC画面」が必要になります。
今回はフリー素材の中から、iMacを素材として使用しました。

iMacの枠

2. 対象の画像をマスクする

マスクした際のイメージ
上記の画像でいうところの、ピンクの枠線部分にマスク用の<div>を配置します。その中にスライドしていく対象の画像を配置します。
マスク用の<div>に対して、overflow:hidden;を指定し、はみ出した部分を非表示にすることで、Photoshopのマスク機能みたいなことを実現します。

3. topの値をいじってスルスルとアニメーション

topをずらしてスクロールさせる
topが効くように対象の画像に対して、position:relative;を設定しておきます。
そしたら、jQuery.animate()を使ってtopをマイナス側に動かせば、スクロール(スライド)しているように見えますね。

まずはシンプルに実装する

なんとなく仕組みが把握できたところで、実際にコードへ落としこんでいきます。

HTML&CSS

まずはHTMLです。
見ればなんとなくわかると思いますが、screen_image.jpgが対象の画像、images/screen_frame.jpgがiMacの画像になっています。

<div class="scroll-screen">
  <div class="scroll-screen__mask">
    <img class="scroll-screen__media" src="images/screen_image.jpg" alt="スクロールしたい画像">
  </div>
  <img class="scroll-screen__frame" src="images/screen_frame.jpg">
</div>

次にCSSです。.scroll-screen__maskのサイズと位置は、使うPC画面によって調整が必要ですね。
いい感じに画面サイズに合うように調整します。(奇跡的に気持ち良い数値になりました)

.scroll-screen {
  position:relative;
}

.scroll-screen__mask {
  position:absolute;
  top:25px;
  left:25px;
  width:650px;
  height:360px;
  overflow:hidden;
}

.scroll-screen__media {
  position:relative;
}

JavaScript(jQuery)

実際に動きを付けていきます。

$(function(){

  // 操作する要素
  var $scrollScreen = $(".scroll-screen"),
      $mask = $(".scroll-screen__mask", $scrollScreen),
      $media = $(".scroll-screen__media", $scrollScreen);

  // 移動する座標を取得
  // topの移動先 = ( 画像の高さ - PC画面の高さ ) * -1
  var maskHeight = $mask.height(),
      mediaHeight = $media.height(),
      toTop = ( mediaHeight - maskHeight) * -1;

  // アニメーション
  $media.on("click", function(){
    $media
      .css("top", 0)
      .stop(true, false)
      .animate({
        top: toTop
      }, 2000, "swing");
  });

});

画像をクリックしたら、スクロールのアニメーションが始まるようなものにしてみました!

今回は極力シンプルなコードにするために固定値を入れていますが、画像の高さによってアニメーションの時間は調整が必要です。

ここまでで最初の動作サンプルと同じ動きになりました!

レスポンシブに対応してみる

上記の方法では、マスク用の<div>に対してwidth:600px;などの様に固定値を入れていました。
これだとレスポンシブなサイトではかなり使いづらいと思います。

そこで、

  • マスクのサイズ
  • 画像のtop

の2点を%指定することでレスポンシブへ対応してみます。

動作サンプル

レスポンシブに対応した動作サンプル

動作サンプルはこちら

ブラウザのウィンドウを縮めたりしても、位置がずれたりせずに動いているのが分かるかと思います。

HTML&CSS

HTMLもCSSも、先ほどと大きくは変わらないので、%を使った相対的な指定に対応するためにちょっとずつ違うので注意が必要です。

<div class="scroll-screen">
  <div class="scroll-screen__mask">
    <div class="scroll-screen__mask__inner">
      <img class="scroll-screen__media" src="images/screen_image.jpg" alt="スクロールしたい画像">
    </div>
  </div>
  <img class="scroll-screen__frame" src="images/screen_frame.jpg">
</div>

HTMLはdiv.scroll-screen__mask__innerという要素が追加されているのがポイントです。

.scroll-screen {
  position:relative;
}

.scroll-screen__mask {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:0;
  padding:58.35% 0 0 0;
}

.scroll-screen__mask__inner {
  position:absolute;
  top:5%;
  left:3.6%;
  width:92.8%;
  height:90%;
  margin:0 auto;
  overflow:hidden;
  box-sizing:border-box;
}

.scroll-screen__media {
  position:relative;
  cursor:pointer;
}

CSSの細かい説明は省いちゃいますが、.scroll-screen__mask.scroll-screen__mask__innerの2つが大きく変わりました。(適当ですみません…)

JavaScript(jQuery)

$(function(){

  // 操作する要素
  var $scrollScreen = $(".scroll-screen"),
      $maskInner = $(".scroll-screen__mask__inner", $scrollScreen),
      $media = $(".scroll-screen__media", $scrollScreen);

  // %指定で動かすことでレスポンシブに対応
  var maskHeight = $maskInner.height(),
      mediaHeight = $media.height(),
      toTopPercent = ( mediaHeight - maskHeight ) / maskHeight * -100;

  // アニメーション
  $media.on("click", function(){
    $media
      .css("top", 0)
      .stop(true, false)
      .animate({
        top: toTopPercent + "%"
      }, toTopPercent * -4, "swing");
  });
});

こちらも、topの値を%で求めるように変更しただけでほとんど前と一緒ですね!

おわりに

jQueryで…って言っておきながら、一番大事なのはCSSっぽいなと途中で思いました。。
まぁでも、それほど難しくないコードで実装できるのでぜひ色々と試してみてもらえたらと思います!


余談ですが、縦長のサイトを集めたリンク集MUUUUU.ORGさんで、こんな感じのエフェクトが使われていたと思います。(今は変わっちゃってますが…)