stalactiteのダウンロードと設定

字幕

このレッスンでは読み込んだ画像をタイル状にアニメーションを付けながら並べてくれるプラグインstalactite のダウンロードと設定についてご説明しますまずこのページなんですけれどもGoogle で検索するときはjquery ですねキーワードの１つプラグインですからそしてこの名前鍾乳石という意味らしいんですがstalactite ということで検索するとトップにこのページが表示されますちょっと今動きが見えましたねどんなふうに画像をアニメーションさせてくれるかというともう少し真ん中あたり見たほうが良いと思うんですがこの辺でリロードします下からこうジャンプするように画像が表示されてしかもタイル状にきれいに並べられていますねこれをやってくれるのがstalactite ですダウンロードはページトップに戻ってこのボタンですねこれでダウンロードができるんですが環境によってはファイルを開いてしまうことがありますJavaScript のファイルは結局 txt ファイルですからブラウザで開くことはできるんですけれどもこれではちょっと具合が悪いですね最もこのまま保存をすれば大丈夫ですファイルを保存ということで名前がちゃんと正しいことを確認した上でしかるべき場所に保存しますあるいはちょっと気になる方は戻りまして右クリックで「リンク先を別名で保存」というふうにすると目的の場所にダイレクトに保存ができます通常ダウンロードした後 展開してそれを作業用のフォルダのライブラリ用のフォルダに入れるということが必要なんですがこうしてしまえば 保存先を普通はこの「ダウンロード」の場所に保存されるんですが自分の目的の作業用のフォルダを見つけてこの lib というフォルダの中にライブラリを入れるとsample.html これが作業用の練習用のファイルなんですがlib というフォルダにJavaScript ファイルは入れたいと思いますので「保存」とすればこれでもうダウンロードとそれからライブラリのフォルダへの保存もできてしまったということになりますDreamweaver で練習用のsample.htmlHTML ドキュメントを開きましたjquery のプラグインですからまず jquery を cdnネットワークから読み込んでいますそしてここに先ほどダウンロードしてかつlib フォルダにコピーしたプラグインのファイルを読み込みますsrc ソースですねそして「参照」を押してlib に保存したjquery.stala-ctite.min.js とこれを選んで開きますそしてタグを閉じると保存をしましょう実際では body に画像ファイル img 要素をどんどん入れていかなければいけないんですがこれで stalactite を使う準備が整ったということですね後は body に画像ファイルやテキストを書き込んでいってそしてこの script 要素の中にjquery のJavaScript コードを書いていくということになりますが準備はこれで整ったということですこのレッスンでは画像を読み込みながらアニメーションさせて並べてくれるプラグインstalactite のダウンロードとそれから script 要素の読み込みについてご説明しましたダウンロードはこのボタン右クリックが都合が良さそうですねそしてプラグインのライブラリのファイルをしかるべき場所に保存したらscript 要素でそのライブラリのファイルjquery.stalactite.min.jsを読み込むとこれで準備ができるということです