- 2021.07.15
JS フォームセレクタによる表示切替え
ASPなんかで見るフォームのセレクタの切り替えで以下に続くコンテンツの切り替える仕組みってあるじゃない？あれどうやるの？ あれはJSとCSSで作成可能だよ。早速やってみよう！！ JSを採用したフォームセレクタによるコンテンツの切り替え表示。 あらかじめ切り替えで表示させたいコンテンツをすべてHTMLで作成し、それをcssで非表示に設定したものをJSで呼び起こすという仕組みになります。 （今回はjQ […]
JS
- 2021.03.25
JSで実現するサイト離脱防止ポップアップ
ネットショッピングいろんなサイト見てると、ページを離脱しようとするとポップアップ画像が出るやつありよね？微妙にウザイやつ・・・ ああ、あのウザイやつね。あれはJSで作成するんだよ。せっかくなのでやってみよう！ JSをで作成するサイト訪問者離脱防止用ポップアップ表示です。（jquery必要） 難しい知識は置いといて以下に説明するソースをコピペで表示できる仕様にしています。 jqueryとJSの設置 […]
- 2020.12.15
cookie（クッキー）を利用して2回目以降の訪問者に違う要素を表示させる
ブログやサイトに訪問した方に初回と二回目以降で違うものを表示させたいんだけど・・・ それなら cookieを利用するのがいいね。 cookieのデータを利用してjavaScriptでそのデータを制御してみよう。 サイト訪問者のブラウザに残る cookieを利用して、再度サイトを訪れた方には 初回訪問時には違う要素を表示させます。 jqueryとcookie.jsの設置 今回の施策にはおなじみのjq […]
- 2020.08.07
Swiper.js カルセルスライダー作成
トップページに横いっぱいに広るスライダーのあるサイトって格好いいよね。 カルセルスライダーの事だね。Swiper.js を使用すれば簡単に設置できるよ。 Swiper.js によるカルセルスライダーの作成方法になります。 ※前提条件としてSwiper.jsのCDNをcss・JSの両方読み込んでおいてください。 ▼ HTML [crayon-67d473297af27358457746/] ▼ JS […]
- 2020.07.27
LPでも使える！JavaScriptで作成するカウントダウンタイマー
よくランディングページで使用されている時限装置のようなカウントダウンの仕掛けって難しいプログラムとかなのかな・・・？ JSとcssで設置できるよ。敷居が高いように見えるけど手順を踏めばそんなに難しくないかな。 JavaScriptで作るカウントダウンタイマー。 ランディングページなどにカウントダウンタイマーを設置したい方は参考にしてください。 （Wordpressでも設置可能・・・多分） Java […]
- 2020.06.02
Swiper.js アニメーションFlip編
Swiper.js によるスライドショーのFadeアニメーション編になります。 effect: の箇所をflipと書き換えるだけでOKです。 ※前提条件としてSwiper.jsのCDNをcss・JSの両方読み込んでおいてください。 ▼ HTML [crayon-67d473297b522752018661/] ▼ JS [crayon-67d473297b527763083393/] 実装デモ
- 2020.06.02
Swiper.js アニメーションFade編
Swiper.js によるスライドショーのFadeアニメーション編になります。 effect: の箇所をfadeと書き換えるだけでOKです。 ※前提条件としてSwiper.jsのCDNをcss・JSの両方読み込んでおいてください。 ▼ HTML [crayon-67d473297b772735604236/] ▼ JS [crayon-67d473297b776921580246/] 実装デモ
- 2020.06.01
Swiper.js アニメーションCoverflow編
Swiper.js によるスライドショーのcoverflowアニメーション編になります。 effect: の箇所をcoverflowと書き換える他に新たにJSに以下の記述も加えてください。 ※前提条件としてSwiper.jsのCDNをcss・JSの両方読み込んでおいてください。 slidesPerView: 3, 上記のslidesPerViewはスライダー上で最初から表示させたいスライド数の設定 […]
- 2020.06.01
Swiper.js アニメーションCube編
Swiper.js によるスライドショーのCubeアニメーション編になります。 effect: の箇所をcubeと書き換えるだけでOKです。 ※前提条件としてSwiper.jsのCDNをcss・JSの両方読み込んでおいてください。 ▼ HTML [crayon-67d473297bb99570983681/] ▼ JS [crayon-67d473297bb9d817645228/] 実装デモ
- 2020.06.01
Swiper.jsによるスライダー作成
ブログや普通のサイトでもスライドショーのような動きがあるといいよね。ワードプレスのプラグインでも似たようなのあるけど、プラグインの多様はサイトがおもくなるし、ショートコードの設置方法が主なので設置場所に自由が利かないのも困ってて・・・ プラグインを使わなくとも複雑でないJSで実装できるよ。この方法ならプラグインに頼らずカスタマイズや設置場所も自由が利くので便利だよ。 Swiper.jsによるスライ […]