検索
Close this search box.

背景画像のスライドショー

背景画像をKen Burnsエフェクトを使ったスライドショーが簡単に実現可能なElementorは面白いですね

テキストなどを重ねることができる

このサイトの環境

  1. Elementor Pro
  2. コンテナ(オプション)
  3. セクションでもできるかは不明

コンテナの背景画像

コンテナ編集 ➡︎ スタイル

  1. 背景
  2. 背景タイプをスライドショー
  3. 背景画像を選択
  4. 画像遅延ロードとKen Burnsエフェクトは選択したい

切り替える時間やトランジション、所要時間糖を変更してみるのも面白いと思います。

背景オーバーレイ

明るい画像に文字を重ねた場合、読み取ることが苦痛に感じる時は、オーバーレイの機能を使って、テキストを読みやすくしよう。

テキストなどを重ねることができる

スタイル

  1. 背景オーバーレイ
  2. 背景タイプ クラシック
  3. 色を選択 サンプルは、黒 #000000
  4. 不透明度を調整して好みの明るさにしよう

スライドショーの実際のページを

全画面を風景のスライドショーで楽しめるように背景画を設定しています。

めんど旅 日本の風景のリンクはここから

Tips iframe

HTMLウイジェットに

下の<iframe> ….. </iframe>コードを記すと、上のように他のサイトのページを表示することができます。

				
					<iframe id="inlineFrameExample"
    title="Inline Frame Example"
    width="800"
    height="600"
    src="https://tabi.i-mks.site/category/cat_gallery/">
</iframe>
				
			

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

背景画像のスライドショー

記事の見出し番号

関連記事

iframe

iframeを使って、他サイトをページに表示させることができます。

Scroll Snap

WEBページでスクロールを所定の位置で一旦止まるように設定することができると可読性が上がりそう。

スクロール効果 横移動

ページをスクロールさせると画像が横方向に移動させる。注目させたり違和感を感じさせる時に使える。

見出し装飾CSS

投稿記事の見出しを CSS で装飾できれば、編集作業は大幅に削減で、また、ページの見栄えも良くなる。

最新記事

iframe

iframeを使って、他サイトをページに表示させることができます。

例)スクロール効果

スクロールの効果のサンプルページです。印象に残るページの参考にしていただけると良いですね。Elementorより。

Scroll Snap

WEBページでスクロールを所定の位置で一旦止まるように設定することができると可読性が上がりそう。

スクロール効果 横移動

ページをスクロールさせると画像が横方向に移動させる。注目させたり違和感を感じさせる時に使える。