サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
natsukimemo.com
スクロールをすると要素がフェードイン表示する方法です。 jQueryとCSSanimationを使った方法をご紹介します。 スクロールをしてただ表示されていくより、ちょっとでもアニメーションなどの動きがあった方が、 断然サイトのリッチ感が増すと思うので、ぜひこの記事を読んで実装してみてください。 注)この記事は、jQueryを導入済みの方を対象としています。 初めてjQueryを実装しようとする場合、導入方法について知る必要がありますが、このブログではそうした記事は書いておりません。 「jQuery」 「導入方法」 などで検索するといろいろ出てきますので、導入後にまたこの記事に戻ってきていただけると幸いです。
6行のテキストを一行ずつ3秒間隔でフェードイン表示させています。 フェードインには、CSSのキーフレームアニメーションを用いています。 そして、animation-delayを使って時間差が出るように遅延時間を調整しています。 HTML DEMOのコードは下記になります。 フェードインに必要なHTMLコードは 4行目から9行目のpタグのみです。 時間差で表示させる文章を一行ずつpタグで囲っています。 <body> <div class="wrap"> <div class="content"> <p class="fadein txt01">1行目:テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p class="fadein txt02">2行目:テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
ヘッダーメニューをposition:fixedで固定して下位要素をスクロールで上下にずらしていくようなページデザインをCSSで実装した際に、困ったこととその解決方法についてまとめました。 完成形 このサイトがそうですが、常にヘッダーメニューは上部に固定して、他の要素の一番上に重なるように表示させたい。 実装方法 ヘッダーに position:fixed を指定 困ったこと1 ヘッダーの下位要素をスクロールすると、背景画像はヘッダーの下にくるが文字や画像がヘッダーの上に来てしまう。 困ったこと2 解決方法1によって無事、下位要素の全ての要素の重なりがヘッダーの下に来るようになった。 しかし、今度は下位要素のリンクをクリックできなくなってしまった。 原因:ヘッダーにz-indexを指定したことで、ページ全体を覆うようにヘッダーが下位要素の上層にきてしまっているため、下位要素のリンクが反応しなく
(初回公開日2017年8月30日) h1やpタグなどのブロック要素内のテキストを縦中央にする場合、vertical-align:middle;は効きません。 vertical-alignはインライン要素とテーブルセルでしか効かないんです。 では、ブロック要素内のテキストを縦中央にしたい場合どうすればいいのでしょうか。 先日、これに苦しんだのでまとめておきます。
このページを最初にブックマークしてみませんか?
『natsukimemo.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く