cssで要素を下から上に表示させる方法になります。 各記述した内容の、解説もしております！ 記述を変えれば、表示させる開始時間など変えられます。 例)コード 太郎を下から上に表示させます。 こちらは ・最初は表示されていない ・1秒後にアニメーション開始 ・下から上に0.5秒で表示させる HTML <p class="name">太郎<p> css .name { opacity:0; animation-name:anime; animation-duration:0.5s; animation-delay: 1s; animation-iteration-count: 1; animation-fill-mode: forwards; } @keyframes anime { 0% { opacity: 0; transform: translateY(30px); } 100%{ opacity: 1; transform: translateY(0); } } 解説 css name { opacity:0; #要素の不透明度を設定.0は透明 animation-name:anime; #@keyframesと同じ名前の必要あり animation-duration: 0.5s; #アニメーション周期が完了するまでの所要時間を設定します。0.5だと素早くで画面に表示されます。5sだと５秒かけてゆっくり表示されます。 animation-delay: 1ｓ; #アニメーションが起動するまでの時間。5sにすると画面更新5秒後にアニメーションが開始する。 animation-iteration-count: 1; #アニメーションが再生される回数を指定します。 animation-fill-mode: forwards; #アニメーション再生中・再生後のスタイルを指定します。こちらは、再生後、最後のキーフレーム（100%）のスタイルが適用される。 } @keyframes anime { #@animation-nameと同じ名前の必要あり、今回は「anime」 0% { opacity: 0; transform: translateY(30px); #0%なので、アニメーション始まった際に、transform: translateY(30px);の場所にアイテムが配置される } 100%{ opacity: 1; transform: translateY(0); #100%なので、アニメーション終わった際に、transform: translateY(０0x);の場所にアイテムが配置される } }
本当にシンプルな時計が欲しくて作ってみました。 画像群は Google図形描画 で作成。 jsなのでローカルPC時刻に依存。 サンプル アナログ時計 ソース analogue.htm <html> <head> <title> <style> img{width: 860px;height: 860px;} #base {width: 860px;height: 860px;position: relative;} .clock { position: absolute; top: 0px; left: 0px; } .clock_hour_shd { position: absolute; top: 15px; left: 15px; } .clock_minute_shd { position: absolute; top: 30px; left: 30px; } .clock_second_shd { position: absolute; top: 45px; left: 45px; } </style> </head> <body style="background-color:#ffffff;"> <div id="base"> <img src="img/dial.png" class="clock"> <img src="img/hour_shd.png" id="hour_shd" class="clock_hour_shd"> <img src="img/minute_shd.png" id="minute_shd" class="clock_minute_shd"> <img src="img/second_shd.png" id="second_shd" class="clock_second_shd"> <img src="img/dial_1.png" class="clock"> <img src="img/hour.png" id="hour" class="clock"> <img src="img/minute.png" id="minute" class="clock"> <img src="img/second.png" id="second" class="clock"> </div> <script> var time; var hour = document.getElementById("hour"); var minute = document.getElementById("minute"); var second = document.getElementById("second"); var second_shd = document.getElementById("second_shd"); function main() { time = new Date(); hour.style.transform = "rotate("+(time.getHours()*30+time.getMinutes()*0.5)+"deg)"; minute.style.transform = "rotate("+(time.getMinutes()*6)+"deg)"; second.style.transform = "rotate("+(time.getSeconds()*6)+"deg)"; hour_shd.style.transform = "rotate("+(time.getHours()*30+time.getMinutes()*0.5)+"deg)"; minute_shd.style.transform = "rotate("+(time.getMinutes()*6)+"deg)"; second_shd.style.transform = "rotate("+(time.getSeconds()*6)+"deg)"; document.title = time.getHours()+":"+("00"+time.getMinutes()).substr(-2,2) + ":" + ("00" + time.getSeconds()).substr(-2,2) setTimeout(main, 1000-time.getMilliseconds()); } main(); </script> </body> </html>
この記事の対象とする人 自分でPodcastサイトを運営しているPodcaster Smart App Bannerとは Smart App Banner(スマートバナーとも言うらしい)というのは、iPhoneからWebサイトを見たときに、上に表示されているアプリダウンロードのバナーみたいなやつのこと。 ↓こんなやつ この記事では、Smart App Bannerの「自分のPodcastへのリンク」版を表示させます。 ↓上の方に表示されているやつです。 押すと、Podcastアプリで、自分のPodcastが開きます。 実装 先に、Apple Podcastでの配信URLを確認しておく。 https://podcasts.apple.com/podcast/watahari/id1540412220 のようなURLのはず1。この最後の部分のidに続く１０桁数字をコピーしておく。 そして、head内に、下記のmetaタグを書けばOK。 hoge.html <meta name="apple-itunes-app" content="app-id=(さっきメモした数字)"> 上述の例であれば、こんな感じになる。 hoge.html <meta name="apple-itunes-app" content="app-id=1540412220"> アプリダウンロードのSmart App Bannerと同じ書式で、表示させたいアプリのIDを入れるところを、PodcastのIDにするだけで、不思議なことにPodcastへのリンクになる。 表示確認は実機iPhone/iPadじゃないとできないことに注意。 私は（どうせmetaタグだし試しに本番反映してやろう・・・）と思ってやってみたら、一発でうまくいって嬉しかったです。 参考 公式ドキュメント2ではPodcastでの例は見当たらなかったが、下記のようなサイトで発見され紹介されていた。 私の配信しているPodcastまみむメモです！聴いてね;) ↩ https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners ↩
