フルスクリーンで背景画像を表示させてさらに下にコンテンツを続けたい。

前提・実現したいこと

初めまして。質問宜しくお願い致します。

こちらの、jQueryプラグインによる背景画像によるスライドを利用したいのですが、

https://liginc.co.jp/designer/archives/7149

フルスクリーンの高さを取得してその高さから下にコンテンツを表示させたいのですが、
それをどうやったらいいのかがわかりません。
とりあえずコンテンツが下に追加できるかどうかを試したく、
まだサイトとしては簡易的なものです。
追加できるようであれば、作り込んで行こうと思っています。

どうぞご教授頂きたくお願いいたします。

下記がjsファイルの内容です。

該当のソースコード

( function( $ ){
    String.prototype.format = function()
    {
        var args = arguments;
        return this.replace(/{(\d+)}/g, function(match, number)
        {
            return typeof args[number] != 'undefined'
            ? args[number]
            : match
            ;
        });
    };


    var $backgrounds = $( "<ul class='sm-slider'></ul>" ),
        methods = {

        // Init plugin
        init : function( settings ) {
            var options = {
                src:        [],
                scaling:    1.17,
                rotating:   3,
                duration:   6,
                fade:       2,
                overlay:    "images/pattern.png"
            }
            
            $.extend( options, settings );
            this.options=options;

            var css = this.mkcss( options.src.length , options.duration , options.fade );
            $('<style type="text/css"></style>').html(css).appendTo('head');
            $backgrounds.html(this.mkhtml( options.src )).prependTo("body");

        },

        // Make HTML Construction
        mkhtml: function( src )
        {
            var html = "" ,
                li = "<li> <span></span> <div> <h3>%title%</h3> </div> </li>";
            for( var i=0,length=src.length; i<length; i++ )
            {
                var title = src[i].title ? src[i].title : "";
                html+=li.replace("%title%",title);
            }
            return html;
        },

        /**
         * [mkcss description]
         * @param  {int} bgCount        background count
         * @param  {int} duration     duration
         * @return {string}             CSS string
         */
        mkcss: function( bgCount , duration , fade  ) 
        {
            var 
            total_time = duration*bgCount,
            fadeInPercentile = (fade/total_time)*100,
            remainPercentile = (duration/total_time)*100,
            fadeOutPercentile = (remainPercentile+(fadeInPercentile*0.6)),
            fadeOutPercentile_title = (remainPercentile+(fadeInPercentile*0.3)),
            keyframes = "@keyframes imageAnimation {0% {opacity: 0;animation-timing-function: ease-in;}{0}% {opacity: 1;}{1}% {opacity: 1;}{2}% {opacity: 0; animation-timing-function: ease-out;transform: scale(1.17) translateY(-4%) rotateZ(3deg);}100% { opacity: 0;transform: scale(1.17) translateY(-4%) rotateZ(3deg); }} @keyframes titleAnimation {0% { opacity: 0;transform: translateY(-200px); }{0}% { opacity: 1;transform: translateY(0%); }{1}% { opacity: 1;transform: translateY(0%); }{3}% { opacity: 0; transform: scale(0.4) translateY(100%); }100% { opacity: 0; }}".format(fadeInPercentile,remainPercentile,fadeOutPercentile,fadeOutPercentile_title),
            otherCSS = ".sm-slider,.sm-slider:after { margin: 0;padding: 0;list-style: none;position: fixed;width: 100%;height: 100%;top: 0px;left: 0px;z-index: -1; }.sm-slider:after { content: '';background: transparent url({0}) repeat top left;z-index: 0; }.sm-slider li span { width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;color: transparent;background-size: cover;background-position: 50% 50%;background-repeat: none;opacity: 0;z-index: 0;animation: imageAnimation {1}s linear infinite 0s; }.sm-slider li div { z-index: 1000;position: absolute;bottom: 30px;left: 0px;width: 100%;text-align: center;opacity: 0;color: #fff;animation: titleAnimation {1}s linear infinite 0s; }".format(this.options.overlay,total_time),
            css = keyframes+otherCSS,
            src = this.options.src;

            for(var i=0;i<bgCount;i++)
            {
                var bg = src[i];
                css += ".sm-slider li:nth-child({0}) span { background-image: url('{1}');animation-delay: {2}s; } .sm-slider li:nth-child({0}) div { animation-delay: {2}s; }".format(i+1 , bg.url, duration*i );

            }

            
            
            if(this.options.rotating===false&&this.options.scaling===false)
            {
                css=css.replace(/transform.*?;/g,"");
            }
            else if(this.options.rotating===false)
            {
                css=css.replace(/rotateZ(.*?deg)/g,"");
            }
            else if(this.options.scaling===false)
            {
                css=css.replace(/scale(.*?)/g,"");
            }
            
            if(this.options.rotating)
            {
                css=css.replace(/rotateZ(.*?)/g,"rotateZ({0}deg)".format(this.options.rotating));
            }
            if(this.options.scaling)
            {
                css=css.replace(/scale(.*?)/g,"scale({0})".format(this.options.scaling));
            }

            css = this.addPrefix(css);
            return css;
        },

        /**
         * [addPrefix description]
         * @param {string} css       The string of CSS to be added prefix
         */
        addPrefix: function( css ) 
        {
            var
            keyframes = /@(keyframes[\s\S]*?100%.*?\{[\s\S]*?\}[\s\S]*?\})/g,
            cssProperties = /(?:animation|transform)[:-].*?;/g;

            css = css.replace(keyframes,"@-webkit-$1 @-moz-$1 @-ms-$1 @-o-$1 @$1").replace(cssProperties,"-webkit-$& -moz-$& -ms-$& -o-$& $&");
            return css;
        }
    }

    

    

    // The plugin
    $.sublime_slideshow = function( options ) {
        methods.init( options );
    };

    
})( jQuery );

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/base.css" rel="stylesheet">

<!-- background slided -->
<link rel="stylesheet" type="text/css" href="css/sublimeSlideshow.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/index.css" media="all" />
<script type="text/javascript" src="js/loadCSS.js"></script>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.sublimeSlideshow.js"></script>

<script type="text/javascript">
    $(function(){
        $.sublime_slideshow({
            src:[
            {url:"images/visual-01.jpg",title:"星空"},
            {url:"images/visual-02.jpg"},
            {url:"images/visual-03.jpg",title:"月夜"}
            ],
            duration:   7,
            fade:       1,
            scaling:    1.2,
            rotating:   2,
            overlay:    "images/pattern.png"
        });
    });
</script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

  
</head>
<body>
<div id="visual_pc"></div>

<!-- sma -->
<div class="container-fluid visual sma_head">
<p><a id="modal-open">【クリックでモーダルウィンドウを開きます。】</a></p>
</div>

<div id="info">
    <p id="pname">SublimeSlideshow</p>
    <p id="pinfo">CSS3を利用したフルスクリーンスライドショーjQueryプラグイン</p>
    <a id="link" target="_blank" href="http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/">元ネタ</a>
</div>

<div id="FirstView">
<h2 class="text01">test</h2>
</div>

<!-- ここから下を表示させたい -->
<div id="cont">sitano</div>

<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.js"></script>
<script src="js/modal.js"></script>
</body>
</html>


/* スライダー用スタイル */

.sm-slider, .sm-slider::after {
 margin: 0;
 padding: 0;
 list-style: none;
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0px;
 left: 0px;
 z-index: -1;
}
/* 追加したスタイル */
#FirstView {
 height: 100%;
 background-image: url(../images/visual_txt01.png);
 background-repeat: no-repeat;
 background-position: center 48%;
 text-align: center;
}
#FirstView .text01 {
 display: none;
}


/* サイト全般のスタイル */

@media (min-width: 992px) {
  .pcnone {
		display: none;
		}
}
@media (max-width: 991px) {
  .smnone {
		display: none;
		}
}
/************　head　************/

@media (max-width: 767px) {
  .pc_head {
		display: none;
		}
}
@media (min-width: 768px) {
  .sma_head {
		display: none;
		}
}
/************　sma modal window　************/

#modal-open {
  color: #cc0000;
}
/* モーダル コンテンツエリア */
#modal-main {
　　display: none;
　　width: 500px;
　　height: 300px;
　　margin: 0;
　　padding: 0;
　　background-color: #ffffff;
　　color: #666666;
　　position:fixed;
　　z-index: 2;
}
/* モーダル 背景エリア */
#modal-bg {
　　display:none;
　　width:100%;
　　height:100%;
　　background-color: rgba(0,0,0,0.5);
　　position:fixed;
　　top:0;
　　left:0;
　　z-index: 1;
}
#cont {
text-align: center;
    width: auto;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    background-color: #FFFFFF;
}

kei344

2018/02/05 12:24 編集

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、提示されたコードはリンク先にあるプラグイン自体のコードなので、それをどのHTML/CSSにどうやって実装したかがわかりません。プラグイン自体はコードではなく公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）

Riko

2018/02/06 01:36

ありがとうございます。慣れておらず申し訳ございません。今HTMLやCSSを追記しました。これで情報は足りるでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

sublimeSlideshow.cssにCSSを混ぜて書いているなら、やめておいた方がよいです。
下記のようにすればスクロールして下にコンテンツを見せることが一応可能になります。

CSS
1.sm-slider, .sm-slider::after {
2    margin: 0;
3    padding: 0;
4    list-style: none;
5    position: absolute; /* 変更 */
6    width: 100%;
7    height: 100%;
8    top: 0px;
9    left: 0px;
10    z-index: -1;
11    overflow: hidden; /* 追加 */
12}