[CSS] 背景画像の特定の位置を常に画面中央に配置する

2018/08/22 CSS No comments

backgroundプロパティだけでやるより融通がきくやつ。

See the Pen centering background image by Tenderfeel (@Tenderfeel) on CodePen.

サンプルの猫画像は縦長(1600×2400)のものを使って、猫の顔が常に画面に入るように指定している。

positionとtrasnform操作すれば画面に映す場所の指定ができる。
たとえば上固定して下を伸ばすなら top:0; bottom: auto; transform: translate(-50%, 0); となる。

[CSS] 縦スクロールのニュースティッカー

2018/08/22 CSS No comments , ,

縦方向に1件ずつスクロール表示するやつ

See the Pen Pure CSS News Ticker (vertical) by Tenderfeel (@Tenderfeel) on CodePen.

表示エリアの高さ=リスト要素1件の高さ=keyframeのスクロール量 にする。
keyframesに入れてるvisibilityを消すと巻き戻る様子が表示される。
演出として巻き戻すところを敢えて見せるなら消してもよろしいと思う。

[JS] Slick Carousel: CenterMode & Zoom Effect Demo

2018/08/16 Javascript No comments , ,

Slickで中央表示モードにして外側から中央にかけて大きくさせるエフェクトつけるサンプル。
(さらに…)

[JS] Object.entries や Template Strings による簡単なテンプレート

2018/08/14 Javascript No comments ,

JavaScriptでオブジェクトをループさせたいと思った時は Object.keys でキーだけ配列にしたものを
Array.forEach で回すっていうのが鉄板だったが、
ES2017の Object.entries の方が見た目エレガントやなあと思った。

(さらに…)

[WordPress] カスタムフィールドの値でフィルタリングや並び替えする

2018/07/26 wordpress No comments

アクションフックpre_get_postsによるクエリ操作と管理画面のカスタムについてのメモ。

(さらに…)