サイト構築 -JavaScript

スマホ対応の優れもの!クリック・タップの直前にページを先読み、高速表示する超軽量スクリプト -instant.page

Post on:2019年2月12日

ユーザーがリンクをクリックする際のhoverとタップする際のtouchstartに合わせて、クリック・タップする直前にページのHTMLをプリロードし、高速に表示するわずか1kBの超軽量スクリプトを紹介します。 ページに外

...記事の続きを読む

[JS]面白いスクリプトが登場!スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny

Post on:2019年1月21日

スマホの傾きを感知し、それに合わせてグラデーションを光の反射のようにシミュレートさせる軽量スクリプトを紹介します。 スクリプトは単体で動作し、MITライセンスで利用できます。 Shiny Shiny -GitHub

Vue.jsにも対応の優れ物!高さが異なるカードでもグリッドにレイアウトできる超軽量ライブラリ -Magic Grid

Post on:2019年1月16日

カードの高さが常に一定であれば、CSS GridやFlexboxで簡単に実装できます。しかし、ユーザーが作成したデータを使った動的コンテンツでは高さが同じになることはほとんどありません。 カードの高さがそれぞれ異なる動的

...記事の続きを読む

プログレスバーの実装もこれなら簡単!複数ファイルにも対応した超軽量JavaScriptライブラリ -preload-it

Post on:2018年11月8日

動画ファイル、音楽ファイル、画像ファイルなど、大容量のファイルを使用したコンテンツでは、プログレスバーがあると非常に便利です。さまざまなタイプのファイルをプリロードするための超軽量(1kb)JavaScriptライブラリ

...記事の続きを読む

あまり知られていないかもしれない、CSS-in-JSを実装するライブラリでできる5つの便利なテクニック

Post on:2018年11月6日

CSS-in-JSはJavaScriptを使用してコンポーネントをスタイルするテクニックです。 Reactには従来のCSSに加えて、スタイリングのオプションとして、インラインスタイルとCSS-in-JSがあります。 CS

...記事の続きを読む

便利なのが登場!フォームのバリデーションをシンプルな記述で実装できる超軽量JavaScriptライブラリ -v8n

Post on:2018年10月24日

Webサイトやスマホアプリのどの部分にでもフォームに入力された値を検証するバリデーションを簡単に実装できる、わずか2.29kBの超軽量ライブラリを紹介します。 バリデーションでよく使用されるルールもデフォルトで30個以上

...記事の続きを読む

これならすごく簡単!ページを高速に表示させるLazy Loadを実装できる超軽量ライブラリ -Lazyestload.js

Post on:2018年10月22日

最近はLazy Loadを採用しているサイトが増えていますね。 Lazy Loadとは、画像やiframeコンテンツなどが見えていない状態(ビューポート外)はロードさせずに、見えはじめた状態(ビューポート内)の時だけロー

...記事の続きを読む

Vue.jsの勉強にもいい!UIコンポーネントやインタラクションを実装するチュートリアルがまとめられた -Vue.js Examples

Post on:2018年10月15日

Vue.jsでさまざまなUIコンポーネントやインタラクションを実装するチュートリアルやリソースがまとめられたVue.js Examplesを紹介します。 ページやアプリのレイアウトをはじめ、スクロールコンテンツ、カード型

...記事の続きを読む

Vue.jsで構築された、デスクトップでもスマホでも快適に操作できるスライドショーのフレームワーク -Eagle.js

Post on:2018年9月28日

Vue.jsで構築されたスライドショーのフレームワークを紹介します。 デスクトップ・スマホに完全対応、プレゼンテーションモードも備えており、キーボード・マウス・タッチ操作をサポートしている快適なスライドショーを実装できま

...記事の続きを読む

Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut

Post on:2018年9月27日

スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されてい

...記事の続きを読む

top of page

©2019 coliss