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. minimal-titles-img

    Filmstocksが提供しているAfter Effectsのエ…

    Filmstocksが提供しているAfter Effectsのエフェクト「Minimal Title…

  2. photoshop-art005

    Photoshop Art 005

  3. ae-img001

    MotionElementsの素材を使った習作001

    「MotionElements」は、After Effects、Premiere Proのテ…

  4. webflow009-01

    タブの使用(webflow)

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

  5. webflow01

    『Webflow』始めました。(webflow)

    Muse CCの開発が終了した事もあり、将来的なことを考えて別の制作方法を探していたところ『Webf…

  6. filmora-pho029-01

    Filmoraで動画編集〜スピードコントロール(Filmora)…

    Filmoraで動画編集〜スピードコントロール(Filmora) from yasuo kish…

  7. filmora-pho002-01

    テキスト「オープニング編」(Filmora)

    テキスト「オープニング編」(Filmora); from yasuo kishioka on V…

  8. whiteboard-nimated01

    Whiteboard Animated/サンプル01(Adobe…

    以前、「Whiteboard Animated Elements Library」というコンテンツを…

Adobe Muse

Adobe Museならスピードアップ&コストダウン

My Portfolio

kishioka-design.myportfolio.com
PAGE TOP