スクロールに応じてテキストを動作（アニメーション）させるなるべく軽い方法 [無料ホームページ作成クラウドサービス まめわざ]
例えばh3見出しに入った文字をスクロールに応じてアニメーションさせたい場合、 <h3 class="anim1">アニメーションさせる文字</h3> というようにHTMLをセットし、CSSでは .anim1 { animation: 1.5s forwards anim1; } @keyframes anim1 { 0% { opacity: 0; } 100% { opacity: 1; } } のようにanim1クラスにanim1アニメーションを定義します。 これによりページを読み込み時にアニメーションが実行されます。 以下のJavascriptでは、ページ読み込み時に一旦anim1クラスを除去し、ウィンドウのスクロールがanim1クラスを持つ要素の位置に達した場合にanim1クラスを付与する、という処理を行うことで、スクロールに応じたアニメーションを実現します。 (function(
![スクロールに応じてテキストを動作（アニメーション）させるなるべく軽い方法 [無料ホームページ作成クラウドサービス まめわざ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/5b346678f9de1e70cf07d43e15db7486a7f68168/height=288;version=1;width=512/https%3A%2F%2Fmamewaza.com%2Fimg%2F1477391484138s.gif)
CSS3でradioボタン＆checkboxにオリジナルデザインを適用する方法（スマートフォン用） | Stronghold Archive
こうなります。（Chromeあたりでご覧下さい） CSS 指定したスタイルはこんな感じです。 input[type=”radio”]{ -webkit-appearance: none; width:15px; height:15px; border:2px solid #19283C; border-radius:15px; background:transparent; opacity:0.5; width:100%; } input[type=”radio”]:checked{ background:#19283C; opacity:1; } input[type=”checkbox”]{ -webkit-appearance: none; width:15px; height:15px; border:2px solid #19283C; border-radius:2px; ba
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Opacity Generator - Elbgoods Internet Agency Hamburg - Webdesign & Online Marketing
