chore: update demo design

nhn · Dec 12, 2016 · 4741624 · 4741624
1 parent 4bdbaa8
commit 4741624
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/examples/example2.html b/examples/example2.html
@@ -7,21 +7,25 @@
 <body>
 <div class="code-html">
 <style type="text/css">
-    .container {width:500px;height:500px;position:relative;border:1px solid #ccc;overflow:hidden}
-    .box {width:20px;height:20px;background-color:red;position:absolute;top:240px;left:240px}
+    .container {width:500px;height:500px;position:relative;border:1px solid #9d9d9d;overflow:hidden}
+    .box {width:20px;height:20px;background-color:#fa3282;position:absolute;top:240px;left:240px;border-radius:50%}
 </style>
+<div>Click inside the box</div>
+
 <div class="container">
     <div class="box"></div>
 </div>
+
 <div>
+    Move the circle with
     <select id="easing">
         <option value="easeInOutQuad">easeInOutQuad</option>
         <option value="easeInOutCubic">easeInOutCubic</option>
         <option value="easeInOutQuart">easeInOutQuart</option>
         <option value="easeInOutQuint">easeInOutQuint</option>
     </select>
+    effect.
 </div>
-<div>Click inside the box</div>
 </div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 <script src="https://cdn.rawgit.com/nhnent/tui.code-snippet/1.2.2/code-snippet.min.js"></script>

diff --git a/examples/example3.html b/examples/example3.html
@@ -7,10 +7,11 @@
 <body>
 <div class="code-html">
 <style type="text/css">
+    .html,body {color: #494949}
     .context {width: 260px;}
     .inlineblock {display:inline-block;vertical-align:middle}
-    .move-box-container {width:198px;height:18px;border:1px solid #ccc;position:relative}
-    .move-box {width:1px;height:18px;background-color:red;position:absolute}
+    .move-box-container {width:500px;height:18px;border:1px solid #9d9d9d;position:relative;border-radius:5px;overflow:hidden}
+    .move-box {width:18px;height:18px;background-color:#fa3282;position:absolute}
     .move-btn-container {width:50px}
     .move-btn {height:20px}
 </style>
@@ -47,8 +48,10 @@
         container.find('.move-btn').on('click', function() {
             tui.component.animation.anim({
                 easing: easing,
+                from: 0,
+                to: 482,
                 frame: function(left) {
-                    box.css({left: left + '%'});
+                    box.css({left: left + 'px'});
                 }
             }).run().then(function() {
                 $('.move-console').html('<span style="color:red">Completed</span>');