【ティラノスクリプト】クリック待ち画像を透過PNGにする+アニメーションさせる
12/10
[glyph]タグで表示位置を固定する場合について追記
コメントありがとうございます!
*****
クリック待ち画像(デフォルトでは文章の最後でぴょんぴょんしている水色のGIF画像)を透過PNGにしてCSSでアニメーションさせてみます。すこーしだけ本体部分を書き換えているので、バージョンアップに対応する際はご注意ください。
①画像を用意する
↑この画像を「nextpage.png」という名前で保存して、tyrano/images/system に入れます。「nextpage.gif」と同じフォルダです。
②kag.tag.jsを書き換える
tyrano/plugins/kag/kag.tag.js を開いて、「nextpage.gif」を「nextpage.png」に書き換えます。テキストエディタの置換機能を使うと簡単にできます。
Meryの場合:Ctrl+Rで「置換」を表示して、上のボックスに「nextpage.gif」を、下のボックスに「nextpage.png」を入力して「すべて置換」をクリックすると書き換えられます。
③CSSを設定する
tyrano/tyrano.cssを開いてCSSを設定します。変更するのは170行目あたりにある「次へのクリックを促すアイコン」の下にある「.img_next」から始まる部分です。
※[glyph]タグで表示位置を固定する場合はCSSの【img_next】の部分を【glyph_image】に変更してください。
いくつかサンプルを載せておきます。CSSアニメーションについて詳しく知りたい場合は各自でググってください。
点滅する
.img_next{ -webkit-animation: next 1s ease-in-out infinite alternate; animation: next 1s ease-in-out infinite alternate; } @-webkit-keyframes next { 0% { opacity:1; } 100% { opacity:0; } } @keyframes next { 0% { opacity:1; } 100% { opacity:0; } }
上下に動く
.img_next{ -webkit-animation: next 1s ease-in-out infinite alternate; animation: next 1s ease-in-out infinite alternate; } @-webkit-keyframes next { 0% {-webkit-transform: translateY(0px);} 100% {-webkit-transform: translateY(3px);} } @keyframes next { 0% {transform: translateY(0px);} 100% {transform: translateY(3px);} }
Y軸で回転する
.img_next{ -webkit-animation: next 1s ease-in-out infinite alternate; animation: next 1s ease-in-out infinite alternate; } @-webkit-keyframes next { 0% { -webkit-transform:rotateY(0deg); } 100% { -webkit-transform:rotateY(180deg); } } @keyframes next { 0% { transform:rotateY(0deg); } 100% { transform:rotateY(180deg); } }
360°回転する
←この画像を使いました
.img_next{ -webkit-animation: next 2s linear infinite; animation: next 2s linear infinite; } @-webkit-keyframes next { 0% {-webkit-transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);} } @keyframes next { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }
拡大・縮小する
←この画像を使用しました
.img_next{ -webkit-animation: next 1s ease-in-out infinite alternate; animation: next 1s ease-in-out infinite alternate; } @-webkit-keyframes next { 0% { -webkit-transform:scale(1.0); } 100% { -webkit-transform:scale(0.8); } } @keyframes next { 0% { transform:scale(1.0); } 100% { transform:scale(0.8); } }
その他「こんなのできる?」というのがありましたらリクエストしてみてください。オリジナルのクリック待ち画像の制作も承ってます。お気軽にどーぞ。