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. webflow003-01

    基本要素の設置(webflow)

    サイト制作を進めながら学習したことを書いていきます。今回は基本要素設置の紹介になります。…

  2. filmora-pho019-01

    教育コレクション/タイトル33種(Filmora)

    教育コレクション/タイトル33種(Filmora); from yasuo kishioka o…

  3. keynote-animation01

    インとアウトのアニメーション(Keynote Animation…

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

  4. filmora-pho004-01

    テキスト「テロップ編」(Filmora)

    テキスト「テロップ編」(Filmora); from yasuo kishioka on Vim…

  5. okakishi-chaya_img05

    中面3ページにインタラクションとライトボックスを設定(webfl…

    架空サイト【岡岸茶屋】に「お店の紹介」「甘味メニュー」「おみやげ」ページを作成。お店の紹介ページ…

  6. chart-cartoon-film1-1

    Keynoteでグラフアニメーション/2D編(Keynote)

    Keynoteでグラフアニメーション/2D編(Keynote); from yasuo kish…

  7. webflow006-01

    ListとList Itemの使用(webflow)

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

  8. simpleshow01

    simpleshow試作その1(Adobe Premiere P…

    Adobe Premiere Pro CC/Adobe After Effects CCの学習用に…

PAGE TOP