【フリップカードアニメーション】カードを変化・移動させてコンテンツ内を楽しく見せよう || BenBlog

こんにちは。
今回は、過去に取り上げた「フリップ・カード・アニメーション」の第二弾として、jQueryでCSS trasform プロパティに変化をつけて簡単なカード・アニメーションを紹介します。
カード内のコンテンツ・スペースに手を加えて、楽しくしたり、オシャレにしたりと、好みにデザインしてみたらどうでしょう。😜 (CSS,jQuery)

上下左右にカードを移動させる

カードをhoverさせると、上下左右にコンテンツ内容がスライドして表れる動きをさせてみました。
CSSだけで作ろうと思いましたが、jQueryでCSSを制御したほうが個人的に修正や見た目も理解しやすいので、今回のアニメーションはそのようにしています。



<div class="area1">
    <img src="image0068/women_brunette.jpg"><!--women_brunette.jpg-->

    <div class="text1">
      <p>SECTION C</p>
      <hr width="80%">
      <p> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
      </p>
    </div>

    <div class="text1a">
      <p>SECTION B</p>
      <hr width="80%">
      <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.<br><br>

      <a href="https://www.benblogeveryday.com" class="area_element2" target="_blank">https://www.benblogeveryday.com</a>
      </p>
    </div>

    <div class="text1b">
      <p>SECTION A</p>
      <hr width="80%">
      <p><span class="line area_element1">Lorem Ipsum</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
    </div>

    <div class="text1c">
      <p>Card animation effect</p>
    </div>

<!-- ******************* pop-up ******************-->
    <div id="popup">
     <p class="upblock" id="popup_com1">
            It is a typical dummy text that is especially used in fields such as publishing and web design (especially font design).<br>
            The content is a list of sentences (Greeking) that have no meaning at all derived from Latin, and as a sample sentence (template) for design so that the consciousness does not concentrate on the content of the sentence rather than the design.<br>
      <p>

     <p class="upblock" id="popup_com2">
            benblog<br>
            Life using a blog, programming information site. ?
      <p>
  </div>



</div>

メインの要素「.area1」を起点にposition: relative;にして、上下左右に移動させる４枚のカード「.text1、.text1a、.text2c，.text3c」は、position: absolute;とし、translateで.area1の要素100%の位置から飛び出すように移動させています。
逆にtopやleftの値を変更させて。起点の位置から移動させると、可視化されたエリアがresponsiveになった場合、windowの広さによって.area1と.text1のカード間に隙間などの不具合が生じてしまうので、translateを使用することにしました。

下記のCSSコードは、.area1(relative)の位置から .text1(absolute)の要素を-100%（左側)にjQueryで移動させますので、hoverされた時の処理は記述していません。
新たに１つ（カード）要素を増やして、それ以上に移動させたい場合は、値は200%にします。実例は、次に紹介するエフェクトをご覧ください。



.area1{
  margin:200px auto;
  position: relative;
  width:300px;
  height:300px;
  background:#000; 
  border-radius:20px;
}
.area1 .text1{
  position: absolute;
  width:300px;
  height:300px;
  top:0;
  left:0;
  background:rgba(0,0,0,0.6);
  border-radius:20px;
  z-index:3;
}

jQueryでは、実際に上下左右にカードを移動させるための記述を行っています。
記述上、hoverで発火されたCSSは「変化するまでの時間、移動距離」と同じ要素クラスのCSSを複数行に書く事になるので、

$(“.area1 .text1”).css( ‘transition’,’all 300ms 0.75s ease’);
$(“.area1 .text1”).css ‘transform’,’translateX(-100%)’);

を以下に記述し直してあげれば、クラスを見間違えなくコードの修正もしやすいですね。

$(“.area1 .text1”).css({
‘transition’:’all 300ms 0.75s ease’,
‘transform’:’translateX(-100%)’
});



    $(function(){    // 　カードhover処理
            $(".area1").hover(
              function(){

                         $(".area1").css('cursor','pointer');
                         /*-----------------------------------------------------------*/
                         $(".area1 .text1").css({
                                                  'transition':'all 300ms 0.75s ease',
                                                  'transform':'translateX(-100%)'
                                                });
                         /*-----------------------------------------------------------*/
                         $(".area1 .text1a").css({
                                                  'transition':'all 300ms 0.5s ease',
                                                  'transform':'translateY(-100%)'
                                                });
                         /*-----------------------------------------------------------*/
                         $(".area1 .text1b").css({
                                                  'transition':'all 300ms 0.25s ease',
                                                  'transform':'translateX(100%)'
                                                });
                         /*-----------------------------------------------------------*/
                         $(".area1 .text1c").css({
                                                  'transition':'all 300ms 0s ease',
                                                  'transform':'translateY(100%)'
                                                });
              },
              function(){
                         $(".area1 .text1").css('transform','translateX(0)');
                         $(".area1 .text1a").css('transform','translateY(0)');
                         $(".area1 .text1b").css('transform','translateX(0)');
                         $(".area1 .text1c").css('transform','translateY(0)');

              }
          );
    });

カードに移動と回転をくわえる

２つ目のアニメーションは回転 rotateZ(角度deg) をくわえて移動させます。

前項では、起点から横に１枚分のみの移動をさせているので100%にしていますが、今度は２枚目のカードも加わるので、２枚目の移動距離は起点から200%になります。

このカード・アニメーションでは、各カードの要素内に、jpg・gifファイルやJavaScriptでふわふわ動くアニメーションを実装させて、楽しく見せるようにしてみました。
漂うアニメーションは、過去での記事「ふわふわと漂う動きを表現させる」にてご紹介していますので、ご覧くださいね。

See the Pen Card animation effect by bens-user (@ben1099user) on CodePen.

(DEMO) http://ben1099url.starfree.jp/0068.html