webflow002-01

STUDY

スライドショーの設置(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)前のページ

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

関連記事

  1. ae-thumbnail200126

    After Effects

    27 Elegant 4K Title Animationsを使って試作

    MotionElementsに掲載されている「27 Elegant…

  2. keynote-animation02

    Keynote Animation

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

    【Keynote】をプレゼンテーション用としての利用以外に、ネット…

  3. filmora-pho009-02

    Filmora

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

    トランジション「ベーシック編1」(Filmora) from ya…

  4. filmora-pho008-01

    Filmora

    動画を分割表示させてドラマ仕立てに(Filmora)

    動画を分割表示させてドラマ仕立てに(Filmora); from …

  5. dimension001

    Dimension

    コーヒーカップを作る(Adobe Dimension CC)

    Adobe Dimension CCを使って、コーヒーカップのシーンを…

  6. webflow005-01

    STUDY

    Link Blockの使用(webflow)

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

  1. div_block_img01

    STUDY

    Divブロックの説明(webflow)
  2. webflow015-01

    STUDY

    フレックスボックスの設定(webflow)
  3. webflow012-01

    STUDY

    不透明度の設定(webflow)
  4. filmora-pho008-01

    Filmora

    動画を分割表示させてドラマ仕立てに(Filmora)
  5. image-text

    Adobe Muse CCを使ったホームページ制作

    テキストに画像を配置(Adobe Muse)
PAGE TOP