タグ

parallaxに関するjytechのブックマーク (2)

  • パララックスの実装におすすめのJavaScriptライブラリまとめ【2021年版】 | Web Design Trends

    Webデザインにおいて、定番テクニックの1つとして使われるのがパララックスです。パララックスはライブラリを使用することで手軽に導入することができ、Webサイトの印象を大きく変えることができます。 今回は、パララックスの実装におすすめのJavaScriptライブラリをご紹介します。 基的にVanilla JSで作られているで、依存関係など意識せずに利用することができます。 パララックス(Parallax)とは、英語で「視差」という意味で、Webサイトにおけるパララックスはスクロールなどの動きに合わせて要素が動くスピードをずらしたり、異なる動きを加える演出のことを指します。 数年前に大きく流行し、現在ではWebサイトの定番テクニックの1つとして定着しています。 パララックスをWebサイトに取り入れることによって、デザインに立体感や奥行きを生み出すことができ、また一味違った雰囲気のデザインを作

    パララックスの実装におすすめのJavaScriptライブラリまとめ【2021年版】 | Web Design Trends
  • プラグインで慣性スクロールとパララックスを簡単に実装する【Luxy.js】 | 東京のホームページ制作 / WEB制作会社 BRISK

    みなさんは「慣性スクロール」や「パララックス」という言葉を聞いたことがありますか? マウスで実際に動かした分よりも少し遅めにスクロールが反応し余韻が残るような効果を出す動作や、各コンテンツを異なる速度で移動させる動作などを指しています。 最近、この2つのエフェクトが実装されたウェブサイトを頻繁に見るようになっている気がしていました。自分も導入したいなと思い調べたところ、「Luxy.js」というプラグインで簡単に導入できることがわかりました。今回の記事ではその方法をまとめたいと思います。 実際に、Luxy.jsを使ったデモサイトも作りましたので、合わせてご覧ください。デモサイトは以下より閲覧いただけます。 demo 「慣性スクロール」と「パララックス」について簡単にまとめていますが、すでにご存知の方は「Luxy.jsのダウンロード」まで読み飛ばしてください。 「慣性スクロール」とはマウスで実

    プラグインで慣性スクロールとパララックスを簡単に実装する【Luxy.js】 | 東京のホームページ制作 / WEB制作会社 BRISK
  • 1