數位文本的互動模態:基本七款
互動,是有道理可以談的。
互動不是動來動去就爽了,不是,而是作者和讀者,藉由數位文本媒介而來的一種「對話方式」。你先寫了一些東西,然後想像讀者可能會不懂,可能會想問什麼。
然後,你設定了一個互動的機制。想像,讀者透過這個互動機制,數位文本可以回答讀者在心中想問的。
再來,互動既是一種對話式的文本展現形態,那麼互動式的文本意義呈現就有特色,即是一種「辯證性」的意義給出。文本的辯證方法,往往可以讓讀者理解更多,
更多於文本材料所提供的部分。
方法一:滑鼠移到文字或圖片上,跑出說明文字
|
方法二:Hint.css 2.0:快速使用的純文字 tooltips
|
方法三:tooltipster 4.0版。超好用的tooltips模組。
|
|
|
第二式:click to hide / display
|
方法一:分層文本互動寫作技法(一)
|
方法二:按【文字】就會更新圖像或影音內容
|
方
法三:click即可【打開/隱藏】較長的內文
|
方
法四:排隊.請編輯元素一個接著一個出場
|
方
法一:學生超愛用的影音跳出法:fancyBox
|
方
法二:移動滑鼠就跳出放大照片
|
方
法三:漂亮展出互動影音小視窗
|
方
法四:一進入文章就自動跳出影音
|
第四式:互動式清單列表 interactive list
|
方
法一:把紛雜的訊息收納起來, Accordion
|
方
法二:Tabs 式的文本互動形式
|
方
法三:清單式互動展開內容文本模組,按一下就有
|
方
法四:小資料量快速互動list:使用ol / li:easy jQuery
|
方
法一:圖文的互動:會滑動的互動圖說
|
方
法二:滑鼠移入,照片就會滑動
|
方
法三:快速好用的image hover;共24種:純CSS
|
方
法四:壓在圖上的文字,互動式
|
方
法一:有導覽小圖的image gallery: Fotorama
|
方
法二:正流行的Content slider,bxSlider
|
方
法三:超有氣質的圖文互動slider
|
方
法四:讓人癢眼的 jQuery Image Gallery,zAccordion
|
方
法一:互動的照片效果:時間前後的比較
|
方
法二:可以隨意拖拉的div,讓讀者更具主動性
|
方
法三:按一下讓圖片爆炸,換圖
|
方
法四:讓圖片有更豐富的想像力
|
Q & A:
本來可以正常的互動模式,在加入其他互動模組後,就動不了了?
影音回答:
說明:
<script
src="http://code.jquery.com/jquery-1.9.1.js"></script>
上面這條程式碼的式子,要刪除,只保留第一個。