質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

550閲覧

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

Riko

総合スコア15

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/02/05 10:09

編集2018/02/06 01:35

前提・実現したいこと

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

こちらの、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; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/02/05 12:24 編集

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

2018/02/06 01:36

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

回答1

0

ベストアンサー

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}

投稿2018/02/06 01:50

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Riko

2018/02/06 02:00

sublimeSlideshow.css に追加したスタイルは削除し、 サイト全般用のスタイルに教えていただいたソースを!importantを追加して記載しましたが、 #cont以下のコンテンツは背景画像の上に表示されてしまいました。 他に何か修正すべき点があるでしょうか?
kei344

2018/02/06 02:02

ああ、そういうことね。 #cont{margin-top:100vh;}
Riko

2018/02/06 02:05

ありがとうございます!! 私の説明がいけなかったんですね。。。 ほんとお手数おかけしましたが、本当に助かりました。
kei344

2018/02/06 02:13

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。
Riko

2018/02/06 02:44

あ、すみません!解決にします。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問