網頁設計/JQuery

JQuery 魔法陣製作 Magic Circle

contents

  1. 1. 製作起源
  2. 2. 製作
    1. 2.1. 前置作業
    2. 2.2. 開始
  3. 3. 更新
    1. 3.0.1. 關於代碼
  4. 3.1. Demo & 下載
  • 4. Reference

    • 製作起源

    魔法陣字型出處

    也是因為在 2014-04-17 出了一款魔法陣字型，在藉由惡友們的催促下，不，是誘導下嘗試做了 jquery 的插件來完成魔法陣的製作。當然沒有網址中做得那麼好看。

    不過具體下也努力去完成了。附圖如下：

    製作

    前置作業

    • JQuery
    • CSS 旋轉和陰影配置

    開始

    • 配置多層圓，可以參考 這裡，先將內容拆成 <span>A</span> 的形式。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      h1 span {
        font: 24px myFirstFont, Monaco, MonoSpace;
        height: 300px;
        position: absolute;
        width: 20px;
        left: 50%;
        top: 0;
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
      }

    • 將每個 <span> 設置成絕對座標配置，乍看下是一個長條形，並且使用 transform-origin 50% 50% 設置旋轉中心，也就是長條形的正中間。rgba(177, 17, 22, 1) 為血紅色

    更新

    • 接著要計算字距，來方便每一個字符偏轉角度。而且每一層圓的偏轉角度還有所不同，這裡我並沒有詳細去計算。

    • transform rotate(50 deg) 用來旋轉

    • 光暈效果呈現 box-shadow 0px 0px 10px rgba(177, 17, 22, 1) 於外部產生陰影。

      • 至於內部效果沒有做得很好看。

    在 山田かみら 的建議下，進行的大幅度地修改，同時也發現之前的版本有過度延遲的問題，原因都發生於過多的 for each 計算。

    • 先修正過於愚蠢的 CSS，加入比較好的 class 處理，來達到可以物件化。
    • 原本文字的處理仍需要使用旋轉的方式運作，而考慮將每一個圈放到同一個正方形內，直接對正方形作旋轉即可，剩下的操作交給瀏覽器去進行計算。因此，做了架構上的分層。

    關於代碼

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <script>
      $(function() {
          $("#test1").magicsquare('fire', {radius: 500, radius_padding: 150,
                radius_center: 200,	duration: 10});
          $("#test2").magicsquare('fire', {radius: 300, radius_padding: 50,
                radius_center: 50,	duration: 30});
          $("#test1").draggable();
          $("#test2").draggable();
          $(".center-content").click(function() {
              $("#test1").magicsquare('boom');
              $("#test2").magicsquare('boom');
          });
        });
    </script>

    不知道 CSS3 穩定了沒有，在動畫處理引用 animate.css。

    但是如果要完成連續型的動畫播放，單純 CSS 目前不想去研究能不能寫腳本。所以在定秒處理之後呼叫 callback() 去進行下一個動畫放置 (仍以 jquery 為主)。

    剩下的交給 山田君 了。

    Demo & 下載

    very old version demo gif
    demo link

    repo jquery-magic-circle on Github

    Reference