回到首頁
李明哲多媒體寫作教學

2020年4月23日 星期四

滑動是一種互動的身體姿態:scroll




互動文本的互動,是要考量「以什麼身體的姿式」來讓文本動起來。就網路的閱讀環境而言,可以被選擇而考量的身體互動姿態,並不多。

按下去,即 Click ,是最常看到的。但另一種動作,滑動網頁,scroll,也是常被使用的去「和文本進行互動」的動作。

就數位文本的寫作而言,每一種可能的動作姿態,都要進入其對互動文本的設計思考範圍內。透過這種動作,於是,讀者和文本,產生了一種理解上的可能性,這種可能性有著「互動」為中介。

至於,有「互動為中介」的閱讀狀況,會形成什麼不同的意義理解模式,那就又是另個要討論的問題了。

請往下滑動網頁吧!中標會變顏色。







我是中標。變色,是為了引起注意。











我是中標。變色,是為了引起注意。













我是中標。變色,是為了引起注意。
















我是中標。變色,是為了引起注意。



語法程式碼:

<style>
.test01 {
font-family: '微軟正黑體';
font-size: 130%;
font-weight: bold;
padding: 5px 1em;
border: 3px solid black;
}
</style>

<div class="test01">
我是中標。變色,是為了引起注意。
</div>

<script>
window.onscroll = function() {myFunction()};      //啟動計算滑的動作

function myFunction() {
  var elmnt = document.documentElement;
  var x = elmnt.scrollTop;              //網頁向上滑動的高度
  var y = document.getElementsByClassName("test01");
 
  for (var i= 0; i< y.length; i++) {
  var yy = y[i].offsetTop;   //中標到內文區頂端的高度
  yy += 370;                      //這是本部落格用的,是內文區到頁頂的高度
   if (yy - x < 110) {
   y[i].style.color= "red";
   } else {
   y[i].style.color= "black";
   };
  }
}
</script>







沒有留言:

張貼留言