*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2012年5月4日 星期五

利用scroll bar創造互動文本特色 全新說明,更好學




最基礎的文字互動形式
互動文本的形態:捲軸使用





各位同學:
從這個範例我們可以看到,
例用scroll bar的功能可以產生的
基本文本互動效果

當有許多文字說明,
遠遠超過圖的長度時,
利用這個功能,我們可以讓圖、文的
展現更具互動性。
同時可以讓讀者去選擇,
是否要往下看更多的訊息。

如果你有看到這裡,
這裡我要感謝一位同學,
她問我這個問題,
我才了解之前所做的scroll bar
功能說明,是很不好用的。

這是改良版的說明,
同學可以再試試。




快速上手使用教學影片


影片教學中的CSS:


<style>

.makeoverflow0224 {
/* 啟動 */
overflow: scroll;
/* 隱藏x軸*/
overflow-x: hidden;
}

/* 基本黑體內文 */
.ironcontent01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.01em;
font-weight: normal;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
}
</style>



2012年的教學版本。 click here!



沒有留言:

張貼留言