コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

トップ > Javascript > Atropos.jsで実現する、もっとスクロールしたくなるWebデザイン

Atropos.jsで実現する、もっとスクロールしたくなるWebデザイン

Javascript パララックス

Exploring The Creative Potential Of Atropos.Js For Web Design

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

デザイン愛好家の皆さん、気を付けて乗ってください!私たちは、Webデザインにおける無限の創造性の可能性を探求するための素晴らしい冒険に乗り出します。この冒険の目的は、人気映画「ゲーム・オブ・スローンズ」のキャラクターギャラリーをThronesAPIから取得し、キャンバスとしてこのライブラリの魅力的な可能性を紹介することです。革新とインスピレーションの旅に出かけましょう。

Atropos.jsの理解

Atropos.jsは、スクロールベースのアニメーションでWebデザインを高めるための軽量で多機能なJavaScriptライブラリです。パララックスエフェクト、スクロールトリガーアニメーション、React、Vue.jsなどの人気フレームワークとのシームレスな統合などの機能があります。

このライブラリを使えば、開発者は簡単にダイナミックなスクロールエフェクトを生み出し、没入型のユーザーエクスペリエンスを作ることができます。その機能は、Web デザイナーが視覚的に魅力的でエンゲージングなWebサイトを作り、長く印象に残るようにサポートします。

Web 開発者にとってのAtropos.jsの重要性

  • このライブラリは、カスタムアニメーション、トランジション、エフェクトを実装できるようにすることで、ユニークで印象的なユーザーエクスペリエンスの作成を容易にし、開発者がWebサイトを差別化し、競争の激しいオンライン環境で目立つようにします。
  • React、Vue.js、Angularなど、さまざまなフレームワークやライブラリと互換性があるため、幅広いWeb 開発プロジェクトに適用でき、開発者に柔軟性と実装の便利さを提供します。
  • このライブラリのパフォーマンス最適化機能(レイジーローディングやピクチャープレロードなど)により、Webサイトの読み込み速度が向上し、レスポンシブ性が高まり、ユーザーにより効果的で快適なブラウジング体験を提供できます。
  • スクロールギャラリー以外の場所でも、インタラクティブメニュー、注目のポートフォリオなど、このライブラリのデザイン柔軟性を活かして使用できます。
  • 開発者は、このライブラリを使ってパララックスエフェクト、魅力的なスクロールトリガーアニメーション、その他の要素をすばやくWebサイトに追加でき、サイトの視覚的魅力を高め、より印象に残るものにすることができます。

Atropos.jsによるスクロールベースのギャラリーの構築

魅力的なスクロールベースのギャラリーを作成するため、このプロジェクトではAxios、React、Atropos.js、そして公開データソースのThronesAPIを使用しています。これは、プロジェクトの目標を達成し、楽しいユーザーエクスペリエンスを提供するために、さまざまな技術を無缷的に統合することを意味します。

ThronesAPIは映画のキャラクターに関する広範な情報を提供しているため、このプロジェクトにとって欠かせないツールです。このプロジェクトでは、このAPIを利用してこれらのキャラクターを魅力的なギャラリーで動的に表示し、このライブラリがWebデザインにもたらす創造的な可能性を示しています。

プロジェクト環境のセットアップ

プロジェクトを始めるには、Viteを使って環境を構築します。以下のコマンドを入力してください。

npm create vite@latest

プロジェクトに名前を付けて実行します。完了したら、このプロジェクトに不可欠なAtropos.jsパッケージをインストールします。

npm i atropos

パッケージがインストールされたら、次にプロジェクトにインポート/追加する必要があります。このライブラリの機能をインポートするには、Vanilla JavaScriptを使用している場合は以下のリンクをスタイルシートに追加するだけです。

<link rel="stylesheet" href="path/to/atropos.css" />

このプロジェクトではReactを使用するので、App.jsファイルに移動してこのライブラリの機能をインポートできます。

import "atropos/css";

このプロジェクトで重要な別のパッケージはAxiosです。このパッケージを使ってThronesAPIからデータ(映画のキャラクター)を取得し、スクロールギャラリーに表示します。インストールするには、以下のコマンドを入力します。

npm i axios

インストールしたら、App.jsファイルにインポートして機能を追加することを忘れずに。

import axios from "axios"

スクロールベースのギャラリーの実装

ここで、ThronesAPIから映画のキャラクターデータを取得し、ギャラリーを構築することができます。

プログラムのスクロールセクション内で、状態変数を作成し、名前を付けてから配列を受け取るように設定します。これにより、ThronesAPIから取得したすべてのキャラクターデータが配列内に便利に保持されます。

次に、useEffectフックを含め、このフック内でAxiosを使って必要なデータを取得するAPIコールを行います。

const ScrollSection = () => {
  const [actors, setActors] = useState([]);
  // GETリクエストを行う
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(
          "https://thronesapi.com/api/v2/Characters",
        );
        setActors(response.data);
      } catch (error) {
        console.error(error);
      }
    };
    fetchData();
  }, []);
  console.log(actors);
};

データは上記のようにresponse変数に格納されます。response変数からデータを抽出するには、先ほど作成した状態変数にデータを格納し、すべてが正しく動作するか確認します。

確認できたら、次はキャラクターデータを表示し、Atropos.jsでラップします。

まず、ファイルのreturn文に移動し、div要素の中で、前に作成した応答データを保持する状態変数の内容をマップします。次に、キー(データセットからIDを使用する)を持つdiv要素を追加します。次に、この div 要素の中でギャラリーに必要なキャラクターデータを表示できます。

return (
  <div className="grid grid-cols-3 gap-4">
    {/* */}
    {actors.map((casts) => (
      <div
        key={casts.id}
        className="rounded overflow-hidden w-81 h-95 shadow-md mb-5 text-white"
      >
        <img src={casts.imageUrl} className="w-full h-60 object-cover" />
        <div className="p-3">
          <p className="font-bold text-2xl">{casts.fullName}</p>
          <p className="block text-grey-500 text-xl">{casts.title}</p>
        </div>
      </div>
    ))}
  </div>
);

このプロジェクトでは、キャラクターの名前、役職、写真のみを表示することにします。

ここでこのライブラリをプロジェクトで使用する必要があります。表示されたデータをAtropos要素でラップし、この要素内で機能を追加できます。

<Atropos
  activeOffset={40}
  shadowScale={1.05}
  onEnter={() => console.log("Enter")}
  onLeave={() => console.log("Leave")}
  onRotate={(x, y) => console.log("Rotate", x, y)}
  duration={100}
  highlight={true}
>
  <img
    src={casts.imageUrl}
    className="w-full h-60 object-cover"
    data-atropos-offset="5"
  />
  <div className="p-3" data-atropos-opacity="1;0">
    <p className="font-bold text-2xl text-[#00df9a]">{casts.fullName}</p>
    <p className="block text-grey-500">{casts.title}</p>
  </div>
</Atropos>;

上記のように、このライブラリの属性を使ってギャラリーを強化しました。使用した属性には以下のようなものがあります。

  • activeOffset: 要素がビューポートの境界から有効になるオフセット(ピクセル)を示します。
  • shadowScale: 画像に適用される影の効果のサイズを変更します。
  • onEnter: 要素がビューポートに入ったときに呼び出されるコールバック関数です。
  • onLeave: 要素がビューポートから出たときに呼び出されるコールバック関数です。
  • onRotate: ユーザーが要素を回転させたときに呼び出されるコールバック関数です。
  • duration: トランジション効果の継続時間(ミリ秒)を示します。
  • highlight: アクティブな要素をハイライトするかどうかを定義します。

さらに、data-atropos-opacityという属性がキャラクターの詳細に追加され、スクロールダウンするとテキストの不透明度が徐々に下がるように設定されています。上記のように、img要素にdata-atropos-offsetという属性が追加されており、ユーザーがスクロールしたときにわずかにオフセットされて画像がアクティブになります。

このライブラリにはこれらの属性をはじめ、さまざまな属性が用意されています。これらはドキュメンテーションで確認でき、探求することができます。上記のように、画像とキャラクターデータにカーソルを合わせると、このライブラリの機能と属性が発揮され、画像ギャラリーが目を引く表示になります。

結論

ご覧のとおり、このプロジェクトはこのライブラリがWebデザインに生気を吹き込む様子を見事に紹介しています。その機能を活用して、映画のキャラクターの魅力的なスクロールベースのギャラリーを作り上げました。この旅は、このライブラリがユーザーエクスペリエンスを高め、Webデザインに創造性とダイナミズムをもたらす素晴らしい方法を強調しています。

©コハム