Get Yourself ASweetReactNavBar🍫

ウェブページを作成するとき、私は常に最初にナビゲーションバーで作業します。これは、潜在的なルートを処理し、ページを上から下にデザインできるようにするためです。このブログでは、少し消える（そして現れる）行為を伴う、よりモダンなNavBarデザインを作成するためのきちんとした方法を紹介します。

ガラス射👓

Glass Morphicの魅力で、デザインの未来に飛び込む準備をしてください！

現代のデザイントレンドは、ガラスの形態、つまり、多くの主要なOSUIの間で普及しているすりガラスの外観です。この外観を実現するには、CSSのトリックが1つ必要です— backdrop-filter。

以下のコードは、使用する必要のあるCSSプロパティとフィルターを示しています。

backdrop-filter: blur(20px)

今、あなたは私を見ます、今あなたは見ません！✨

ナビゲーションバーが潜在的なフルビューをブロックすることなく、ユーザーにWebサイトまたはWebアプリケーションを体験してもらいたい場合、これは最適なソリューションの1つです。

下向きのスクロールで消え、上向きのスクロールで表示されるナビゲーションバーを作成します。これは、いくつかのバニラJSとReactフックを使用して実現しています。

まず、以下に示すように、とをインポートuseStateしuseEffect、状態を設定する必要があります。

import React, { useState, useEffect } from 'react';
import '../../styling/navbar.css';

const NavBar = () => {  
  const [prevScrollPos, setPrevScrollPos] = useState(0);  
  const [visible, setVisibile] = useState(0);
return (
    ...
  )
}

import React, { useState, useEffect } from 'react';
import '../../styling/navbar.css';

const NavBar = () => {  
  const [prevScrollPos, setPrevScrollPos] = useState(0);  
  const [visible, setVisibile] = useState(0);
const navbarStyles = { transition: 'top 0.6s' }
return (
    <div className='nav-bar' style={{ ...navbarStyles, top: visible ? '0' : '-100px' }}>
    ...
  )
}

デバウンス⛹🏼

クールなナビゲーションバー機能を作成するために、vanillajsで記述されたヘルパーメソッドを使用します。次に、これをNavBarコンポーネントにインポートして利用します。以下は、ヘルパーメソッドのコードです。

export function debounce(func, wait, immediate) { 
  let timeout; 
  return function() {  
    let context = this, args = arguments;  
    let later = function() {   
      timeout = null;   
      if (!immediate) func.apply(context, args);  
    };  
    let callNow = immediate && !timeout;  
    clearTimeout(timeout);  
    timeout = setTimeout(later, wait);  
    if (callNow) func.apply(context, args); 
  };
};

ここで、引数としてhandleScroll使用debounceしuseEffect、出現および消滅する行為を管理する関数を作成する必要があります。

import React, { useState, useEffect } from 'react';
import { debounce } from '../../utilities/helpers;
import '../../styling/navbar.css';

const NavBar = () => {  
  const [prevScrollPos, setPrevScrollPos] = useState(0);  
  const [visible, setVisibile] = useState(0);
const navbarStyles = { transition: 'top 0.6s' }
const handleScroll = debounce(() => {
    const currentScrollPos = window.pageYOffset;
    setVisibile((prevScrollPos > currentScrollPos && prevScrollPos - currentScrollPos > 70) || currentScrollPos < 10);
    setPrevScrollPos(currentScrollPos);  
  }, 100)
useEffect(() => {    
    window.addEventListener('scroll', handleScroll);    
    return () => window.removeEventListener('scroll', handleScroll);
  }, [prevScrollPos, visible, handleScroll]);
return (
    <div className='nav-bar' style={{ ...navbarStyles, top: visible ? '0' : '-100px' }}>
    ...
  )
}

この小さなブログが独自のナビゲーションバーを設計する際に役立ち、WebサイトやWebアプリケーションにより多くのフレーバーを与えることを願っています！