CSS3 Fullscreen Slideshow

Source code from Codrops

[themify_button nofollow=”no” link=”http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/CSS3FullscreenSlideshow.zip”]Download[/themify_button]

※ソースは無料で配布されています。

How To Use

https://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/

My public portfolio

[themify_portfolio_posts style=”auto_tiles” load_more=”no” limit=”7″ post_meta=”yes” post_date=”yes” image_w=”600″ image_h=”600″]

See Sample Site　

  Code & Script

CSS3 Fullscreen Slideshow の画像をCSSファイルで書き換えるだけです。

今回のホームページ制作は、広告会社のコマーシャルに使えるかなと思って創ってみました。

自動的にいろいろなイメージを画面いっぱいに見せてくれるところがとても気に入っています。

コンテンツ内容もユーザーの目に焼き付いて、印象に残りやすいと期待大です。

 

コーディングを始める際に意識したいこと

ソースコードはcodropsから無料DLできます。

Computer

SourceCode 

Database

バックアップデータ

ヘッダーにリンクしているソースコード

これ以外にもありますが、ほぼCSSでデザイン構成されています。

Codropsの公式のダウンロードページでは、デモページが４ページあり、動き方についても確認できます。

Bootstrapのグローバルメニュー部分は、比較的簡単にくっつけることが出来ました！

ただフッター に関しては、きちんとしたコード設計が必要になって来ます。

<!-- HTML footer --> <footer> <div> <div> <section> <nav> <a href="#" data-hover="Copyright">Copyright © 2021 デザインレシピ. All rights reserved.</a> <a href="#" data-hover="Site Map">Site Map</a> </nav> </section> </div> </div> </footer> <!-- HTML footer end -->
<!-- JS footer --> <script src="assets/dist/js/bootstrap.bundle.min.js"></script> <!-- JS footer -->

 

 

 

  Bootstrapについて

先に書いた通り、グローバルメニューには、Bootstrapを使っています。

Bootstrapは、歴史のあるフレームワークですので、一度使い慣れるととても便利なので基本だけでも勉強すると後々すごく役に立ちます。

ナビゲーションメニューとして、モバイルフレンドリーなデザインが気に入っています。

歴史があるので、信頼性と安定感。これも重要だと思って、Bootstrapを採用してみました。

 

Another Sample