(cache) TURNBOX.js - NOHT CO.,LTD.

TOGGLE

OFF

CONFIRM

OFF

CANCEL OK

UPLOADER

UPLOAD

COMPLETE

COLOR PICKER

FORM A

ID
PASS

Forgot password?

Remember Me

DIALOG A

NOTIFY

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

CONFIRMED

FORM B

CONTACT

NAME
MAIL

CONFIRM

CANCEL

SEND

SENDING SUCCEEDED

DIALOG B

ALERT

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

OK CANCEL

CONFIRMED

TAB

TAB1

TAB2

TAB3

CONTENT 1

CONTENT 2

CONTENT 3

RADIO

OFF

CHECK

OFF

Set up

We use jQuery.Load turnBox.js after loading jquery.js. jQueryを使用しています。jquery.jsを読み込んだ後でturnBox.jsを読み込んでください。

          
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/turnBox.js"></script>

HTML

Create a child element for each screen you wish to generate, directly below the element where you want to call turnBox.js.
Minimum 2, maximum 4. If there are 5 or more child elements, they will be deleted. turnBox.jsを適用したい要素の直下に、生成したい面の数だけ子要素を設置してください。
最低は2、最大は4です。5以上の子要素がある場合は削除されます。

          
<div class="sample">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

JS

When the .turnBox() method is applied to a target element, it will generate it with default values.
Check the "Defaults and options" section to see which parameters can be changed. 対象となる要素に.turnBox()のメソッドを適用するとデフォルトの値で作成されます。
変更可能なパラメータはDefaults and optionsで確認して下さい。

          
$(".sample").turnBox();

Defaults and options

          
// Defaults //

$(".sample").turnBox({
  width: 200,
  height: 50,
  axis: "X",
  even:,
  perspective: 800,
  duration: 200,
  delay: 0,
  easing: "linear",
  direction: "positive",
  type: "real"
});

width: Width of box.
height: Height of box.
axis: Sets rotation axis. "X" for vertical rotation, "Y" for horizontal rotation.
even: Length of even-numbered screens.
axis: Set to "X" for vertical width, "Y" for horizontal width. If not set, both will be equal.
perspective: Intensity of perspective.
duration: Duration of animation.
delay: Delay time before animation starts.
easing: Pace of animation. When easing is set using a transition-timing-function, bezier curves can be entered.
direction: Direction of rotation. "negative" will reverse the rotation.
type: The following three types of rotation animation can be selected: width: ボックスの横幅。
height: ボックスの縦幅。
axis: 回転軸の設定。"X"なら縦回転、"Y"なら横回転。
even: 偶数面の長さ。axis: "X"なら縦幅、"Y"なら横幅に設定されます。設定しない場合は等幅になります。
perspective: パースペクティブの強さ。
duration: アニメーションの時間。
delay: アニメーションを開始するまでの時間。
easing: アニメーションの緩急。transition-timing-functionで設定できるeasing、ペジェ曲線を入力できます。
direction: 回転方向の設定。"negative"で逆回転します。
type: 回転アニメーションを以下の３種類から選択できます。

"real"
Rotates the screen 90° at a time like an actual box.
Can be set to even. "real"
実際の箱のように９０°ずつ面を回転させます。
even設定可能。
"repeat"
Will repeat the animated movement of screens 1 and 2 for screens 3 and 4.
Can be set to even. "repeat"
３・４面を１・２面と同じ動きでアニメーションを繰り返します。
even設定可能。
"skip"
Will cancel the display of a passing screen, and rotate the animation 90°relative to the designated screen.
A screen can be designated using "turnBoxButtonTo" on the turnBoxButton. "skip"
通過する面の表示をキャンセルして、指定した面に９０°の回転でアニメーションをします。
面の指定はturnBoxButtonの"turnBoxButtonTo"で行えます。

turnBoxButton

By adding a "turnBoxButton" class to the child element of a screen, you can set a trigger for box rotation.
By default, an animation is set for the next screen. However, by adding "turnBoxButtonPrev" to the class, you can change this to the previous screen. 面の子要素にclass"turnBoxButton"を追加することでボックスを回転させるトリガーに設定できます。
デフォルトでは次の面にアニメーションするように設定されていますが、
classに"turnBoxButtonPrev"を追加することで前の面にアニメーションするよう変更できます。

By default, the turnBoxButton event is set to "click", but this can be changed by adding the following class.
The character strings after "turnboxButtonEvent" correspond to the jQuery event name. turnBoxButtonのイベントはデフォルトでは"click"に設定されていますが、
以下のclassを追加することで変更できます。
"turnBoxButtonEvent"の後の文字列がjQueryのイベント名に対応しています。

"turnBoxButtonEventClick"
"turnBoxButtonEventMouseover"
"turnBoxButtonEventMouseup"
"turnBoxButtonEventMousedown"
"turnBoxButtonEventMousemove"
"turnBoxButtonEventMouseout"
"turnBoxButtonEventTouchstart"
"turnBoxButtonEventTouchmove"
"turnBoxButtonEventTouchend"

For boxes which are set to type: "skip", using the "turnBoxButtonTo" class and adding the number of the screen to be animated will cancel the display of a passing screen, and result in a 90° rotation of the designated screen. type: "skip"に設定してあるボックスでは、classに"turnBoxButtonTo"と、移動先の面の番号を追加することで
通過する面の表示をキャンセルして、指定した面に９０°の回転でアニメーションをします。

          
<div class="sample">
  <div>
    <p class="turnBoxButton">NEXT</p>
  </div>
  <div>
    <span class="turnBoxButton turnBoxButtonPrev">PREV</span>
    <span class="turnBoxButton">NEXT</span>
  </div>
  <div>
    <span class="turnBoxButton turnBoxButtonEventMouseover turnBoxButtonEventTouchstart">NEXT</span>
  </div>
  <div>
    <span class="turnBoxButton turnBoxButtonTo1">skip to 1</span>
    <span class="turnBoxButton turnBoxButtonTo2">skip to 2</span>
    <span class="turnBoxButton turnBoxButtonTo3">skip to 3</span>
  </div>
</div>

CSS

By applying CSS, you can use a class that is set by .turnBox() in addition to the preset id class.
This designates the numerical value of the screen following "turnBoxFaceNum". CSSを適用する場合、予め設定したid・classの他に、.turnBox()で設定されたclassを使用することができます。
"turnBoxFaceNum"の後に面の数値を指定します。

DEMO

          
<style>

  .turnBoxButton {
    line-height: 2.5;
    display: block;
    text-align: center;
  }

  #css-sample-front {
    background: red;
  }

  .turnBoxFaceNum2 {
    background: blue;
  }

  .turnBoxFaceNum3 {
    background: green;
  }

  .turnBoxFaceNum4 {
    background: gray;
  }

</style>

<div class="css-sample">
  <div id="css-sample-front">
    <p class="turnBoxButton">NEXT</p>
  </div>
    <p class="turnBoxButton">NEXT</p>
  </div>
    <p class="turnBoxButton">NEXT</p>
  </div>
    <p class="turnBoxButton">NEXT</p>
  </div>
</div>

<script type="text/javascript">

  $(".css-sample").turnBox();

</script>

turnBoxLink

The .turnBoxLink() method is used to start an animation from outside the box, by using the designated element as a button.
In a similar manner, an external box can be operated by creating another box inside the first box. ボックスを外部からアニメーションさせる場合はボタンに設定したい要素に.turnBoxLink()のメソッドを適用します。
ボックスの内側にもう一つボックスを作って外側のボックスを操作する場合も同様です。

Defaults and options

          
// Defaults //

$(".link-sample").turnBoxLink({
  box: ,
  events: "click",
  dist: "next"
});

box: Selects the box to be animated.
events: JQuery event. You can set plural events by delimiting them by spaces.
dist: Setting this to "prev" will use an animation to move to the previous screen. When the box is type: "skip", entering the screen number will use an animation to move to the desired screen. box: 対象となるボックスのセレクタ。
events: jQueryイベント。複数設定する場合は半角スペースを開けて入力してください。
dist: "prev"で前の面へアニメーション。対象のボックスがtype: "skip"の場合は数値を入力で指定した面へアニメーション。

DEMO

LINK

PREV NEXT skip to 2

          
<div class="link-sample">
  <div>
    <p class="turnBoxButton">NEXT</p>
  </div>
  <div>
    <div class="child-box">
      <div>
        <p class="turnBoxButton">NEXT</p>
      </div>
      <div>
        <span class="link-button-inner">LINK</span>
      </div>
    </div>
  </div>
  <div>
    <span class="turnBoxButton turnBoxButtonPrev">PREV</span>
  </div>
  <div>
  </div>
</div>

<span class="link-button-prev">PREV</span>
<span class="link-button-next">NEXT</span>
<span class="link-button-skip">skip to 2</span>

<script type="text/javascript">

  $(".link-sample").turnBox({
    height: 60,
    type: "skip"
  });

  $(".child-box").turnBox({
    width: 80,
    height: 40
  });

  $(".link-button-inner").turnBoxLink({
    box: ".link-sample"
  });

  $(".link-button-prev").turnBoxLink({
    box: ".link-sample",
    dist:  "prev"
  });

  $(".link-button-next").turnBoxLink({
    box: ".link-sample"
  });

  $(".link-button-skip").turnBoxLink({
    box: ".link-sample",
    events: "mouseover touchstart",
    dist: 2
  });

</script>

turnBoxAnimate

When you want to initialize a box, or change the surface of a box by linking it to another JavaScript function, use the .turnBoxAnimate() function on the target box. ボックスを初期化したい場合や、他のjs関数に紐付けてボックスの面を変更したい場合には
対象となるボックスに.turnBoxAnimate()を適用してください。

Defaults and options

          
// Defaults //

$(".animate-sample").turnBoxAnimate({
  face: 1,
  animation: true
});

face: designates the numerical value of the face before it is moved.
animation: set to false to disable animations at rotation time.
Assuming that the target box does not have the value type: "skip", this will be set to false if the current face and the designated face are not connected. face: 移動先の面を数値で指定します。
animation: falseに設定すると回転時にアニメーションしません。
また対象のボックスがtype: "skip"ではない場合に、現在の面とfaceで指定した面が連続でないとfalseに設定されます。

DEMO

INIT ANIMATION INIT NOT-ANIMATION

          
<div class="container">
  <div class="animate-sample">
    <div>
      <span>1:</span>
      <p class="turnBoxButton">NEXT</p>
    </div>
    <div>
      <span>2:</span>
      <p class="turnBoxButton">NEXT</p>
    </div>
    <div>
      <span>3:</span>
      <p class="turnBoxButton">NEXT</p>
    </div>
    <div>
      <span>4:</span>
      <p class="turnBoxButton">NEXT</p>
    </div>
  </div>
  <div class="animate-sample">
    <div>
      <span>1:</span>
      <p class="turnBoxButton">NEXT</p>
    </div>
    <div>
      <span>2:</span>
      <p class="turnBoxButton">NEXT</p>
    </div>
    <div>
      <span>3:</span>
      <p class="turnBoxButton">NEXT</p>
    </div>
    <div>
      <span>4:</span>
      <p class="turnBoxButton">NEXT</p>
    </div>
  </div>
  <div class="animate-sample">
    <div>
      <span>1:</span>
      <p class="turnBoxButton">NEXT</p>
    </div>
    <div>
      <span>2:</span>
      <p class="turnBoxButton">NEXT</p>
    </div>
    <div>
      <span>3:</span>
      <p class="turnBoxButton">NEXT</p>
    </div>
    <div>
      <span>4:</span>
      <p class="turnBoxButton">NEXT</p>
    </div>
  </div>
</div>

<span class="animate-true">ANIMATION</span>
<span class="animate-false">NOT-ANIMATION</span>

<script type="text/javascript">

$(".animate-sample").turnBox({
  height: 60,
  type: "skip"
});

$(".animate-true").on("click", function()
{
  $(".animate-sample").turnBoxAnimate();
});

$(".animate-false").on("click", function()
{
  $(".animate-sample").turnBoxAnimate(
  {
   animation: false
  });
});

</script>

Browser support

We have confirmed compatibility with the following browsers. 以下のブラウザで動作を確認しています。