jqアニメーショについて
今週の課題でもある、JQアニメーションについて自分の中で理解を深めるために、アウトプットして行きます！
一概に言ってもアニメーションの種類は多種多様、探せば探すだけでてきた！
文字を隠しておき
マウスオーバーアクションがあった時や、クリックされた時に出したりと、
人の個性が出る課題だったと思います。
本当に色々とあるのでコードを紹介してもきりがないから、この記事ではHTMLに適用するためのコードに触れて行きます！
JQの適用方法は2種類あります！
一個はGoogleにあるCDNを引っ張ってきて読み込む。
もう１つは
ダウンロードしてきてデバイス上に置き
そこから読み込む
まずCDNとは？
CDN（Contents Delivery Network）とは、Webコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。
CDNから引っ張ってくる場合の利点としては
主要なCDNは世界中にアクセスポイントがあり、常に最寄りのポイントから利用可能
メジャーなCDNほど他サイトでも利用されている可能性が高いため、キャッシュされやすく高速
自サーバーにファイルを置かなくてもいい
といった点がある！
書き方としてはスクリプトタグで囲みタイプを指定その後にsrc(source)で適用させたい引用元をはりつけます！
CDNを使った方がダウンロードして使うより楽なのでオススメです！
JQを使う中で注意しなければならないのは
JSの場合は
body要素の中の下部で読み込むと思うのだが
JQはスクリプトタグの1番上で読み込んでから使った方がいい！
まず、なんでjsは下に書くかというと
HTMLを読み込む際、jsファイルの読み込みが完了するまでHTMLやCSSなどの読み込みをブロックしてしまいます。
jsファイルは<body>下部で読み込むようにすれば、HTMLやCSSなどの読み込みも終わっているため、影響を受けないようにできる
といった特性を持っているからだ、
逆にJQはなんで、スクリプトタグの1番上じゃないかというと
jQ本体を読み込む前に、jQで動作するスクリプトを記述したファイルを読み込んでも動作しないため、jQ本体を一番上で読み込むようにする！
なので、hedタグの中に入れるのがいい！
気をつけるポイントも少しづつ理解していけているので、自分の成長を感じました！
この記事が気に入ったらサポートをしてみませんか？