[impress.js] 拡大する方法

impress.jsで、文字などを拡大する方法を紹介します。

拡大するためには、data-scale属性を利用し、倍率を指定すればよいです。以下はサンプルです。step2を4倍しています。

<!doctype html>

<html>
<head>
  <meta charset="utf-8" />
  <title>simple slide by impress.js</title>
  <link href="css/impress-demo.css" rel="stylesheet" />
</head>
<body class="impress-not-supported">

<div id="impress">
  <!-- step1 -->
  <div id="step1" class="step" data-x="0" data-y="-1000">
    <q>スライド1です。
      ポジションはx=0、y=-1000です。</q>
  </div>
  
  <!-- step2 -->
  <div id="step2" class="step" data-x="0" data-y="0" data-scale="4">
    <q>スライド2です。</q>
  </div>

  <!-- step3 -->
  <div id="step3" class="step" data-x="0" data-y="1000">
    <q>スライド3です。</q>
  </div>
  
  <!-- impress.jsを使うための魔法 -->
  <script src="js/impress.js"></script>
  <script>impress().init();</script>
  
</div>
</body>
</html>

impress.js > 拡大する方法

広告

広告