投稿

7月, 2022の投稿を表示しています

GreenSock (gsap.js)のCSSRulePlugin.jsがうまく動かなかった件

アニメーション作成を強力にサポートしてくれるgsap.jsの、CSSRulePluginでうまくいかなかったことが合ったのでメモ。 CSSRulePluginは、「:before」「:after」といった疑似要素に対してアニメーションを設定できるようになるなどの機能を追加するプラグインです。 例えば以下のような書き方で、:afterの要素をアニメーションさせることができます。 var myRule = CSSRulePlugin.getRule(".btn:after"); myRule.forEach((index, element) => {     gsap.to(element, { duration: 10, cssRule: { backgroundColor: "#600" } }); }) これがなかなかハマったのですが、大事なことはgetRule()のところで指定するClass名。 このClass名はCSSで実際に指定している表記と完全に一致させる必要があるということのようです。 もし上のスクリプトでmyRuleをconsole.logで出してみて「undefined」と出力されるようであれば、この原因が疑われます。 試してみてください。

WordPressプラグイン「WP Form」でreCaptchaの設定ができない場合

 WordPressのプラグイン「WP Form」でスパム防止のためreCaptchaを設定しようと思ったのですが、なんかバージョンによるのか、ヘルプとかWebの情報見ながらやってもできない。 設定を見てみたらわかったのでメモ。 ●reCaptchaのプロパティを作成 →この部分は他のサイトを見ながらできると思うのでできている前提ね。 ●reCaptchaのキーを設定 WordPressのWPFormのメニューから「設定」へ移動 「reCAPTCHA」を選択してタイプとキーを設定します。 ●すべてのフォームから、reCaptchaを有効にしたいフォームを選択して設定 フォームの編集画面に移動したら、「設定」に移動 「一般」の下の方に「Enable Google v3 reCAPTCHA」(バージョンによって表記が変わる)があるのでチェックを入れて保存 これでOK。 実際のフォームを表示してreCaptchaが表示されていることを確認してください。 なんかこの最後の手順がわからなかった。 他のサイトや公式のヘルプで紹介されてないんですよね。 なんなんだろう。よく分からん。