スクロールしてもついてくるスティッキーヘッダーをJSで実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです。フロントエンドエンジニアのはやちです。 健康診断の結果が届き結果がオールAの超絶健康体だというのがわかって浮かれてるはやちです♪ｷﾞﾐｷﾞﾐ└( ＾ω＾ )」ｼｪｲｸ♪ 野菜を食べ続けた結果ですね、みなさんも野菜を食べましょう( ˘ω˘)☝ そんなのどうでもいいですね。 さて、今回は縦に長いコンテンツなどでよく見かけるスティッキヘッダーを作ってみました。 ご紹介します( ˘ω˘)☝ スティッキーヘッダーとは？ スクロールしてもヘッダーがついてくる技法のことです。 ページ移動がしやすいため使用されることが多いです。また、縦に長いLPのページ内リンクで使用されることもあります。 なんだかスティッキーフィンガーみたいですね( ˘ω˘)<ｱﾘｰﾃﾞｳﾞｪﾙﾁ HTMLとCSSの準備 まずは準備の方法をご紹介します( ˘ω˘)☝ HTML ヘッダーは固定に配置しておくための#header
10秒間見つめてください。効果が実感できますから。 | PR EDGE
Case: Optical Illusion 洗濯用洗剤ブランドのPersilがメキシコで制作したプリント広告。 以下がそのクリエイティブです（クリックすると別ウィンドウで拡大版が表示されます）。 ビジュアルだけだと何が何だかわからないかもしれませんが、中心にあるコピーを読むとその趣旨がわかります。 “Stare at the Persil bottle for 10 seconds and discover its power.” （10秒間パーシルの容器を見つめてください。そうすればその力がわかるでしょう） 実際に緑色の容器を10秒間見つめてみると、うっすらと描かれた“WINE”という文字が“目の錯覚で見えなくなってしまう”という仕掛けが施されています。ご自身でも是非試してみてください。 こちらの広告は上述のワイン編以外にもカレー編、インク編があり、それぞれ衣服につくと洗ってもシミにな
小さい子どもにコンピュータを触らせるということ - ビスケットのあれこれ
ビスケットは，開発して新しい機能を追加したときなど，必ず子どもたちが使っている様子を自分目で見てどんな風に使っているかを見てきます（最近はその暇が無くて他人に任せていたりして，かなりまずいんですが）．3年前くらいの面白いエピソードをご紹介しましょう． ちょうど，Androidタブレットで動くビスケットを開発していて（これはまた一般には配布していません．実験環境だけです），それがどのように子どもたちに使われるか見に行きました．僕としても指で直接操作するタブレットのUIの開発は初めてで．実は，マウスとタッチペンの操作は結構似ています．どちらも，非常に小さいエリアを結構正確にポイントできて，ドラッグもできますから．どちらかというと，ペンの方がドラッグが得意でしたね．小さい子はマウスクリックが全然出来ないとか（ボタンを押すときに指先だけ押すということができないので，手を握ってしまって，その結果マウ
【公式】ナチュレライフ|自然の恵みをあなたのもとへ
お知らせ 2024.07.172024年夏季休業期間のご案内 <夏季休業期間のご案内> 日頃よりナチュレライフをご愛顧いただき、誠にありがとうございます。 誠に勝手ながら、弊社では下記日程を夏季休業期間とさせていただきます。 お客様にはご不便をおかけいたしますが、何卒ご了承くださいますようお願い申し上げます。 --------------------------------------- ＜発送休業期間＞ 8月10日（土）～8月15日（木） -------------------------------------- ※8月8日（木）以降の新規ご注文は、8月16日（金）以降の出荷となります なお、定期コースご契約中で次回発送予定日が上記期間に該当するお客様につきましては、 お届けサイクルにより休業前後に発送予定日を変更させていただく場合がございます。 大変恐れ入りますが、明細書記載の次回発
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
