程式狂想筆記

一個攻城師奮鬥史

0%

說話框放大縮小特效、背景置中

發表於 更新於 分類於 Disqus：

前幾天逛到暗殺教室動畫官網
暗殺1.png
指要把滑鼠移到暗殺老師頭，旁邊就會跑出說話框

暗殺2.png
然而還可以貼其靠左置中

而且持續拉螢幕一直放大，中間圖片背景還是不變(置中)
正常div置中都是用

1
2
width:50%;
margin:0px auto;

不過
完完全全不知道是怎麼做到了
想了很久其實很簡單
1
2
background-repeat: no-repeat;
background-position: center top;

當出碰CSS沒有印象有background-position這個東西

接下來，說話框他貼齊的方法是用table

1
2
3
4
5
6
7
8
.fukidashi table {
	height: 305px;
	width: 225px;
}
.fukidashi td {
	text-align: left;
	vertical-align: middle;
}

再好幾年前看到網頁設計要避免使用table
不過這個方法還滿簡單對齊

置於動態效果是用

1
2
3
4
5
6
$("#fukidashi").hover(function(){
$(".fukidashi img").stop().animate({"width":"215px","height":"305px"},100);
},
function(){
$(".fukidashi img").stop().animate({"width":"1px","height":"1px"},200);
});

沒想到JQuery的animate function可以做出此特效

最後手動實例一下吧
實例成果

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="script.js"></script>
    <link href="style.css" rel="stylesheet" />
  </head>

  <body>
    <h1>天線寶寶說你好</h1>
    <div class="wrap">
    <div class="main">
    <div class="image"></div>
    <div class="word">
    <table><tr><td>
      你好
    </td></tr>
    </table>
    </div>
    </div>
    </div>
  </body>

</html>

script.js
1
2
3
4
5
6
7
8
9
// Code goes here
$(document).ready(function(e) {
  $("div.image").hover(function(){
  $(".word").stop().animate({"font-size":"50px"},100);
  },
  function(){
  $(".word").stop().animate({"font-size":"1px"},200);
  });
});
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
div.image {
  position:absolute;
  top:300px;
  left:300px;
  background-image: url('data:image/png;base64,....);
	width:            189px;
	height:           240px;
}
div.wrap {
  height:600px;
  background-repeat: no-repeat;
	background-position: center top;
  background-image: url('data:image/png;base64,...);
}

div.word table{
  width:100%;
  height:100%;
}

div.word{
  position:absolute;
  width:200px;
  height:100px;
  top:200px;
  left:290px;
  font-size:1px;
}
div.word td{
  text-align:center;
  vertical-align:bottom;
}
div.main{
  position:relative;
	height:           600px;
}

最後做這個範例也花了我不少時間
由於Easy GO裡的GIMP和Krita都不太會使用… 耗了我滿久的時間(本人美功也很爛)
然後欄的用說話框，就改成字體放大
這個實例可能有點弱。哈。