2018年05月18日(金)

どんどん簡単になっていく！最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS

• 0
• 384
• 242
• 317

アイコンをクリック・タップすると横からスライドして表示されるナビゲーション、サムネイルをタップするとズームして次のコンテンツを表示、今までとは異なるうるさくないパララックスエフェクト、ほかにもスライダーやアコーディオンやモーダルなど。
最近のWebページやスマホアプリでよく見かけるアニメーションを伴ったさまざまなUIが簡単に実装できる超軽量スクリプトを紹介します。

他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。

LayerJS
LayerJS -GitHub

LayerJSの特徴

LayerJSは外部ファイルを加え、あとはHTMLにdata属性を与えるだけの簡単実装で、さまざまなUIパターンを簡単に実装できます。

author:

コリス

http://coliss.com

2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログ

オリジナルサイトで続きを読む

今日のwebデザイン記事ランキングを見る

         

‹ PREV

               

デザインする上で知っておきたい「近接」「整列」「反復」「対比」の4原則

         

NEXT ›

               

デザインやイラストの定番から最新のテクニックまで、この一冊でしっかり学べるPhotoshopのテクニック集

関連記事

• あなたは大丈夫？Webデザインが進化したからこそ「やってはいけない」5つのこと
• CSSのclip-pathプロパティでいろいろ簡単に実装できる、便利な使い方と実装のポイント
• 2020年、Web制作・デザインに役立つ記事の総まとめ
• 2019年総まとめ: Pocketにたくさん登録されたWeb制作に役立つ記事のまとめ
• 【2019年4月版】役立つ新しいスキルをマスターしよう。

Ads

2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログコリスの記事『どんどん簡単になっていく！最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS』についてまとめています。

この記事は特にレスポンシブ・javascript・アニメーション・jQuery・アイコン・SEO・Mac・LINE・UI・アプリについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のコリスで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとコリスの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。