パララックスもこれで簡単に！ HTMLやCSSを変更せずにシンプルに実装できるスクリプト -simpleParallax.js
ユーザーのスクロール操作に合わせて視差効果を与えるパララックスのエフェクトをシンプルに実装できる軽量のバニラJavaScriptのライブラリを紹介します。 実装は非常に簡単で、HTMLやCSSを変更せずに、パララックスのさまざまなエフェクトを実装できます。 simpleParallax.js simpleParallax.js -GitHub simpleParallax.jsの特徴 simpleParallax.jsのデモ simpleParallax.jsの使い方 simpleParallax.jsの特徴 simpleParallax.jsは、<img>で実装された画像にパララックスアニメーションを追加する、非常にシンプルで軽量なバニラJavaScriptのライブラリです。
simpleParallax.js - a JavaScript library for parallax effects
orientation-String-see exampleThis is the orientation (or direction) of the parallax effect. Choose up and when scrolling down, the image will translate from the bottom to the top (so the image will translate up). When scrolling up, the image will translate from the top to the bottom. Same logic apply for all others orientations (right, down, left, up left, up right, down left or down right). When
WEBLIFE（ウェブライフ）｜Shopify構築・運用支援やCMSを中心としたSaaS事業および映像/Web制作ディレクション
Shopifyを利用したECの構築・アプリ開発や、高セキュリティのホスティングサーバーを内包したCMSを提供。数多くの実績をベースとした運用支援やECのプランニングなど、進化し続けるWebに最適なソリューションを提案します。
30+ Useful Pure CSS Code Snippets - 1stWebDesigner
In this post, we’ve rounded up a collection of useful pure CSS code snippets for elements that are commonly used when designing and developing a website. We’ve included a few that may be less common, but might be useful for you if you are looking for a way to level up or add interest in your project. From parallax to animations to tabs and accordions, this list should be helpful for you to refer t
CSSだけでヒーローイメージのセクションにシンプルなパララックス効果
Result CSSだけで簡単なパララックス効果を出そう、というもの。既にありふれた情報かもしれませんが。 内容としては3D空間を作り、ヘッダに疑似要素を作って背景画像を設定、z軸に沿ってオブジェクトを遠ざけるよう設定します。 header::before { transform: translateZ(-4px); } header div { transform: translateZ(-2px); }また、3D空間の中でフラット描画されるよう、親要素にtransform-styleを設定しておきます。 header { transform-style: preserve-3d; }これだけだと単に縮小された状態になってしまうのでscaleで戻してあげる必要があります。 scaleで戻すには計算が必要です。Googleの記事では以下の計算法が使われています。 scale = (pers
CSSのみでスクロール時に各セクションを固定するパララックス
Result タイトルでうまく説明できませんでしたけどこういうやつです パララックスの表現法が出始めた時によく見かけるようになってから今も割と見かけるのである程度定着してる感も無くはないですね で、これなんですがそう言えばposition: sticky;で出来ますよね、という内容です css.container {/*高さを画面一杯にしておく*/ height: 100vh; overflow-x: hidden; } .slide {/*position: sticky;を含めてスタイリング。background-size: cover;を忘れずに*/ position: -webkit-sticky; position: sticky; top: 0; height: 100vh; display: flex; justify-content: center; align-items
パララックス効果を与えるとても簡単なJavaScriptライブラリ「simpleParallax.js」の使い方
パララックス効果を与えるとても簡単なJavaScriptライブラリ「simpleParallax.js」の使い方 パララックス効果は数年前にトレンドとなって、いまでもWebデザインの表現に欠かせない要素のひとつであるが、しかしその表現はさまざまで、複雑さを増している印象がある。 そんな影響を受けてかパララックスライブラリも高機能になっていき、使いにくい状況になってしまっている。さらにサイト設計に関わるJavaScriptフレームワーク(ライブラリ)との依存性も考えなければならない。 そのような訳で、パララックスの実装に苦手意識をもっていないだろうか？できれば、「パララックス効果を含んだデザインを入稿しないでね」って具合に。 でも大丈夫。実装がとても簡単なJavaScriptライブラリがある。 このエントリーでは、パララックス効果を与えるJavaScriptライブラリ「simpleParal
インタラクティブにアニメーションする背景を作成できるWebアプリ・「Naker.Back」
Naker.Backはインタラクティブにアニメーションする背景を作成できるWebアプリです。 たまに見かけるやつですね。もともと動いてるけどマウスを乗せると動きに応じてパララックスな演出をする、みたいなのとかを作れる、というもの 僕の語彙力がアレなので見てもらった方が早いですね サンプル Naker.Backで作ったサンプルです。用意されたマテリアルを使い、設定は何も考えず作ったもので2分もかかっていません 使い方は吐き出されたコードに指定したidの要素で包括するだけです。例えば上のデモなら、作成時にtestというIDを指定したのでid=”test”という要素の中にコードをコピペすれば表示されます マテリアルは任意のものを使う事も出来ます。設定は動く方向や背景色、グラデーションも可能、マテリアルの数や動作スピードなどの設定が可能です 難点は吐き出されるコードがNaker.BackのCDNを
パララックスやさまざまなスクロールのエフェクトを簡単に実装できる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)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近のWebサイトで見かけるヘッダのアイデア・実装方法のまとめ