パララックスやさまざまなスクロールのエフェクトを簡単に実装できるJavaScriptライブラリ -Locomotive Scroll
Webページやスマホアプリで要素がビューポート内に入った時に、パララックスやさまざまなスクロールのエフェクトを実装できるJavaScriptライブラリを紹介します。 要素をスクロールに追従して表示させたり、視差効果を使ったパララックスやカーテン効果なども簡単に実装できます。 Locomotive Scroll Locomotive Scroll -GitHub Locomotive Scrollの特徴 Locomotive Scrollのデモ Locomotive Scrollの使い方 Locomotive Scrollの特徴 Locomotive ScrollはWebページやスマホアプリでビューポート内の要素検出と視差効果によるスムーズなスクロールを簡単に実装できるJavaScriptライブラリです。virtual-scrollにレイヤーとして構築され、要素がビューポート内に入った時にc
[JS]デスクトップとスマホの両方に対応！さまざまなパララックススクロールを実装できるスクリプト -basicScroll
Webページやスマホアプリで、ユーザーがスクロールした位置に応じてCSSアニメーションを簡単に適用できるパララックススクロールを実装する軽量スクリプトを紹介します。 単体で動作するので、非常に便利だと思います。 basicScroll basicScroll -GitHub basicScrollの特徴 basicScrollのデモ basicScrollの使い方 basicScrollの特徴 basicScrollではスクロール位置に応じてCSSを変更でき、CSSの変数を利用してアニメーションを適用します。スクロールで同時に表示された要素に対しても別々のアニメーションを簡単に設定でき、JavaScriptを使用してアニメーションをさらに制御できます。 basicScrollの特徴 他のスクリプトへの依存はゼロ CommonJSとAMDのサポート シンプルなJavaScript API ブ
![[JS]デスクトップとスマホの両方に対応！さまざまなパララックススクロールを実装できるスクリプト -basicScroll](https://cdn-ak-scissors.b.st-hatena.com/image/square/50650661e7354b2848147a7358b8dfe4f3f2931c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201801%2F2018022111-01.png)
たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方
短いCSSを書くだけで要素を特定の位置に固定できるCSSの「position: sticky」。ちょっとした工夫で実現できるおもしろい使い方をデモで解説します。 スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案（Working Draft）の段階で、将来、細かい部分に変更がないとは言い切れませんが、Edgeを含めた最新のブラウザで、ほぼサポートされています。 position: stickyの仕様 ブラウザ・サポート状況（Can I use…） フィーチャー・クエリ（@supports） と一緒に使えば、position: stickyに対応していないブラウザにも考慮した実装が可能なので、注意は必要ですがちょっとしたエンハンスメントとして使うのに良さそうです。 まずは「こんなのが簡単にできちゃい
CSSとHTMLだけで背景画像を固定しパララックスっぽくしてみる | Glow-Factory
今回は、HTMLとCSSだけでスクロール時に背景画像にパララックス効果を付けるご紹介です。 実装に関しては、とても簡単に出来ますので、どこかで使えるかなーと思いながら自分の備忘録用としても書いておきたいと思います。 特に1カラムのサイトやポートフォリオなどに使えるパララックス効果だと思いますし、ストーリー性を持たせたりすると面白そうだなーとか思いながらデモサイトを作っていました。 下記にデモサイトも用意していますので、ご参考頂ければと思います。 デモサイト 実装方法 それでは、実装方法をご説明していきたいと思います。 基本的にHTMLとCSSしか利用しないので、とてもスムーズに実装出来るかと思います。 まずは、最初にHTMLでマークアップをしていきます。 <div class="parallax parallax_img_1"> <div class="box"> <h2>Parallax
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
