menu

スライドショーの設置(webflow)

サイト制作を進めながら学習したことを書いていきます。
今回はスライドショー設置の紹介になります。

◎スライドショーに掲載する画像をAssets/[Upload]より読み込む。

webflow002-02

◎Add/Elements/Layout/[Section]をドラッグして、ナビゲーションの下に配置する。

webflow002-03

◎[Section]を選択した状態で、Selector:に任意の名称を設定する。
・設定した名称がNvigatorに反映され、スタイルシートに書き出されます。

webflow002-04

webflow002-05

◎Components/[Slider]を[Section]の中に配置する。
・Navigatorで配置されていることを確認出来ます。

webflow002-06

webflow002-07

◎左右はブラウザの幅になるので高さを任意で設定する。

webflow002-08

◎ [Slider]を配置した直後のスライドの数は2つですが、
Slider Settings/[Add Slide]の選択でスライドの数を増やせます。

webflow002-09

webflow002-10

◎Slide 1を選択した状態でSelector:に任意の名称を設定する。

webflow002-11

◎Background/画像アイコンを選択する。

webflow002-12

◎[Choose Image]から先に読み込んでおいた中から配置したい画像を選択する。

webflow002-13

◎画像の配置方法をSize:/Position:/Tile:/Fixed:で設定する。

webflow002-14

◎掲載する画像を同じ手順で設定した後、スライド全体の動作をSlider Settingsで設定する。
・自動でスライドさせるには、[Auto-play slides]の項目をチェックする。

webflow002-15

▽サンプル
live-preview

▷Adobe Museでホームページの制作/岸岡デザイン事務所
http://y-kishioka.com

▷Movie Web Magazine/KISHIOKA.DESIGN
http://kishioka.design

webflow001-01ナビゲーションの設置。(webflow)

audio-visualizer-set01音楽とマウスでビジュアルを操作(Adobe Muse CC)

関連記事

  1. photoshop-gallery003

    Photoshop Gallery 003

  2. filmora-pho021-01

    教育コレクション/オーバーレイ5種(Filmora)

    教育コレクション/オーバーレイ5種(Filmora); from yasuo kishioka …

  3. ch-lipthink01

    シーンオーディオからリップシンクを計算(Adobe Charac…

    Character Animaterを試作品を作りながら学習中 !!「タイムライン/シーンオーデ…

  4. keynote-animation02

    トランジションエフェクトのアニメーション(Keynote Ani…

    【Keynote】をプレゼンテーション用としての利用以外に、ネット上などで掲載をするための動画作…

  5. div_block_img01

    Divブロックの説明(webflow)

    webflowを使用してのサイト制作を進めながら学習したことを書いていきます。今回は「Divブロ…

  6. photoshop-gallery001

    Photoshop Gallery 001

  7. filmora-pho014-01

    トランジション「ベーシック編6(終)」(Filmora)

    トランジション「ベーシック編6(終) 」(Filmora) from yasuo kishiok…

  8. filmora-002

    15種類の海外映画・ドラマ風色調効果を試してよう!(Filmor…

    Filmora9で動画編集!!色調の統一を行うために3D LUTという色の明度・彩度・色相など操…

PAGE TOP