スクロールでWebページの背景カラーをフェードしながら変化させる方法Webデザイン・アプリ開発現在開発中の新しい WordPress テーマの機能として、ページを下方にスクロールすると背景カラーが徐々に変化するギミックを考えてみたので、ご紹介します。 最終目標 現在指定されているページの背景カラーを元にして、ペー ... 2019/11/28続きを読む
Gutenbergから可能になったJavaScript内のテキストを翻訳して表示する新しい方法カスタマイズ・技術情報WordPressのテーマやプラグインで、翻訳ファイル(*.mo)を含めて多言語表示に対応させる場合、PHPであれば load_theme_textdomain (テーマの場合)、 load_plugin_textdom ... 2018/08/29続きを読む
便利すぎ!jQuery不要のスライダー「Swiper.js」で色々と遊んでみようWebデザイン・アプリ開発汎用性に優れている、超定番のjQueryベースのスライダーライブラリといえば、「slick」、「bxSlider」、「FlexSlider」 あたりでしょうか。 しかし、これらの名だたるライブラリよりも、総合的に機能が豊 ... 2018/01/10続きを読む
Masonryより高機能!フィルタ、ソート、レスポンシブ対応のグリッドレイアウト「Muuri.js」モジュール・ライブラリ紹介Masonryやisotopeはもういらない?! 高度なフィルターやソート、レスポンシブ表示にも対応する無料で商用利用可能な可変グリッドレイアウトを実現する「Muuri.js」の実装サンプルを紹介しています。 今後リ ... 2017/12/15続きを読む
Retina対応の canvas + JavaScript による波形アニメーションサンプルWebデザイン・アプリ開発弊社にて現在開発中のWordPressテーマに搭載する機能の候補として、各セクションの境界の形状に、波形の波打つアニメーション要素を表示する仕組みを簡単に作ってみました。 想定は、例えば弊社で提供中のDigiPressテ ... 2017/11/30続きを読む
Snap.svgを使ったSVGのパスのモーフィングアニメーションデモWebデザイン・アプリ開発Webデザイン関連トピック , …SVGを変形させたりアニメーションさせることができる、Adobeがオープンソースで提供しているJavaScriptライブラリである「Snap.svg」を使って、SVGのpathを別のpathにモーフィングさせるアニメーシ ... 2016/10/25続きを読む
[JS]CSS, SVG, テキスト要素に様々なアニメーションを低負荷で施せる「KUTE.js」モジュール・ライブラリ紹介CSSでスタイリングしたHTMLオブジェクト、テキスト、さらにSVGコンテンツまでも様々なアニメーションで変形、移動させることができる、オープンソースのJavascriptアニメーション用モジュール「KUTE.js」をご ... 2016/10/19続きを読む
[JS]背景画像を区分けして浮かび上がるパララックス効果を付けてくれる「Segment Effect」モジュール・ライブラリ紹介1枚の背景画像をいくつかのセグメントに区割りして、それぞれがちょっと浮き上がるような面白いオープンソースのJavascriptモジュールを見つけたのでご紹介します。 このモジュールは、Filippo Bello's Po ... 2016/10/13続きを読む