【javascript,css】スマホの下のバーを抜いた100vhの指定方法 | web関連 | 二色人日記。
100vhでメインビジュアルを指定したときにスマホのステータスバー？がせっかくのメインビジュアルに被ったので何とかならないかどうか調べた時の備忘録 メインビジュアルをステータスバーを抜いた画面いっぱいに表示するためのコード <style> #main_visual{ height: 100vh; /* 変数をサポートしていないブラウザのフォールバック */ height:calc(var(--vh, 1vh) * 100); } </style> <body> <div id="main_visual">…</div> <script> // 最初に、ビューポートの高さを取得し、0.01を掛けて1%の値を算出して、vh単位の値を取得 let vh = window.innerHeight * 0.01; // カスタム変数--vhの値をドキュメントのルートに設定 document.docu
CSSアニメーションの実装もこれで簡単！ さまざまなプロパティの値をトゥイーンさせるスクリプト -ScrollBtween
Webページ上のあらゆるDOM要素に対して、CSSアニメーションを実装できるスクリプトを紹介します。 実装は簡単です、CSSのプロパティの値を「#fff to #000」「0 to 100」のように記述して、#fffから#000にトゥイーンさせ、0から100にトゥイーンさせます。 スクロールで背景色を変化させたり、ぼやけた画像をくっきりと表示したり、スクロール位置に基づくプログレスバーやパララックスも簡単に実装できます。 ScrollBtween ScrollBtween -GitHub ScrollBtweenの特徴 ScrollBtweenのデモ ScrollBtweenの使い方 ScrollBtweenの特徴 ScrollBtweenは、Webページのドキュメント（任意のDOM要素）をスクロール位置に関連してCSSのさまざまなプロパティの値を変化（トゥイーン）させるスクリプトです。ネ
25 Awesome Web Background Animation Effects – Bashooka
It`s already known by designers and developers that backgrounds are one of the most important aspects in the overall design and feel of a web page. Recently people have been turning to animation to add more visual interest to their website background. These animated backgrounds are great when used as a site introduction, functional hover navigation elements, and other creative ways to attract inte
iOS の Safari で Sticky (スクロール固定) 要素がカタカタしてお困りの時は | WP-E (仮)
スクロール位置に応じて画面内に固定されたりされなくなったり、そんな要素を Sticky 要素と呼んだりします。スクロールをトリガーに CSS の position プロパティを切り替えて実装するのが一般的なやり方と思いますが、iOS の Mobile Safari だけはスクロールを一度止めるまで position の変更が反映されない現象が起こります。 文字で説明しても全く分からない気がしていますので、次の画像を御覧ください。 こんな感じで一度スクロールをやめるまで、position: fixed に切り替わって上部に固定されるはずのその要素はまるで応答無く画面外へと消えていきます。メニューを使った例ですが、メニューでなくとも同様です。これは PC ブラウザや Android 端末では発生せず、スクロールイベントの実行頻度を下げたり、Passive Event Listeners を用い
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
