3Dカルーセル プラグインを使って画像エフェクトを拡張する

みなさんこんにちは!Ryoです!

今回は「Carousel 」というプラグインを使用して、3Dカルーセルエフェクトを実装しようと思います。

3Dカルーセルとは

上の動画のような画像エフェクトのことを「3Dカルーセル」と言います。

3Dカルーセル導入編

まずはBubbleエディタにCarouselプラグインをインストールしていきましょう!

エディタのPluginタブより「carousel」プラグインをインストールします。

今回ご紹介するcarouselプラグインはごく最近リリースされたプラグインのため、拡張性に欠けるため、本記事終盤にHTMLを使った実装方法についてもご紹介いたします。

carouselプラグインのためのデータベース構造は上図のとおりです。

新しいTypeを作成し、image型のfieldを1つ作成します。

データベースの構築が終わったらApp dataよりデモデータをいくつか入れてみましょう。

Visual elementよりcarouselを選択したら
imagesに[Do a Search for]よりCarousel ImageのImageを選択します。

早速プレビューしてみましょう。

HTMLを使った3Dカルーセルの実装

先ほど述べたように今回ご紹介したcarouselプラグインはリリースされてからまもないため、あまり拡張性が高くありません。

そのため、より3Dカルーセルによるデザイン性の拡張を試みるためにはまだHTMLが必須でしょう。

今回は3Dカルーセルを実装するために必要な基礎的なHTMLコードをご紹介します。

データベース設計

HTMLを使った3Dカルーセルを実装するためのデータベース設計は上図のとおりです。

先ほどcarouselプラグインの導入にて作成したデータベースにnumber型のfieldを追加します。

HTML設定

				
					<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.7/vue.js"></script>
    <script type="text/javascript" src="https://wlada.github.io/vue-carousel-3d/js/carousel-3d.umd.js"></script>
  </head>

<style>
  img {
    width: 100% !important;
    height: 100% !important;
  }

</style>

  <div id="container">
    <div id="example">
      <carousel-3d>
          
        
      </carousel-3d>
   </div>
  </div>
  <script type="text/javascript">
new Vue({
  el: '#example',
  data: {
    slides:
  },
  components: {
    'carousel-3d': window['carousel-3d'].Carousel3d,
    'slide': window['carousel-3d'].Slide
  }
})
</script>
				
			

上図のHTMLコードを使って3Dカルーセルを実装することができます。

HTMLの[Display as an iFrame]にチェックをつけることを忘れないでください。

しっかりと実装できれば上のような3Dカルーセルが実装できると思います。

こちらはコードをいじればカスタマイズ可能ですのでぜひみなさんでカスタマイズしてみてください!

あとがき

今回の記事をご覧いただきありがとうございました。

今回は使い所によってはなかなか面白い使い方のできるプラグインをご紹介できたのではないかと思います。

今後もこのような面白いBubbleプラグインをどんどんご紹介していきますので、他の記事もぜひご覧ください!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Ryo

Bubbleエンジニア
NoCode学生会代表
NoCodeCamp Bubble公認エキスパート

目次