札幌Web制作のシンクグラフィカ

Javascriptフリー素材

Web制作やホームページ作成で利用できる無料のお役立ちJavascriptフリー素材です。

OpenStreetMap表示用Javascript

GoogleマップAPIは使いづらくなりましたよね。APIキーが必要だったり、従量課金になったり。APIの仕様も定期的に変わるし~。と、そんなあなたにうってつけなのがOpenStreetMap!APIキーは不要!トラフィックが多い場合でも追加費用は不要です!OpenStreetMapを利用してJavascriptでWebページに地図を埋め込んでみましょう!

営業日・定休日カレンダー

設置がやや大変ですが毎月○日とか毎週○曜日とかそういう指定と複数設置が簡単になったバージョンのカレンダーです。基本的な流れはステキカレンダーと同じですが、細部が調整されており、カスタマイズはしやすくなっていますが、設置作業にはちょっぴり知識が必要になったかもしれません。

●営業日後の日付を表示するスクリプト

●営業日後の日付を表示したいことありますよね。特にECサイトなどで納品日の日付を何月何日って表示したい事はよくあると思います。単純に土日を抜くだけではなく、祝日とかもしっかり抜いて営業日計算をしたいですよね。

画像をゆっくり動かして表示させるやつ

大きな画像を全画面に表示させて、ゆ~っくり動かすようなJavascriptです。MacのiPhotoやiMovieにあったKen Burns エフェクトのようなものですね。

ステキカレンダーJavascript

ステキなカレンダー。そうステキカレンダー。何がステキかっつーと、永続的な未来へのスケジュールをあらかじめインプットしておけること。そしてそれをリロードなしにカチカチできること。まずはダウンロードしなっ!!

タブ切り替えJavascript

いまさら感丸出しですがレスポンシブWeb用でちょっと作る機会があったので公開します。よくあるタブ切り替え用Javascriptです。jqueryは使っていません。

WebsiteToolKit.js

レスポンシブWebデザインな感じでスマートフォン対応Webサイトを簡単に効率よく制作するためのJavascriptフレームワーク『WebsiteToolKit.js』です。スマートフォンサイトにお馴染みのスライダーナビゲーションなどが簡単に実装できます。

Webダッシュボード

WebダッシュボードMacOSのダッシュボードやKonfabulatorって便利ですよね。パッと必要なものが出てきて。WEBでもページを切り替えたり、ポップアップを出したりせずにダッシュボードのようなものが出てきたら便利じゃありませんか?

キーボードショートカットJavascript

WebサイトやWebアプリケーションでキーボードショートカットキーを実装したり、コナミコマンドのようなギミックを実装するためのJavascriptライブラリです。ユーザビリティ向上やイースターエッグ的なギミックにご利用ください。

ティザーページ用カウントダウンスクリプト

予告・告知などのティザーサイトでよくあるカウントダウンです。サーバタイムを基準にしてるからPCで時計いじっても大丈夫!

nvIR.js

グローバルメニュー的なものをアレしたりナニするときに便利なアレです。

郵便番号からの住所入力

郵便番号を入力すると、郵便番号辞書から住所を自動的に入力してくれるスクリプトです。CGIやphpを介さないため、CGIなどが動かないサーバでも使用できます。

タイピングトレースJavascript

名前や会社名などの入力項目にテキストを入力するとカフリカナフィールドにカナがトレースされるスクリプトです。よく住所録などのソフトについている機能をJavascriptで再現したものです。

フォーカス当たると消えるJavascript

フォーカスを当てると消えるフォームってありますよね。「メールアドレスを入力して下さい」とか最初から入力されていて、そこにカーソルを持って行くと、入力されていた内容が消えるみたいな…。百聞は一見に如かず!まずはご覧下さい。

Googleマップ表示用Javascript

GoogleマップAPIを使いたいよ!!でもAPIってなにそれ?美味しいの?なんてこと、よくありますよね。iframeじゃやなの!!やなのぉおおぉぉぉ!!!ってこともありますよね。わかります。あたなの気持ちがあなた以上に私にはわかります。

ResponsiveSwitch.js

『ResponsiveSwitch.js』はレスポンシブWebデザインやスマートフォンに対応したシンプルなアニメーションスクリプトです。CSS3のtransitionやtransformを使ってアニメーションさせるだけなので、レスポンシブウェブデザインにも最適♪

ResponsiveTab.js

レスポンシブWebデザインに最適化されたタブメニューを実現するためのJavascriptです。CSS3のTransitionを使うことでアニメーションを付与したタブメニューも実現ができます。もちろんスマートフォンにも対応。

ResponsiveNav.js

シンプルなレスポンシブWebデザインに対応したスライダーメニュー。指定クラス名のnav要素内のアンカーをまとめて、スライドメニューを自動生成・追加するためのJavascriptです。jqueryは使ってません。

一度だけ表示するJavascript

初めてWebサイトに訪れた人にWebサイトのUIの説明などを一度だけ表示したい!ってことありますよね。Webアプリケーションなどでも、一度だけ表示させたいってことありますよね!?

TabOpener.js

スマートフォンやタブレットなどで画像を新規タブで表示し、タブを閉じるボタンを自動的に配置するスクリプトです。LightboxやThickbox、Fancyboxなどは便利ですが、スマホやタブレットだと意外と邪魔臭いんですよね。

ThisPageQR.js

QRコードを作成することなく、iPhoneやAndroidなどのスマートフォンがパソコンで見ているページにアクセスするためのQRコードを自動作成するためのJavascriptです。今見てるページをスマホで見たい、そんなことありますよね?

slidebox.js

今さら感がありますが、アップルのサイトにあるようなあんな感じとか、ニュースティッカーみたいな使い方とか、幅広い用途に対応した汎用性の高いスライドスクリプトです。脱jquery☆

RandVisual.js

複数のメインビジュアルとサブビジュアルを混在させる形でアクセス毎にランダム表示するためのスクリプトです。フロントページでアピールしたい事がたくさんあるウェブサイトにオススメ。

IR.js

特定タグの画像置換やナビゲーションの画像置換、ロールオーバー、ロールアウト、基点表示、クリック表示などを一括で処理するためのJavascriptです。

web-dock UI Library

MacOS Xのdock風にマウスオーバーやクリックによって画面の左側よりdivを表示させるライブラリです。jquery使ってます。

RSS URLのアレ

RSSアイコンを表示しているサイトをよく見ますが、アレってクリックするとXMLがブラウザ上で展開しちゃいますよね。MIMEタイプが設定されていないサーバだとダウンロードがはじまっちゃったり…。そんなところに疑問を感じてるのです。

定休日表示カレンダーJavascript

定休日って毎月変えなきゃいけませんよね。でも毎月カレンダーを作るのって意外とメンドクサイ。しかもそれをいろんなページに付けるとなるとすごく大変!そんな大変なカレンダー表示をJavascriptでマルッと解決!

ランダムでバナー画像を切り替える

アップルコンピュータのフロントページはランダムでメインの画像とサブ画像が入れ替わりますよね。それってとっても素敵!見せたい画像が複数あるとき、ローテーション組めるしね!