What's New Qiita

20201025のCSSに関する記事は3件です。

  • 投稿日：2020-10-25T23:36:48+09:00

【初心者向け】スクロールの途中からヘッダーを出す方法

どうも7noteです。スクロールしたら出てくるヘッダー作ります。

最初は大きく写真を見せて、スクロールした後にヘッダーを表示させたい時の動きです。

※jQueryを使っています。jQeryってなんだ？って方はこちら

ソース

index.html
<!-- html、長いですがほとんど意味のあまりないソースです。 -->
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<header>
  <p>ここがヘッダーです。</p>
</header>
<div class="mv">
  <img src="sample.jpg" alt="メインビジュアル">
</div>

<main>
  <div class="step1">
    <h2>ステップ1</h2>
    <p>こんにちは。こんにちは。こんにちは。こんにちは。</p>
  </div>
  <div class="step2">
    <h2>ステップ2</h2>
    <p>コンバンワコンバンワコンバンワコンバンワ</p>
  </div>

  <!-- ここから先はスクロールさせるための尺稼ぎ -->
  <div class="stepx">
    <h2>ステップx</h2>
    <p>〜〜〜〜〜<br>
    〜〜〜〜〜<br>
    〜〜〜〜〜<br>
    〜〜〜〜〜<br>
    〜〜〜〜〜</p>
  </div>
  <div class="stepx">
    <h2>ステップx</h2>
    <p>〜〜〜〜〜<br>
    〜〜〜〜〜<br>
    〜〜〜〜〜<br>
    〜〜〜〜〜<br>
    〜〜〜〜〜</p>
  </div>
  <div class="stepx">
    <h2>ステップx</h2>
    <p>〜〜〜〜〜<br>
    〜〜〜〜〜<br>
    〜〜〜〜〜<br>
    〜〜〜〜〜<br>
    〜〜〜〜〜</p>
  </div>
  <div class="stepx">
  <h2>ステップx</h2>
    <p>〜〜〜〜〜<br>
    〜〜〜〜〜<br>
    〜〜〜〜〜<br>
    〜〜〜〜〜<br>
    〜〜〜〜〜</p>
  </div>
</main>
style.css
header {
  width: 100%;            /* 要素を幅いっぱいにする */
  background: #555;       /* 背景色を濃いグレーに指定。半透明の「rgba(0,0,0,0.5)」でもいいかも */
  display: none;          /* ページ読み込み時は非表示にする */
  position: fixed;        /* ヘッダーを絶対位置にする。スクロールしても固定 */
  top: 0;                 /* 上から0pxに指定 */
  left: 0;                /* 左から0pxに指定 */
  padding: 10px 20px;     /* ちょっと余白をとっとくと綺麗 */
  box-sizing: border-box; /* paddingを含んで幅100%ちょうどにするため */
}
header p {
  color: #fff;            /* 文字色を白にする */
}

.mv {
  width: 100vw;           /* ウィンドウサイズ横幅いっぱいに表示 */
  height: 100vh;          /* ウィンドウサイズ縦幅いっぱいに表示 */
}

.mv img {
  width: 100%;            /* 幅いっぱい */
  height: 100%;           /* 高さいっぱい */
  object-fit: cover;      /* background-size: cover;みたいに全面に収まるように画像を表示（IEでは効かないよ。） */
}
script.js
$(window).scroll(function () {           /* スクロールされた時 */
  var pos = $('main').offset();          /* mvを過ぎたmainタグの高さを取得して変数[pos]に格納 */
  if ($(this).scrollTop() > pos.top) {   /* 変数[pos]より、スクロールされていたら */
    $('header').fadeIn();                /* ヘッダーをふわっと表示 */
  } else {                               /* それ以外の場合 */
    $('header').fadeOut();               /* ヘッダーをふわっと非表示 */
  }
});

出る時はフェードインで出てくる

step1.png

step2.png

step3.png

解説

動画が重くて動画が出せなかったのですが、ふわっとヘッダーが出ます。
pos.topでmain要素の高さを取得していますが、任意の高さをpx指定することもできます。

htmlがスクロールの関係上長くなっていますが、javascript自体はコンパクトにかけるので難易度は優しい方かなと思います。

他にもいろいろヘッダーの出し方あるので、今後の記事でも書いていけたらとおもっています。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-25T22:12:01+09:00

「トップへ戻る」ボタンと「100vhだけ・一番下まで進む・戻る」ボタン

「トップへ戻る」ボタンと「100vhだけ・一番下まで進む・戻る」ボタン

jQueryの「トップへ戻る」ボタンのやり方は鬼のように出てくるのですけど、
下に行くのも、マウスホイールぐるぐる回して地味にめんどくさいときありませんか？
ぼくはめんどくさいときがあったのでやってみました。


See the Pen
pobezbL by sarap422 (@sarap422)
on CodePen.


似たようなこと考えた方はやはりいたようで、
「scrollBottom」で検索するとすぐ出てきしたが、
なかなかわからなかったのは、「100vh」だけページ送り・戻りする方法。

結論として言うと、「100vh = window.innerHeight」で、

// 一番下まで
document.body.clientHeight
// 100vh下
window.pageYOffset + window.innerHeight
// 100vh上
window.pageYOffset - window.innerHeight

で、実装することができました。わーい

参考

JavaScriptで画面サイズを取得・変更する方法
https://uxmilk.jp/28500

ついでに「mix-blend-mode」というのが便利そうだったので、
調べてみましたが「exclusion」が楽そうだなーと思いました。

See the Pen ZEOLZwx by sarap422 (@sarap422) on CodePen.

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-25T03:18:12+09:00

【Swiper】左揃え、それぞれのスライド幅が異なるスライダーの実装

Swiper v6.3.4を使用しました。
https://swiperjs.com/

実現したいこと

  • 左でいい感じにスナップしてほしい
  • 幅はCSSで指定せず、中身によって変化するようにしたい

See the Pen Swiper Left justify / demo by YUU (@YUUMU) on CodePen.

少し説明

補足

  • width: fit-content; はIE対応してません
  • スライド幅が可変でなくていいなら、CSSで各スライドのwidthと最後のスライドのmargin-rightを指定すれば同様になります

使用例

See the Pen Swiper Left justify / sample by YUU (@YUUMU) on CodePen.

スマホ向けページのキャラクター紹介とかなら使えなくはないかも...？

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧