データ属性で表示する記事を絞り込む
- 2021.03.10
データ属性で、一覧の記事を絞り込むサンプルです。属性を選ぶボタン（category-btn）と絞り込まれる要素（flex-one）の一覧になっています。is-animateクラスは、自分で作成したクラスです。若干不要な記述が入っていますが・・・ キーワード A B 要素 要素 要素 .category-btn{ list-style:none; display:flex; margin:40px […]
jQuery
1/2ページ
WordPressの投稿記事をAjax通信で読み込む
- 2020.10.07
ページを移動せずに特定の投稿記事を読み込みしたい、と言われたら、Ajax通信ですよね。ということで、初めてワードプレスでAjax通信で記事を読み込んでみました。類似のケースの依頼が見込まれるので、メモしておきます。 以下のサイト等を参考にしています。https://engineering.dn-voice.info/blogwordpress/ajax/https://pinkmonky.net/ […]
jsで隠すべき要素が一瞬表示されてしまう場合
- 2019.12.25
jQueryのプラグインなどで非表示にして、アニメーションで表示させるような処理をしているのに、サイトを開いた時一瞬要素が全部見えてしまうことがあります。クライアントはこういうのを結構指摘してきますし、私自身もなんかな、と思うので良い対処法を探したところ、様々な場面で使いやすい方法をアップしてくれている記事を見つけました。https://myscreate.com/textillate-fix/ […]
overflow:hiddenでsticky要素が動かない場合
- 2019.11.30
使い所によって楽しい効果が簡単に出せるstickyですが、親要素にoverflow-x:hiddenを設定しているとうまく動かないことがあります。個別に親要素を指定するのは大変なので、jQueryのparentsでoverflow-x:visibleを使うと動くのですが、スマホの画面の左右が動いてしまう。というわけで、PCやタブレットのときだけ、親要素をvisibleにするときのメモです。
アンカーリンク(#)が出てくると途端に出てくる問題
- 2019.08.31
昨今流行りの「ペライチ」（別に昨日今日の流行りではないのですが、クライアントでさえ、この言葉を注文時に使う今日この頃です）では、アンカーリンクが必要になる場面がほとんどですが、アンカーに対して、ぬるっとスクロールさせるJavascriptをかませると、必ずといっていいほど問題が2〜３出てきます。毎度悩まされて、似たような解決策をなんとなく使っているので、定義づけしておこう！ 原因は、jQueryの […]
CSSアニメーションを可視領域に入ったら発火（inview.js その１）
- 2019.04.20
cssアニメーションはとても便利なのですが、アニメーションをいつ発動させるかは、CSSだけでは操作できません。そこで要素が画面内に入ったことをシンプルに判定したい。そんな時は「inview.js」の出番です。 使用方法の基本も簡単です。（1）CSSの@keyframesでアニメーションをつくる。（2）(1)のアニメーションを適用するCSSクラスをつくる。（2）inview.jsで、可視領域に入った […]
Javascriptでエージェント判定をして、別のhtmlを書き出す
- 2019.03.26
レスポンシブで作成したLPの電話番号をPCとスマホで別にする、という依頼が。CSSで対応しても良いのですが、電話番号の表示箇所の数が多いので、ソースが煩雑になりますし、CSSのメディアクエリは厳密にPCとスマホを分けているわけではないので、JSでエージェント判定をして、それぞれ別の内容のhtmlを書き出すことにしました。 これで書き換え箇所が沢山あっても楽に対応できます。
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にも使えます。