JavascriptでjQueryプラグイン化☆画像が流れるように動く。itJavascriptでウェブの動きをサンプル制作してみました。これはキャプチャーです。トップイメージはjQueryのスライダーで、動きは分割しながらフェードします。画像の上に分割分だけspanタグを生成し、spanタグに画像をズラして埋め込み、それを、setIntervalを使用して、順番にopacityを0にしています。今回自作制作なのは、トップイメージの下コンテンツ部分です。解説の詳細テキストが表示されます。画像が左にスライドし、右にその画像の解説が表示され、読み終えた後に元の配置に戻る動きが美しく、流れがスムーズで洗練されているので、載せるコンテンツまで素敵に見えてしまう、自作プラグインに仕上がっています。パターンは全部で4つあります。テキスト部分の記入を満たしたら、どこにもないオリジナルの動きを持ったスタイリッシュなプロモーションサイト、ブランディングサイトとして使えるクオリティに仕上がりました。提案した企画がすっかり形になりました。CSSの方は動的な部分ではない部分のモノなので無駄にjsの処理を増やさない為にCSSに記述しましたホバーで表示される部分の色やテキストについてのCSSになります。いうIDを画像の枚数分生成しているのでこのIDだけは付けることが出来ません。下記はこのプラグインを使うなら入力必須な部分ですID名と画像URLだけでも大丈夫ですが説明文がないなら使う必要がないプラグインになってしまいますので最後に付けるオプションの最後にはカンマはいりません。後ろにはカンマは付けていません。カンマを追加して入力します。//上記の画像と同じようにimg_hが見出し部分、img_pが簡単な説明の部分です。["img/menu_1.jpg","img/menu_2.jpg","img/menu_3.jpg","img/menu_4.jpg"],//次は画像にhoverで表示される見出しと簡単な説明部分です//上記の画像と同じようにimg_hが見出し部分、img_pが簡単な説明の部分です。//ジナル画像サイズなので分割数や下記のオプションにあるマージンやスペースの設定によって変わります。ここの指定がない場合はimgURLに指定してある画像の枚数がデフォルトで入ります。//ジナル画像サイズなので分割数や下記のオプションにあるマージンやスペースの設定によって変わります。ここの指定がない場合はimgURLに指定してある画像の枚数がデフォルトで入ります。//上下のマージン});});</script>外部Javascriptのコードファイルは下記のようになります。//できる限り変数などに格納してまとめて処理をしています。class="detail_text"><h2></h2></br><p></p></div>');//appendでHTMLの追加をしますが一列ごとにしていると動作処理が重いDOM操作を何度もすることになるの//できる限り変数などに格納してまとめて処理をしています。UX/UIも秀悦なウェブ表示できますieやedgeで表示されない病を克服したグラフィックピックアップ記事2020/2/20WordPressのバージョンアップで失敗する前に!ほとんどの人が経験するよく失敗する事の一つが、Wordpressのバージョンアップです。UX/UIも秀悦なウェブ表示でき...Jimdoでもここまでできる!コスパのいいコーポレートサ...コスメECサイトをCMSで制作した実例。齋藤天津子...2020/2/20WordPressのバージョンアップで失敗する前に!ほとんどの人が経験するよく失敗する事の一つが、Wordpressのバージョンアップです。カバーをかっこよくつくるポイントこのポートフォリオの中のカバーは私自身が制作しています。