Studio
Happyvalley

WEB
タロットで
ちょっと息抜き

アルカナ72枚を使った
ケルト十字占法で今日のあなたを
占おう!

image: WEBタロットでちょっと息抜き
Web Tarot

WEBでタロット占いを作成

概要

  • CSSとJSで作成したWEBタロットです。左上のデッキからカードをめくるように展開します。タロットカードには大アルカナと呼ばれる22枚と小アルカナ56枚があります。そのどちらでも好きな方で占えるようにしました。

機能の説明

  • 左上のカードをクリックするたびにカードが開き所定の位置へ移動します。展開するスプレッドは一番有名なケルト十字法で、占法はタロット・グランド・マスターのレイチェル・ポラックに従いました。
    開く順に
    1.Cover
    2.Cross [Top is left side.]
    3.Basis
    4.Recent Past
    5.Possible Outcome
    6.Near Future
    7.Self
    8.Environment
    9.Hopes and Fears
    10.Outcome
    となってます。使い道としてはタロット初心者のリーディング練習用にいいかもしれませんね。w

技術仕様

  • カードが展開されるときに裏から表にひっくり返る動きはtranscorm 3DでZ軸を180度回転させてます。スプレッドの場所もtranslateであらかじめ設定してあります。Flash なんかだとアニメーションの軌跡をカーブで制御できるんですが、CSS3ではまだ無理のようです。
    後はjavascriptでイベントを管理しているくらいですね。

後記

  • 以前、CSS3でカードめくりの記事を書いたときに何か実用的なものがつくれそうだなと感じてました。
    最初は神経衰弱みたいなゲームを考えました。
    まあ、それもいいけどまずはもう少し簡単なものをと考え・・・昔から好きだったタロットが面白いんじゃないかと思いこれに決めました。
    タロットにはいくつかの占い用のスプレッドがありますよね。でもやっぱりタロットといえばケルト十字ですね。
    ということでWEBで楽しむケルト十字によるタロット占いです。
    最初は全部だと数が多すぎて面倒なので大アルカナだけで実装しましたが、やはり小アルカナもないと大味すぎてイマジネーションが沸きません。大変でしたが全カードで占えるようにしました。
    結果を占えると面白いんですがかなりの時間が必要ですね。

https://studio-happyvalley.com/wp/wp-content/uploads/2021/02/webtarot_fig_1.png

左上のタロットカードをクリックするとカードをスプレッドしていきます。

https://studio-happyvalley.com/wp/wp-content/uploads/2021/02/webtarot_fig_2.png

オーソドックスなケルト十字占法です。

https://studio-happyvalley.com/wp/wp-content/uploads/2021/02/webtarot_fig_3.png

逆位置も実装しました。

『WEBタロットでちょっと息抜き』関連のお薦め

このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら