lightgallery.js - フル機能が揃った写真/動画ギャラリー MOONGIFT
写真や動画はコンテンツの質はもちろんのことながら、その見せ方も大事になります。ただ一覧に貼り付けるだけでは魅力に欠けるでしょう。そのためのギャラリーソフトウェアも幾つか存在します。 今回は写真と動画コンテンツに対応したギャラリーライブラリ、lightgallery.jsを紹介します。 lightgallery.jsの使い方 一覧ページです。四角く、整然と並んでいます。 写真詳細。下にサムネイルが並びます。 動画にも対応します。HTML5動画の他、YouTubeやVimeoが使えます。 写真を切り替える際のエフェクトも多数用意されています。 lightgallery.jsはjQueryなどの依存性がなく、十分な機能が用意されています。レスポンシブデザイン対応、プラグインによる拡張、マウスドラッグサポート、ソーシャルメディアでの共有サポートなど多数の機能が揃っています。 lightgaller
動きがなめらかなアニメーションライブラリ「anime.js」を使ってみた！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうでもです、お久しぶりです、はやちですよ₍₍ (ง ˘ω˘ )ว ⁾⁾ 今回はなめらかなアニメーションを再現できるライブラリ「anime.js」を紹介します(˘ω˘)👆 導入方法 それではさっそく、導入方法からご説明します。 まず、ソースはGitHubで公開しているので、こちらをダウンロードしてください。 https://github.com/juliangarnier/anime#specific-animation-parameters ダウンロードしたら、anime.min.jsを読み込みます。 <script src="anime.min.js"></script> タスクランナーをお使いの方は、 npm install animejs または bower install animejs でインストールして、 使用するjsファイルに import anime from 'ani
HugeDomains.com
Captcha security check nexusosc.com is for sale Please prove you're not a robot View Price Processing
ES2015で始めるJavaScript入門 - Qiita
はじめに JavaScript勉強会の資料です。 内容は、簡単なコマンドラインツールを作りながら、JavaScript(ES2015を含む)の書き方を学ぶものとなってます。 内容的には初心者向けなので、JavaScriptを勉強したい、JavaScriptは触ったことあるけどES2015を知らないので勉強したい、といった方が対象です。 JavaScriptとは Webブラウザで実行可能なインタプリタ言語 最近ではサーバサイドのものもある(Node.jsなど) 各ブラウザで独自の実装があるが、標準化されたECMAScriptに準拠している ES5, ES2015(ES6), ES2016, … ES2015からは毎年新しい規格が策定される これによりナンバリングは策定した年に変更 ES2015 ES5(2011年策定)から4年ぶりに策定されたECMAScript 非常に多くの機能が追加された
Quill - Your powerful, rich text editor
Built for DevelopersGranular access to the editor's content, changes and events through a simple API. Works consistently and deterministically with JSON as both input and output. Cross PlatformSupports all modern browsers on desktops, tablets and phones. Experience the same consistent behavior and produced HTML across platforms. Fits Like a GloveUsed in small projects and giant Fortune 500s alike.
Web Workersを用いてJavaScriptをマルチスレッド化する
長らくの間、JavaScriptはシングルスレッドな言語でした。重い処理を実行するたびにUI処理はブロックされ、マルチコアCPUは上手に使えない、それがJavaScriptの常識でした。ですが、Web Workersがあればそれが変わります。 Web Workersとは JavaScriptは、Workerという処理単位を持ちます。Workerはバックグラウンドで非同期に処理を行うための最も簡単な手法であり、JavaScriptに他の処理を妨げないタスクを実行する手段をもたらします。 しかしなぜWorkerという名前なのでしょうか。プログラマにとってなじみ深い「スレッド」ではいけなかったのでしょうか。 独立したメモリ空間 事実、Workerはスレッドのようなものと言えます。しかしながら、Workerにはプログラマが一般的に想像するスレッドとは少し違う点があります。スレッドというよりかは、ど
baffle.js
Basic Usage With baffle installed, getting started is as simple as calling baffle() with some DOM elements. Those elements can be in the form of a CSS selector, a NodeList, or a single Node. You can also pass an options object. baffle operates on node.textContent, so it will flatten any child elements. It's best used on elements without children. // With a CSS selector let b = baffle('.headline');
Holmes - ページ内の情報を素早く検索
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました サイト検索は常に問題になります。Web全体を対象とするならばGoogleでも良いでしょう。その反動か、サイト独自の検索は突然使い勝手が悪く感じられるものです。少しでも使いやすい検索を提供しないとユーザは離れてしまいます。 今回はJavaScriptベースのページ内検索、Holmesを紹介します。JavaScriptだけあってインクリメンタルに検索できます。 Holmesの使い方 検索ボックスにキーワードを入れると即座に情報が絞り込まれていきます。 実際に使っているところです。 一つだけになるとDOMの幅が変わっています。 使い方としても、 holmes({ input: '.search input', find: '.results blockquote' }); のように使うだ
lightgallery.js
lightgallery.js V1.0.0 Full featured javascript lightbox gallery, No dependencies. View on github Get a license Responsive lightgallery.js uses CSS-only approach for resizing images and videos. So it will be extremely flexible, and considerably faster than using the JavaScript approach. Modular lightgallery.js comes with a few built in modules, such as thumbnails, full screen, zoom, etc. It is eas
Riot.js ソースコード完全解説 v3対応版 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 昨年「Riot.js ソースコード完全解説」を書いたのですが、この1年でいろいろ状況が変わってしまいました。v2の間に相当コードが書き換わり、Riotも若干ぽっちゃり系に...(他の同種のライブラリに比べれば可愛いものですが)。そんな中、朗報です。近日v3がリリースされ、コードが整理されます。 参考: v3のロードマップ 本稿では、改めて「ソースコード解説」を試みたいと思います。 2016年7月現在 でnextブランチにあるコードをもとに説明するので、日々変わってしまうけど、ご参考まで。オススメのコースは、次の通り。 この記事に目を通し
超高速なMasonryレイアウトを実装できる「Bricks.js」 – bl6.jp
Bricks.jsは、固定した幅で配置する画像などの要素をすばやく配置するレイアウトジェネレータのjsライブラリです。それは、まるで石畳のように規則性を持って敷き詰めたようなイメージです。同様なジェネレータはこれまでもありましたが、jQueryありきで構築されなければならず、不要な機能もついてしまっています。このBricks.jsはHTMLマークアップとCSSで構築が可能なライブラリです。 Bricks.jsのデモページは以下になります。 デモ Bricks.jsの動きは超高速です。要素の表示サイズにあわせて、カラム数やカラム間のスペースを指定してコンテンツを配置してくれます。jQueryに依存していないライブラリなので、HTMLとCSSで実装が可能となります。手順は下記のようになります。 インストールしたBricks.js をインスタンス化します。その後、必要に応じてパラメーターを設定し
JSCompress - The JavaScript Compression Tool
About JSCompress JSCompress is an online JavaScript compressor that allows you to compress and minify all of your JS files by up to 80% of their original size. Copy and paste your code or you can upload and combine multiple files and then compress. We use UglifyJS 3 and babel-minify for all JavaScript minification and compression. Why You Should Compress JavaScript There are a number of reasons wh
2016年JSハイブリッドアプリの動向をまとめてみた - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? (元記事はこちら)。 概要 ハイブリッドアプリで採用するフレームワーク・アーキテクチャの選定をするため、調べたことをまとめます。 ハイブリッドアプリとは? ハイブリッドアプリとは、ネイティブコード以外を使って作られたアプリです。今回は、JavaScriptを使用したハイブリッドアプリを想定しています。 ハイブリッドアプリは、基本的にWebViewというネイティブコンポーネントを使って、Webの技術をネイティブに組み込むような設計をしていました。それを可能にする代表的なものがCordovaで、名前は聞いたことがあるかもしれません。Cord
[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)
サーバーでの重い処理の経過をリアルタイムに通知する - 無駄と文化
Webアプリケーションを作るとき、サーバーで重い処理を実行する際にはどうしても途中経過を通知したくなります。 この場合の重い処理とは完了までに時間が掛かる処理という意味合いです。 リクエストから結果の表示まで10分待たされる処理があったとして、「現在32%完了...」のように経過報告付きで見せられる場合と、完了までの目安も教えてもらえずにひたすら待たされる場合とでは、待つ側の精神の安定度が違いますからね。 Google API を300回叩く ここ数日、GoogleのAPIを叩きまくるプログラムを書いていました。バックエンドの言語はPHPです。 試作時で1タスクあたり7回のHTTPリクエストを繰り返し行います。現在想定している本番の状況では約300回のHTTPリクエストを繰り返して、最終的にまとめた結果を返す、そんな処理です。 あまり連続的にAPIを叩くと無料プランの制限を超えてしまうので
executor-editor :: demo
class Cake { toString() { return '[Cake]'; } } console.log(String(new Cake())); class Animal { toString() { return '[Animal]'; } } console.log(String(new Animal())); How to embed editor like that above? <pre class="executor-editor" data-autofocus="true" data-autoevaluate="true" data-skin="blue" > class Cake { toString() { return '[Cake]'; } } console.log(String(new Cake())); </pre> <link href="htt
リアルタイムWeb時代がやってくる！作ってわかったWebSocketとSSEの違い
ずっと夢でした。リアルタイムなWebアプリを作ることが。WebSocketとSSE（Server-Sent Events）を使ってサーバーからブラウザーにメッセージをプッシュするデモを通じて、リアルタイムWebを体験してみましょう。 本記事はCraig Bilner、Dan Princeが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。 リッチインターネットアプリケーションを書くときに重要なのは、データの更新への反応です。以下は、2014年のBrazilJSでGuillermo Rauchが『The 7 Principles of Rich Web Applications』と題して講演した内容から引用したものです。 サーバーでデータが変化した場合、問い合わせがある前にクライアントに知らせてください。ユーザーが手動で
npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう - Qiita
背景 Javascript で Web アプリを作ろうとすると、よくわからないことだらけで超混乱します。 npm と bower の違いは？ npm はサーバーサイド用、bower はクライアントサイド用らしいよ えっ、でもなんで bower のインストールに npm が必要なの？ サーバーサイドは Rails で書きたいから npm 要らないと思うんだけど・・・ ていうかサーバーサイドJSとか node.js って何？ よく見る browserify って何？ こういった疑問が沸き上がるのは、各ツールが生まれた文脈がよくわかっていないからです。いろいろ調べてやっとちょっとわかってきたのでメモします。間違いがあったらご指摘ください。 「CommonJS」誕生 - Javascript は汎用プログラミング言語へ その昔、Javascript 大好きおじさんは言いました。 Javascrip
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Barba.js
アップロード支援JSライブラリ「Fine Uploader」の必要最低限サンプル - Qiita
