Javascriptでエージェント判定をして、別のhtmlを書き出す
- 2019.03.26
レスポンシブで作成したLPの電話番号をPCとスマホで別にする、という依頼が。CSSで対応しても良いのですが、電話番号の表示箇所の数が多いので、ソースが煩雑になりますし、CSSのメディアクエリは厳密にPCとスマホを分けているわけではないので、JSでエージェント判定をして、それぞれ別の内容のhtmlを書き出すことにしました。 これで書き換え箇所が沢山あっても楽に対応できます。
jQuery・JS
2/2ページ
Slider Proのレスポンシブ処理について
- 2019.02.24
スライダーの中で、文字テキストや画像を個別にアニメーションさせたい時、一番多く使うのが「Slider Pro」なのですが、レスポンシブの時、スマホだと画像のサイズがうまく調整できないことがあります。「Slider Pro」にはもともと「autoScaleLayers」というオプション設定があり、レスポンシブの際に縮小率を自動的に計算するようになっているみたいなのですが、AndroidとiPhone […]
wow.jsのアニメーションをリピートさせたい
- 2018.10.24
手軽なアニメーションの導入方法として、みんな大好き wow.js。 こういう使い方がシンプルなスクリプトは便利ですが、もし弱点をあげるとすれば、一度表示してしまったアイテムは二度とアニメーションしないこと。 何度表示してもアニメーションしてくれないかなと思う場面もあります。 探してみたら、海外の方がGOODなコードを考えてくれていました。 https://github.com/matthieua/ […]
お手軽なアコーディオン
- 2018.04.23
スマホの時だけアコーディオンにしたいなと思って、動作が軽くて簡単なコードを探しました。 CSSのメディアクエリを外せば、PCにも使えます。
Slider proでSP版の画像サイズの縮尺を調整する
- 2018.04.11
Slider proのsp-layerに画像を入れた場合、autoScaleLayersにすると、自動的に元のスライドサイズ（プロパティでwidthに設定したサイズ）を参照して、一定の縮尺で表示してくれます。 これが小さすぎる場合、autoScaleReferenceを設定します。 例えばwidthが1200pxの場合、デフォルトでは1200pxに対して縮尺を計算しますので、ここに800や700を […]
Slider Proのレイヤーアニメーションの指定方法
- 2018.04.11
必要な項目がコンパクトに揃っていて大変便利です。 直接表示させるテキストなどに指定します。 https://github.com/bqworks/slider-pro <p class=”sp-layer sp-white sp-padding hide-medium-screen” data-horizontal=”315″ data-ver […]