メインコンテンツに移動

メインナビゲーション

  • ホーム
  • サイトマップ
  • ビデオ
  • ご連絡

パンくず

  • ホーム
  • マウスオーナー/クリック時にのイメージズームアウト/ズームイン効果の作成

マウスオーナー/クリック時にのイメージズームアウト/ズームイン効果の作成

css
javascript
animation
scale
transform
jQuery

マウスオーバー:イメージのズームイン+マウスクリック:イメージのズームアウト

  • マウスオーバー、クリック時のイメージのズームアウト、インの効果を作成したいです

実現:css+jQueryで作成します

   

 

  • イメージのズームイン/アウトのcss(animationの使用)定義
    .bounceout{
        -webkit-animation: bounceout 0.3s ease 2 alternate;
                animation: bounceout 0.3s ease 2 alternate ;
    }
    .bouncein {
        -webkit-animation: bouncein 0.3s ease 2 alternate ;
                animation: bouncein 0.3s ease 2 alternate ;
    }
    @-webkit-keyframes bouncein {
        from{  transform: scale(1); } 
        to {  transform: scale(.95); } 
    }
    @keyframes bouncein {
        from{  transform: scale(1); } 
        to {  transform: scale(.95); } 
    }
    @-webkit-keyframes bounceout {
        from {  transform: scale(1); } 
        to {  transform: scale(1.05); } 
    }
    @keyframes bounceout {
        from {  transform: scale(1); } 
        to {  transform: scale(1.05); } 
    }
    
  • jQueryを利用して、マウスオーバーとクリック時に、上記動画クラスをイメージブロックに追加します

      $('.views-post-img-td img').click(function() {
        $(this).addClass("bouncein");
      });
      $('.views-post-img-td img').hover(
        function() {
          $(this).addClass("bounceout");
        }, 
        function(){
          $(this).removeClass("bounceout") ;
        }
      );

実例(サンプル)

  • ここで、clickイベントを使用せず、mousedownとmouseupを使用しています

Embedded thumbnail for マウスオーナー/クリック時にのイメージズームアウト/ズームイン効果の作成
ホーム

古松

検索

Article Category

  • apache(7)
  • css(19)
  • drupal(295)
  • Electron(4)
  • html(34)
  • javascript(27)
  • laravel(4)
  • linux(5)
  • macOS(2)
  • mysql(13)
  • php(19)
  • python(4)
  • SEO(12)
  • video(72)
  • Visual Studio Code(4)
  • windows(13)
  • wordpress(32)