これを使うとスクロールに連動したアニメーションが簡単に！わずか2KBの超軽量JavaScriptライブラリ -Sal.js
スクロールに連動して、ページ上の要素をアニメーションで表示するライブラリはいくつかあります。その中でもかなりの超軽量で、他スクリプトへの依存が一切ないスクロールアニメーションのライブラリを紹介します。 しかも実装は超簡単。手間がかかりそうと思っていた人は、ぜひお試しを。 Sal.js Sal.js -GitHub Sal.jsの特徴 Sal.jsのデモ Sal.jsの使い方 Sal.jsの特徴 vanilla JavaScript vanilla JavaScriptで書かれており、他のスクリプトへの依存はありません。 超軽量 2.26KBの超軽量スクリプト。 パフォーマンス パフォーマンスにフォーカスして設計。 実装が簡単 外部ファイルを加えて、HTMLにdata属性を加えるだけの簡単実装。 ライセンス MITライセンスで、個人でも商用でも利用できます。 Sal.jsのデモ デモでは、S
スマートフォンで写真を大きく表示させる SmartPhoto.js をリリースしました | JavaScript | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル
スマートフォンで写真をタップすると、もともと表示されているサイズより小さく表示されるような体験をしたことはありませんか？ 2017年にリリースした SmartPhoto.js は、スマートフォンで写真を大きく見たいを実現するために用意したライブラリーです。 弊社の Github 公開しているライブラリの中では、一番 ★ の多いライブラリーで、2024年5月6日現在で 894 となっています。よろしければ https://github.com/appleple/SmartPhoto の右上にある ★ のクリックをお願いします。 SmartPhoto.js では、大きく表示させることを一番に考え、写真の短辺側が画面の最大になるところまで拡大表示されるフォトビューアーとして作られました。下のデモコンテンツでは、長辺側ははみ出して表示されることになりますが、ドラッグして動かしたり、ピンチイン・ピン
[JS]極シンプルなマークアップで、コンテンツを横にスライドさせナビゲーションを表示するスクリプト -Slideout.js
ダウンロードファイルのデモ Slideout.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="index.css"> </head> <body> ... <script src="slideout.min.js"></script> </body> Step 2: HTML ナビゲーション（#menu）とコンテンツ（#panel）を実装します。 idは変更可能です。 <nav id="menu"> ナビゲーション </nav> <main id="panel"> コンテンツ </main> Step 3: JavaScript オプションを定義し、スクリプトを実行します。 <script> var slideout = new Slideout({ '
![[JS]極シンプルなマークアップで、コンテンツを横にスライドさせナビゲーションを表示するスクリプト -Slideout.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/1b5913f9bdd8179129a0b710a9473540ea14fc5c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015030902.gif)
Flipsnap.jsを使って、横幅100％のスライドショーを作る | WebChokoTips – ウェブチョコチップス
スマートフォンの対応サイトを作るときに、今や欠かせないといっても過言では無いスワイプを使ったUIですが、その中でも使いやすくて動作も快適な「flipsnap.js」を使って、横幅いっぱいに広がるスライドショーを作ってみます。 公式サイトのDEMOではどれも固定幅で作られていた為、画面サイズに合わせたスライドショーを作るにはどうやってやるの？ という人の参考になればと思います！ DEMO シンプルなDEMOを用意したので、是非スマートフォンで確認してみてください。 http://webchoko-tips.com/demo/flipsnap/ HTMLとCSSを用意 Flipsnapで使われているHTMLとCSSをほとんどそのまま使っているので、特に変わったところはないかと思います。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.hp-stylelink.com/news/2015/01/20150123.php
