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

2014年10月29日 星期三

漂亮彈跳地出現文字說明框:easy JQuery




kdsa fda fdjfda fl fdf jdsaf
lkdafldjf ldja lfjdlajfldj afl;d lf dla fda fldsaf
dlksf ldjfldj lfjdlfj dlj fldj lfj dlf jdj fdj f
dslakf dsf ldfldjfljd lf dlj fdj fl dlf d fdl fdaf
lkd fldjfldlfj dfj dls















一、教學影音:

二、請在<body>之後插入下列 CSS :
<style>

.tabdiv1029 {
background-image:url(https://lh5.googleusercontent.com/-tBDNsvaiOkU/VFCgbbrAbLI/AAAAAAAAYfo/OoyP56WpVVM/w48-h42-no/mouse-2_318-11618.jpg), url(https://lh5.googleusercontent.com/-0CngfpMcgA0/VDqDgCo9MVI/AAAAAAAAYVI/kxdyL4zaSTw/w1285-h857-no/IMG_1076.JPG);
background-repeat: no-repeat, no-repeat;
background-size: 48px 42px, 480px 320px;
background-position: right 3px bottom 3px, left top;
}

.tabword1029 {
font-family: Verdana, '微軟正黑體';
font-size: 1.02em;
font-weight: bold;
line-height: 1.4em;
text-align: left;
padding: 0em 0.3em 0em 0.3em;
width: 75%;
margin: auto;
color: white;
background-color: rgba(60, 60, 60, 0.7);
}
.disheight01 {
overflow: hidden;
height: 0px;
}

.disheight02 {
height: auto;
}
</style>
三、請在<body>之後插入下列  jQuery 程式碼:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css">
<script>
$(function() {
$( ".tabdiv1029" ).hover(function() {
$( this ).find(">div").addClass("disheight02", 400, "easeOutBounce");
} ,
function() {
$( this ).find(">div").removeClass("disheight02", 200, "easeOutBounce" );
});
});
</script>

注意事項:
如因其他互動模式而使用了 1.9.1以及1.9.2那幾條程式,即紅色字體者,就 可以不用再使用。一篇文章原則上有一次即可。



2014年10月26日 星期日

超快速的 image hover





黃色的燈光

配上的是一種柔和,和一種
黃色的布感。
用的是老鏡,那種跟我幾乎同樣年紀
的老鏡。
一種氛圍,
只有老鏡才能出來。


滑鼠移入,
圖片就會快速地
跑下又跑上。
讓出來的空隙,
就是要說明的文字文本。
可以調整方向、速度,
字的各種字體表現,
都可以用CSS來調校。

超快速的 image hover!!




一、影音教學:


二、複製並貼入下列 CSS 碼於<body>之後:
<style>

.diva1024 {
position: relative;
}

.titlemid1024 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.8em;
text-align: left;
padding: 0.5em;
width: 75%;
margin: auto;
letter-spacing: 0.1em;
}

.word1024 {
font-family: Verdana, '微軟正黑體';
font-size: 1.02em;
font-weight: bold;
line-height: 1.4em;
text-align: left;
padding: 0.3em;
width: 75%;
margin: auto;
letter-spacing: 0.1em;
border-bottom: 1px solid darkred;
}

.img1024 {
position: absolute; left: 0px; top: 0px;
}

</style>
三、請複製並貼入下列 jQuery 程式碼於 <body>之後:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css">

<script>
$(function() {
$( ".diva1024" ).hover(function() {
  $( this ).find(">img").hide("slide", { direction: "down" }, 200);
    } ,
    function() {
    $( this ).find(">img").show("slide", { direction: "up" }, 200 );
});
});
</script>

說明:
  1. 土黃色字體處,請填入一開始 做出來 div  的 calss 。
  2. 紅色字體處,是圖片隱藏和出現的方 向,可以使用down, up, left, right。
  3. 藍色字體處,是圖片進行的速 度。一秒是1000。
  4. 這個互動功能,可以用同一個class,不斷的重覆使用。



2014年10月17日 星期五

超快速任意移動物件:position: relative




超快速
移動編輯物件到任 意的編輯地方




  使用 CSS  position: relative


基礎概念講解:click for video!!


教學影音:


注意事項:
各項參數所在位置



補充資訊:

★ 2013年6月的教學版本,較詳細但複雜一點。按此◥

★ 要旋轉圖的語法:請把class   rotate1017   加入即可。-3deg是角度。

<style>
.rotate1017 {
-webkit-transform: rotate(-3deg);
}
</style>

★ 滑鼠移到就變淡的語法:請把那張圖的id設好,此例為 id="a01"
<style>
#a01:hover {
opacity: 0.2;
}
</style>
補充資訊:教學影音:CSS hover


2014年10月15日 星期三

在div內任意移動編輯物件: position: absolute


基礎概念講解:click for video!!

平面作品參考範例:


數位作品實作示範:





石碇之水

那年的冬季,水清的是一種無法想像。看著天空的顏色在轉化。


藍的與白的,是一種交相印。



教學video:




範例使用 CSS:

<style>
/*主DIV*/
.maindiv01 {
position: relative;
border: 0px solid orange;
}

/*標題大字*/
.divwordbig {
font-family: Verdana, '微軟正黑體';
font-size: 3.4em;
font-weight: bold;
line-height: 1.6em;
text-align: left;
color: green;
text-shadow: 2px 2px 2px black;
}

/*中間內文*/
.divwordsmall {
font-family: Verdana, '微軟正黑體';
font-size: 1.04em;
font-weight: bold;
line-height: 1.8em;
text-align: left;
background-color: whitesmoke;
width: 70%;
}

/*下面內文*/
.divwordsmall02 {
font-family: Verdana, '微軟正黑體';
font-size: 1.04em;
font-weight: bold;
background-color: lightgreen;
position: absolute;
top: 290px;
left: 185px;
}

/*第一張照片*/
.popic01 {
position: absolute;
left: 240px;
top: -10px;
}

/*第二張照片*/
.popic02 {
position: absolute;
left: 260px;
top: 155px;
padding: 3px;
background-color: whitesmoke;
-webkit-transform: rotate(-5deg);
-webkit-box-shadow: 2px 2px 2px 2px silver;
}

/*主div背景圖*/
.bacimg {
background-image: url(https://lh6.googleusercontent.com/-0CngfpMcgA0/VDqDgCo9MVI/AAAAAAAAYVI/kxdyL4zaSTw/w684-h456-no/IMG_1076.JPG);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 455px;
}
</style>



範例補充用 互動CSS:

.popic01:hover {
border: 1px solid transparent;
padding: 3px;
background-color: whitesmoke;
-webkit-box-shadow: 1px 1px 1px 2px silver;
}



2014年10月10日 星期五

互動的照片效果:時間前後的比較



數位新聞寫作利器
比較前、比較後
這個互動模組,是數位新聞的呈現得以有效的超越傳統新聞寫作,很好的一個示範範例 作用。








一、影音教學:


寫作發想:
  1. 要比較時間前後的情況變化時使用。
  2. 請使用範例的互動模組 。
  3. 兩張照片的大小及比例要一致才好看。
  4. 最後一定要記得設定語法中照片的長度和寬度。
二、請把下列 程式碼 複製到<head>xxx</head>之間(建議)或<body>之後:

<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/jQuery-Before-After-Image-Comparison-Plugin-Image-Reveal/src/jquery.imageReveal.css">

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>

<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jQuery-Before-After-Image-Comparison-Plugin-Image-Reveal/src/jquery.imageReveal.js"></script>

<script>
$(window).load(function() {
$('#Cademo').imageReveal({
barWidth: 15,
touchBarWidth: 40,
paddingLeft: 0,
paddingRight: 0,
startPosition: 0.25,
showCaption: true,
captionChange: 0.5,
width: 576,
height: 384
});
});
</script>

注意事項:
  1. jquery-1.12.4.js 那條程式(橘色字體者), 如已使用了,可以不要再寫入。一篇互動文本,寫入一條即可。最早出現的那條保留即可。
  2. 請記得要設定圖像的長度和寬度,即width & height,暗紅色字體者
三、請把下列 HTML 語法複製到欲呈現之編輯處:

<div id="Cademo" class="imageReveal">
<img src="https://lh6.googleusercontent.com/-zfoS52_k8x0/VDaiOK31kFI/AAAAAAAAYTI/FWb_OwemI_k/w1061-h708-no/IMG_096001.jpg" title="Before">
<img src="https://lh5.googleusercontent.com/-hjokh2l_MWg/VC0a6XIfPII/AAAAAAAAYRU/QmA3K6ICgB4/w1220-h814-no/IMG_0960.JPG" title="After">
</div>

注意事項:
  1. 把照片網址填入src="xxx" 中。即暗紅色字體處。依前、後的時間序填入。


原始語法出處:Image Reveal


2014年10月6日 星期一

移動滑鼠,編輯元素產生變化:jquery addclass / removeclass



請把滑鼠移到這裡來,下面 區塊會加框線。



這裡是文本寫作的區塊,可以透過互動強調作者想表達的想法。

當滑鼠移到這個區塊時,(一)這個區塊的文字會變 顏色,(二)同時背景圖也會換掉。




一、影音教學:




寫作發想:
  1. 請先寫入編輯元素。
  2. 為每個編輯元素設定 class 以及 id 。
  3. class 是媒材呈現的樣貌;id 是互動控制所需的辨識碼。
  4. 最後再寫入 jQuery 程式碼,請注意程式中所設的 id 。
二、請把下列 CSS 複製到<body>之後:
<style type="text/css">
.titlemid01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.4em;
font-weight: bold;
line-height: 1.6em;
text-align: left;
letter-spacing: 0.1em;
border-bottom: 1px solid darkorange;
}

.contword01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.04em;
font-weight: bold;
line-height: 1.8em;
text-align: left;
letter-spacing: 0.1em;
padding-right: 55%;
background-image: url(https://lh4.googleusercontent.com/-KuKFR5LQMq0/UqHeCoWFxSI/AAAAAAAAQNo/BfumwLGH8k8/w829-h814-no/34561%2B%28102%29.png);
background-repeat:no-repeat;
background-position: right center;
background-size: 300px;
}

.contword02 {
border: 1px solid darkred;
}

.contword03 {
color: orange;
background-image: url(https://lh3.googleusercontent.com/-vnG3PMO07w0/UqBpLSboe3I/AAAAAAAAQKY/8m3xNB8SdbA/s256-no/256px-Information_green.svg.png);
}
</style>
三、請把下列 jQuery 語法複製到<body>之後:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>
$(document).ready(function () {
$("#a01").hover(function () {
$("#a02").addClass("contword02");
}, function () {
$("#a02").removeClass("contword02");
});
});
</script>

<script>
$(document).ready(function () {
$("#a02").hover(function () {
$("#a02").addClass("contword03");
}, function () {
$("#a02").removeClass("contword03");
});
});
</script>


注意事項:
  1. 1.9.1.js 那條程式(橘色字體者), 如已因使用其他互動功能而被使用了,可以不要再寫入。一篇互動數位文章中,寫入一條即可。請保留最早出現的那條。



2014年10月1日 星期三

用背景圖拼貼圖像 plus 文字安排的大、中、小






可以同時使用很多張
背景圖拼貼圖像
利用多張圖像的位置關係,來呈現文本,不只是「美感」而已。
事實 上,從空間性的文本結構而言,圖像在文本空間位置的變化,即是意義的變化。
未來的文本敘述者, 必須要能使用圖像拼貼的敘事結構,來講故事。






一、影音教學:

二、教學使用的 CSS:請放置於<body>之後
<style>

.backi093001 {
background-image: url(第一張圖像網址), url(第二張圖像網址);
background-repeat: no-repeat, no-repeat;
background-position: right  bottom, right 210px top 7px;
background-size: 360px, 160px;
}

.backi093002 {
background-position: right bottom, right 170px top 47px;
}

.titlebig {
font-family: Verdana, '微軟正黑體';
font-size: 2.4em;
font-weight: bold;
line-height: 1.4em;
text-align: left;
letter-spacing: 0.1em;
text-shadow: 1px 1px 1px black;
color: darkorange;
}

.titlemid {
font-family: Verdana, '微軟正黑體';
font-size: 1.6em;
font-weight: bold;
line-height: 1.4em;
text-align: left;
letter-spacing: 0.1em;
border-bottom: 1px solid darkred;
}

.word01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.01em;
font-weight: bold;
line-height: 1.6em;
text-align: left;
letter-spacing: 0.1em;
}

</style>
三、注意事項:
  1. 要移動背景圖的位置,請注意(上面紅色字體者) background-position: right bottom, right 210px top 7px; 。right【left/ center/ right,三選一】,是指靠 div 的右邊。 bottom【top/ center/ bottom,三選一】,是指靠 div 的底部。而 right 210px top 7px,是指距離右邊210px,同時距離頂部 7px。
  2. .titlebig 是指大標,.titlemid 是指中標,.word01 是指內文的 class。
四、補充的互動語法:請放置於<body>之後
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$('.backi093001').hover(function () {
$(this).addClass('backi093002');
}, function () {
$(this).removeClass('backi093002');
});
});
</script>