![](https://cdn-ak-scissors.b.st-hatena.com/image/square/688b99d2f0cc00b7fb9334c8adfff3dfd82b186a/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgyJUI5JUUzJTgyJUFGJUUzJTgzJUFEJUUzJTgzJUJDJUUzJTgzJUFCJUU4JUE2JTgxJUU3JUI0JUEwJUUzJTgxJUFFJUU3JUFCJUFGJUUzJTgyJTkyJUU1JUJFJTkwJUUzJTgwJTg1JUUzJTgxJUFCJUU5JTgwJThGJUU5JTgxJThFJUUzJTgxJTk1JUUzJTgxJTlCJUUzJTgxJUE2JUU3JUI2JTlBJUUzJTgxJThEJUUzJTgxJThDJUUzJTgxJTgyJUUzJTgyJThCJUU2JTg0JTlGJUUzJTgyJTkyJUU2JUJDJTk0JUU1JTg3JUJBJUUzJTgxJTk5JUUzJTgyJThCJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkNtaWRkbGUmcz1lNDY1YWY3NmEyMGIyYWU1NjJhMWE0NDFlYjlkZGM5YQ%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwaXRhbml1bS1SJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lNDEyNWMzZWE3MzNiYWVhMjllYzFlNzQyMTYxZTRhNA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D053465e5e0201e75e26fd2921206731e)
エントリーの編集
![loading...](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/common/loading@2x.gif)
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
スクロール要素の端を徐々に透過させて続きがある感を演出する - Qiita
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
![アプリのスクリーンショット](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/entry/app-screenshot.png)
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
スクロール要素の端を徐々に透過させて続きがある感を演出する - Qiita
概要 スクロール要素の端を徐々に透過させるように見せることで、スクロールできる=続きがある感を演出... 概要 スクロール要素の端を徐々に透過させるように見せることで、スクロールできる=続きがある感を演出してみました。 CSSにて線形グラデーションでの透過は困難なので、白色グラデーション要素をマスクして上下に霧がかかったように効果をつけることで、透過されているように見せています。 スクロールし切った状態ではこの効果は不要のため、スクロール状態に応じて動的にこの効果を切り替えるようにしました。 実演 See the Pen 上下の霧かけ by itanium (@itanium-R) on CodePen. つくった経緯 MacにてChromeでWebページを閲覧すると、デフォルトでスクロールバーが非表示であり、スクロールしようとしない限り表示されません。 ブラウザのデフォルト挙動を尊重しつつ続きがある感じを演出するため、よく[続きを見る]を押下させるページにて採用されている白色グラデーションの