サイト構築 -JavaScript

スマホも対応!スクリーンいっぱいに表示させるスライダーを実装するスクリプト -FullScreen Slider

Post on:2019年4月22日

ページ内のセクションをスクリーンいっぱいに表示し、マウスのクリック・ホイール操作、スマホのタップ・スワイプ操作に対応した快適なスライダーを紹介します。 FullScreen Slider -GitHub

懐かしすぎる!カーソルに追従するあのエフェクトを現在のJavaScriptで実装 -90's Cursor Effects

Post on:2019年4月3日

20年くらい前、ジオシティーズとか全盛期の頃でしょうか、個人ブログなどで必ずと言っていいほど設置されていたカーソルに追従するエフェクトを現在のJavaScriptで実装しなおした「90's Cursor Effects」

...記事の続きを読む

HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS

Post on:2019年3月28日

CSSファイルを軽量化するには、最適化・軽量化などの便利ツールがありますが、未使用のCSSを掃除することも重要です。HTMLとCSSのファイルを解析し、未使用のCSS(CSS4までサポート)を掃除してくれるツールを紹介し

...記事の続きを読む

便利なのが登場!スマホにもスクロール時に滑らかなアニメーションを適用できる超軽量スクリプト -lax.js

Post on:2019年3月20日

デスクトップでもスマホでもスクロールした際に、非常に滑らかで美しいアニメーションを簡単に実装できるシンプルで2Kbの超軽量JavaScriptを紹介します。 他のスクリプトへの依存は無く、ReactやVue.jsもサポー

...記事の続きを読む

人工知能もついにココまで!写真やイラストが健全か、健全でないのか判定できるJavaScriptライブラリ -NSFW JS

Post on:2019年2月28日

人工知能を使用して、写真やイラストなどの画像が健全なのか、健全ではないのかを判定するためのシンプルなJavaScriptライブラリを紹介します。 NSFW JS NSFW JS -GitHub

フォームのinput要素に電話番号・日付・時間・金額など、数字のフォーマットを定義できるスクリプト -Cleave.js

Post on:2019年2月27日

クレジットカード番号・電話番号・日付・時間・金額などを入力するフォームのinput要素に、数字を区切ったり、記号文字を加えたり、入力する数字のフォーマットを簡単に定義できる軽量スクリプトを紹介します。 単体のスクリプトと

...記事の続きを読む

ソースコードを分析し、コードの構造や階層・依存関係を可視化する便利な無料ツール -Code Crumbs

Post on:2019年2月25日

JavaScriptやPythonやC++などのソースコードを分析し、構造や階層・依存関係などを視覚的に構築する便利な無料ツールを紹介します。 コードのドキュメントを作成する時や、大規模なコードや未知のコードを簡単に把握

...記事の続きを読む

Vue.jsで実装された、サーバーサイドのバリデーションを自動表示するフォームのコンポーネント -FormVuelar

Post on:2019年2月14日

サーバーサイドのバリデーションを自動的に表示するようにVue.jsで実装されたフォームのコンポーネントを紹介します。 ベーシックなフォームをはじめ、ファイルアップロード、ドロップゾーンなど、最近よく利用されるフォームのコ

...記事の続きを読む

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

Post on:2019年2月12日

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

...記事の続きを読む

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

Post on:2019年1月21日

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

top of page

©2024 coliss