今回はGSAPのScrollTrigger.jsを使ったスクロールアニメーションについて説明します。 前提条件は以下 複雑なアニメーションをしたいアニメーションをサクサク動かしたいCSSは操作せず、JavaScriptだけでアニメーションさせたい 説明環境は以下 macOS Catalina v10.15.5Visual Studio Code v1.57.0
GSAPのScrollTrigger.jsを使ったスクロールアニメーションを実装する方法
今回はGSAPのScrollTrigger.jsを使ったスクロールアニメーションについて説明します。 前提条件は以下 複雑なアニメーションをしたいアニメーションをサクサク動かしたいCSSは操作せず、JavaScriptだけでアニメーションさせたい 説明環境は以下 macOS Catalina v10.15.5Visual Studio Code v1.57.0
無限スクロール vs ページネーション：それぞれの特徴と使い分け
無限スクロールのメリット １．ユーザーを没頭させ、コンテンツを発見させる データ探索の主要な手段としてスクローリングを使う場合、無限スクロールはユーザーをwebページにより長く滞在させ、よりエンゲージメントを高めることができます。ソーシャルメディアの人気に伴い大量のデータが消費されている中、無限スクロールは、ページが前もって読み込まれるのを待つことなく、膨大な情報を閲覧するための効率的な方法です。 無限スクロールは、「発見」のためのインターフェースであれば、ほぼ必須の機能です。ユーザーが特定のものを探していない場合、気に入った一つのものを探すために大量のアイテムを見る必要があります。
スクロールした時に面白いエフェクトを出すためのアイデアまとめ
作成：2016/09/12 Web制作 > スクロールを行ったときに、どれくらいスクロールしたのか知らせるものや、スクロール感がユーザーに伝わりやすい実装方法などをまとめました。 製品やサービスを解説するようなハウツーページや、トップページやサービスページで使いたいエフェクトのアイデア。 エンジニア速報は Twitter の@commteで配信しています。 インジケーター 進捗を示すインジケーターをヘッダー・サイド・フッター部分に固定してあるものをピップアップ。 ヘッダー どれくらいスクロールされたのか進捗状況を線で表示するインジケーター。コンテンツの量をさり気なく知らせることができるのがよいですね。CSSのみで実装できます。 See the Pen CSS only scroll indicator by Mike (@MadeByMike) on CodePen. CSS only s
Web制作者なら知っておきたい！2015年に流行ったWebデザイン - MdN Design Interactive
デザインには流行り廃りがある。Webデザインの世界においても同様だ。流行したデザインが必ずしも良いとは限らないが、デザインのトレンドを知っておくことで足並みをそろえることができるし、そこに新たな発見があるかもしれない。また、場合によってはWeb制作にうまく盛り込むことにより、効果的なサイトにできる可能性も高い。進化の進むWeb業界においては、トレンドを知っておくことは重要なことなのだ。今回は、2015年において多く取り入れられたWebデザインをいくつかピックアップしてみた。 スクロール型とボタン型を取り入れたハイブリッドなサイト。会社紹介がサックと読める使用になっている。数年前から取り入れられてきた手法であるが、まだまだ縦スクロール型のWebサイトは衰えを見せない。ページの設定には、主にボタンでページを移動して閲覧させる方法と、スクロールさせて1ページにまとめる方法とに分けられる。 1ペー
【iOS】スクロール可能なメニューバーを持つViewControllerをオープンソースとして公開しました | PSYENCE:MEDIA
【iOS】スクロール可能なメニューバーを持つViewControllerをオープンソースとして公開しました 大島 雅人 2015.01.15 677 65200250162 概要 スクロールできるメニューバーとスワイプで画面を切り替えることができるViewControolerのコンテナを、オープンソースとして公開しました。 recruit-mp/RMPScrollingMenuBarController | GitHub We published RMPScrollingMenuBarController by open source. RMPScrollingMenuBarController has a scrollable menu bar, and multiple view controllers for iOS. ニュース系アプリでよく使われているUIで、弊社の料理サプリのiO
[JS]最近よく見かける1ページ垂直スクロールコンテンツで、スクロール位置を自動補正するスクリプト -windows.js
スクロールしすぎも補正 windows.jsの使い方 実装は簡単で、既存のコンテンツにclassを加えるだけで適用できます。 Step 1: HTML HTMLは各コンテンツを配置しているdivやsectionにclassを加えるだけです。 classは変更可です。 <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> Step 2: 外部ファイル 「jquery.js」と当スクリプトをhead内に記述します。 <script src="http://cdnjs.cloudflare.com/aja
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryいらず！スクロールについてくるCSS『position:sticky;』の使い方と、ついてこない時の対処法