jQuery

jsで隠すべき要素が一瞬表示されてしまう場合

jQueryのプラグインなどで非表示にして、アニメーションで表示させるような処理をしているのに、サイトを開いた時一瞬要素が全部見えてしまうことがあります。クライアントはこういうのを結構指摘してきますし、私自身もなんかな、と思うので良い対処法を探したところ、様々な場面で使いやすい方法をアップしてくれている記事を見つけました。https://myscreate.com/textillate-fix/ […]

overflow:hiddenでsticky要素が動かない場合

使い所によって楽しい効果が簡単に出せるstickyですが、親要素にoverflow-x:hiddenを設定しているとうまく動かないことがあります。個別に親要素を指定するのは大変なので、jQueryのparentsでoverflow-x:visibleを使うと動くのですが、スマホの画面の左右が動いてしまう。というわけで、PCやタブレットのときだけ、親要素をvisibleにするときのメモです。

アンカーリンク(#)が出てくると途端に出てくる問題

昨今流行りの「ペライチ」（別に昨日今日の流行りではないのですが、クライアントでさえ、この言葉を注文時に使う今日この頃です）では、アンカーリンクが必要になる場面がほとんどですが、アンカーに対して、ぬるっとスクロールさせるJavascriptをかませると、必ずといっていいほど問題が2〜３出てきます。毎度悩まされて、似たような解決策をなんとなく使っているので、定義づけしておこう！原因は、jQueryの […]

CSSアニメーションを可視領域に入ったら発火（inview.js その１）

cssアニメーションはとても便利なのですが、アニメーションをいつ発動させるかは、CSSだけでは操作できません。そこで要素が画面内に入ったことをシンプルに判定したい。そんな時は「inview.js」の出番です。使用方法の基本も簡単です。（1）CSSの@keyframesでアニメーションをつくる。（2）(1)のアニメーションを適用するCSSクラスをつくる。（2）inview.jsで、可視領域に入った […]

Javascriptでエージェント判定をして、別のhtmlを書き出す

レスポンシブで作成したLPの電話番号をPCとスマホで別にする、という依頼が。CSSで対応しても良いのですが、電話番号の表示箇所の数が多いので、ソースが煩雑になりますし、CSSのメディアクエリは厳密にPCとスマホを分けているわけではないので、JSでエージェント判定をして、それぞれ別の内容のhtmlを書き出すことにしました。これで書き換え箇所が沢山あっても楽に対応できます。

Slider Proのレスポンシブ処理について

スライダーの中で、文字テキストや画像を個別にアニメーションさせたい時、一番多く使うのが「Slider Pro」なのですが、レスポンシブの時、スマホだと画像のサイズがうまく調整できないことがあります。「Slider Pro」にはもともと「autoScaleLayers」というオプション設定があり、レスポンシブの際に縮小率を自動的に計算するようになっているみたいなのですが、AndroidとiPhone […]

wow.jsのアニメーションをリピートさせたい

手軽なアニメーションの導入方法として、みんな大好き wow.js。こういう使い方がシンプルなスクリプトは便利ですが、もし弱点をあげるとすれば、一度表示してしまったアイテムは二度とアニメーションしないこと。何度表示してもアニメーションしてくれないかなと思う場面もあります。探してみたら、海外の方がGOODなコードを考えてくれていました。 https://github.com/matthieua/ […]

お手軽なアコーディオン

スマホの時だけアコーディオンにしたいなと思って、動作が軽くて簡単なコードを探しました。 CSSのメディアクエリを外せば、PCにも使えます。

Slider proでSP版の画像サイズの縮尺を調整する

Slider proのsp-layerに画像を入れた場合、autoScaleLayersにすると、自動的に元のスライドサイズ（プロパティでwidthに設定したサイズ）を参照して、一定の縮尺で表示してくれます。これが小さすぎる場合、autoScaleReferenceを設定します。例えばwidthが1200pxの場合、デフォルトでは1200pxに対して縮尺を計算しますので、ここに800や700を […]

Slider Proのレイヤーアニメーションの指定方法

必要な項目がコンパクトに揃っていて大変便利です。直接表示させるテキストなどに指定します。 https://github.com/bqworks/slider-pro <p class=”sp-layer sp-white sp-padding hide-medium-screen” data-horizontal=”315″ data-ver […]