【スイーツ大好き】スライダー体験版
レベル★★☆
● 動くパネルを体験する。
●仕上がりサンプルを見る
多くの公式サイトのトップページに、取り入れられているスライダー。 狭い領域に多くの商品やサービスを宣伝することができる。スクリプトは、プラグインで動いているので、設置も簡単。CSSを組み込むとこんなにレイアウトが変わるなんてまるでマジックですね。グラフィックも楽しく爽快な動きがとてもかっこいい!
定のエリアでコマーシャルパネルが動きます。多くの公式サイトでも使われているので、その一例を見てみましょう。
■ソフトバンク(2019年3月付レイアウト)
https://www.softbank.jp/
![](https://wwweb.jp/wp/wp-content/uploads/2019/03/softbank.jpg)
■ 住友銀行(2019年3月付)
https://www.smbc.co.jp/
![](https://wwweb.jp/wp/wp-content/uploads/2019/03/スクリーンショット-2019-03-11-8.28.26.jpg)
■ docomoドコモ公式サイト(2019年3月付)
https://www.nttdocomo.co.jp/
![](https://wwweb.jp/wp/wp-content/uploads/2019/03/スクリーンショット-2019-03-11-14.30.49.jpg)
左右に動くものもあれば、フッとフェイドアウトし、次のパネルがフェイドインしたりする動きをするものもあります。
【授業課題の一例】
●Webクリエイター初級
http://cocohp.com/sample/moco_rwd/
![](https://wwweb.jp/wp/wp-content/uploads/2019/03/スクリーンショット-2019-03-11-14.34.03.jpg)
全くの初心者から、およそ1ヶ月間〜半年間、週に1-2日。学ぶだけで、このサンプルが作れるようになります。
● さぁ!動くパネルを体験しよう。
(仕上がり時間およそ10分〜)
![](https://wwweb.jp/wp/wp-content/uploads/2019/03/スクリーンショット-2019-03-11-8.49.41.jpg)
恐れ入りますが、データDLにはパスワード認証が必要です。お問い合わせください。
![](https://wwweb.jp/wp/wp-content/uploads/2021/05/images-75x75.jpg)
![](https://wwweb.jp/wp/wp-content/uploads/2020/10/balloons-1615032_960_720-75x75.jpg)