パララックスもこれで簡単に！ HTMLやCSSを変更せずにシンプルに実装できるスクリプト -simpleParallax.js
ユーザーのスクロール操作に合わせて視差効果を与えるパララックスのエフェクトをシンプルに実装できる軽量のバニラJavaScriptのライブラリを紹介します。 実装は非常に簡単で、HTMLやCSSを変更せずに、パララックスのさまざまなエフェクトを実装できます。 simpleParallax.js simpleParallax.js -GitHub simpleParallax.jsの特徴 simpleParallax.jsのデモ simpleParallax.jsの使い方 simpleParallax.jsの特徴 simpleParallax.jsは、<img>で実装された画像にパララックスアニメーションを追加する、非常にシンプルで軽量なバニラJavaScriptのライブラリです。
[JS]このスクリプト一つで、さまざまな用途に合わせたスライダーが実装できて便利 -Tiny Slider
スライダーとしてのあらゆる機能を備えた単体で動作する軽量のスクリプトを紹介します。シンプルなHTMLでスライダーを実装でき、ベーシックなスライダーからフルカスタマイズされたスライダーまで、簡単に実装できます。 Tiny Slider Tiny Slider -GitHub Tiny Sliderの特徴 Tiny Sliderのデモ Tiny Sliderの使い方 Tiny Sliderの特徴 シンプルなHTMLで、高性能なスライダーを実装。 他のJavaScript, CSSへの依存は無し。 さまざまなスライダーに対応。水平・垂直・自動再生など、カスタマイズも簡単。 矢印キー、ドラッグやタッチ操作にも対応。 レスポンシブ対応、ブレイクポイントの設定も簡単。 CSS3対応のすべてのモダンブラウザをサポート。 古いブラウザにはCSS2のフォールバックでサポート。 サポートブラウザ Firefo
![[JS]このスクリプト一つで、さまざまな用途に合わせたスライダーが実装できて便利 -Tiny Slider](https://cdn-ak-scissors.b.st-hatena.com/image/square/f9e39760f07a971737ce07c2990fc51b6bdbcff7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017110711.png)
Liquid Distortion Effects | Codrops
A slideshow with liquid distortion effects in WebGL powered by PixiJS and GSAP. Today we’d like to share an interesting distortion effect with you. The main concept of this demo is to use a displacement map in order to distort an underlying image, giving it different types of effects. To demonstrate the liquid-like transitions between images, we’ve created a slideshow. What a displacement map gene
スマートフォンで写真を大きく表示させる SmartPhoto.js をリリースしました | JavaScript | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル
スマートフォンで写真をタップすると、もともと表示されているサイズより小さく表示されるような体験をしたことはありませんか？ 2017年にリリースした SmartPhoto.js は、スマートフォンで写真を大きく見たいを実現するために用意したライブラリーです。 弊社の Github 公開しているライブラリの中では、一番 ★ の多いライブラリーで、2024年5月6日現在で 894 となっています。よろしければ https://github.com/appleple/SmartPhoto の右上にある ★ のクリックをお願いします。 SmartPhoto.js では、大きく表示させることを一番に考え、写真の短辺側が画面の最大になるところまで拡大表示されるフォトビューアーとして作られました。下のデモコンテンツでは、長辺側ははみ出して表示されることになりますが、ドラッグして動かしたり、ピンチイン・ピン
[JS]ページ内アンカーでスクロール時のアニメーションの種類やスピードが調整できる超軽量ライブラリ -MoveTo
ページ内アンカーに移動させる時に、アニメーションでスムーズにスクロールさせるスクリプトをいろいろありますが、実装が簡単で、微調整も簡単に設定できる超軽量（2kb）のスクリプトを紹介します。 等速のアニメーション、緩和のアニメーション、到達地点の補正なども設定できます。
![[JS]ページ内アンカーでスクロール時のアニメーションの種類やスピードが調整できる超軽量ライブラリ -MoveTo](https://cdn-ak-scissors.b.st-hatena.com/image/square/a8761de4d4ab1b1f75f6c0e58a3cb5ec711873d6/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017032303.png)
javascriptのライブラリを一覧にしてまとめてみた
自分用にまとめていたけどせっかくなので公開。 なるべくフロントエンドで完結してライセンスも使いやすいものを選択したつもり。 全部で100個超。 １番目のURLが本家 or GitHubのページ、2番目のURLが比較的わかりやすいと思った日本語の解説ページになっています。 Node.jsのライブラリもまとめたので合わせて見るといい感じ accounting.js金額のフォーマットを行う カンマ区切りや小数点n桁までなど https://josscrowcroft.github.io/accounting.js/ ace.jsテキストエディタ ハイライト・文字列畳み込み・ショートカットキー 組み込むのが簡単で機能もひと通り揃ってる https://ace.c9.io http://qiita.com/naga3/items/1bc268243f2e8a6514e5 AlertifyJSダイアロ
[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ
縦長ページのスクロール エフェクトで再スクロールや上にスクロールする時にも適用したい、高さ指定のない画像を読み込む時にスクロールバーががっくんがっくんするのを避けたい、美しいレイアウトを簡単に実装したい、そんな便利でちょっとずるいスクリプトを紹介します。 ScrollTrigger ScrollTriggerの使い方 Scrollbear Scrollbearの使い方 Barba.js Barba.jsの使い方 Isometric Grids Isometric Gridsの使い方 Multiple.js Multiple.jsの使い方 anime.js anime.jsの使い方 ScrollTrigger ユーザーがスクロールすると、要素にアニメーションが適用されるスクリプトはいくつかありますが、その多くは一度アニメーションが適用されると再び適用されません。下にスクロールしてアニメーショ
![[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/28da41636539dd792d07680b0ac53af6ec4dba84/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016071113.png)
Anime.js | JavaScript Animation Engine
All-in-one animation engine. A fast and versatile JavaScript library to animate the web.
CSS初心者にも簡単に使える！スクロールに連動するさまざまなエフェクトを実装できるスクリプト -AOS
スクロールすると、コンテンツをふわっと表示させたり、パタリと回転させたり、ズームさせたり、軽快なアニメーションを使ったエフェクトを実装できるスクリプトを紹介します。 jQueryは不要で、非常に軽量のライブラリです。 実装は簡単で、外部ファイルを2行記述して、classを与えるだけ。
スクロールに合わせてヘッダーを変化させる - JavaScriptテックラボ - [SMART]
概要 ヘッダを上部に固定しつつ、スクロールに合わせて拡大・縮小させる方法を紹介します。 デモ ダウンロード ※ファイルの場所は上記サイトの resize-header-on-scroll フォルダです。 HTMLマークアップはヘッダー部のHEADER要素とH1要素、コンテンツ部のMAIN要素のみです。 HTML <header> <h1 id="site-logo">smart</h1> </header> <main id="main"> </main> スクロールの位置によるヘッダーの拡大・縮小の仕掛けは簡単で、スクロール位置によってHEADER要素に拡大・縮小用のクラスを追加・削除します。 あとはCSSのアニメーションをHEADER要素に付けてあげるだけです。 スクロール位置の取得は scrollTop() を使います。 $(window).scrollTop() CSSはHEADE
![スクロールに合わせてヘッダーを変化させる - JavaScriptテックラボ - [SMART]](https://cdn-ak-scissors.b.st-hatena.com/image/square/efeb6493234f33406d242c048873a805fca99c63/height=288;version=1;width=512/https%3A%2F%2Frfs.jp%2Fwp-content%2Fthemes%2Fsmart%2Fogpimage.png)
Hammer.jsを使って簡単にタッチジェスチャーを実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 毎朝寒さで布団からなかなか抜け出せません、エンジニアのゆたろです。 みなさん、スマホのタッチジェスチャーの実装につまずいたことはありませんか？ 今回は、そんなときに便利なライブラリ「Hammer.js」をご紹介します。 hammer.jsを使ってみよう http://hammerjs.github.io/ まずは、上のリンクよりプラグインをダウンロードしちゃいましょう！ https://github.com/hammerjs/jquery.hammer.js ここではjQqueryプラグインとして使いたいので、jquery.hammer.jsも合わせてダウンロードしてください。 ダウンロードしたファイルとjQueryをHTMLに読みこませます。 <script src="jquery.js"></script> <script src="hammer.js"></script
Spirit - The animation tool for the web
SpiritThe ultimate tool to create high-quality animations directly in the browser. Important Notice: I want to extend my deepest gratitude to everyone who has supported Spirit over the years. After careful consideration, I have made the difficult decision to discontinue Spirit as a service. Read more ...
[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ
縦長のランディングページなどで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。 プロダクトやサービスを魅せるスクリプト、さりげないけど気持ちいいアニメーション、縦長ページならではのナビゲーション、レイアウト補助など、全コンテンツを1ページにおさめ、スクロールを前提にしたページならではの面白くて役立つスクリプトが満載です。
![[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/12d806b696946054b69c1dc3670ffa2dc1985773/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015112505.png)
ドロップダウン実装を簡単にサポートしてくれるDorp.js
手軽にドロップダウンの実装をサポートしてくれるjsのご紹介。 サンプルページのソースを見ればほとんどわかりますが、ドキュメントファイルは一度目を通しておくといいかもしれません。 ドロップダウンに関する動作 サイズバーもお手軽実装。 各種動作設定も可能。 一番上のシェアボタンはクリックしてメニューを開きます。 中央の顔アイコンはマウスオーバー。 設定項目はドキュメントファイルに記載されています。英語読めなかったら翻訳で普通に読めるレベルです。 ドロップダウンメニューをサポートしてくれるDrop.js ダウンロード、各種ページは以下からどうぞ。 動作確認、デモページドキュメントページダウンロードページ手軽に導入したいなーっていう時に思い出してみてください。 それでは、また。
HTML版簡易ローディング画面設置ｊQuery - ホームページ制作やリニューアル印刷物デザインなら大阪のWPC
HTML版簡易ローディング画面設置ｊQuery 今回ご紹介するのは、ページの読み込み完了までローディング画面を表示し、完了後コンテンツを表示する方法です。 大きな画像を多用していたり、1ページあたりの容量が大きくなった場合など、読み込みが完了するまで結構な時間がかかってしまうページでの訪問者のイライラを解消する選択肢の一つにいかがでしょうか。 HTMLで作成したページでローディング画面を表示させ、ページ全体が読み込まれてから表示させる方法を、2GRAVITY(ニジュウリョク)様が、とてもわかり易く説明していただいているのでご紹介致します。 Flashページで読み込み時に「loading・・・」等と表示されるのをよく見かけますよね。 javascript（jQuery版）を使用すると、HTMLで作成したページでも同じようなことが表現可能になります。 【html】記述例 <body> <div
[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ
コンテンツの邪魔にならず操作も快適な画像拡大、スクロールすると一旦ヘッダが隠れるけど上にスクロールすると出現、サーチアイコンをクリックするとにょい～ん伸びて検索ボックスになるなど、ユーザビリティ・アクセシビリティに配慮され、タッチデバイスやレスポンシブ対応にも一役買う優れもののスクリプトを紹介します。
![[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/0bc338c3b019bd35cf84848dd648330728cc081c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015082406.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Moving Letters
[JS]最近のWebサイトで見かける気持ちいいアニメーションや便利な機能が実装できる、使いやすいスクリプトのまとめ![[JS]最近のWebサイトで見かける気持ちいいアニメーションや便利な機能が実装できる、使いやすいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/fe7aba32b3039602901d0b81d414d66c71a445ea/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016031405.png)
最近のWebサイトで使われている、レスポンシブ対応のページレイアウトに役立つスクリプトのまとめ
PC
