質問編集履歴
3
触った部分追記、タグ追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -297,3 +297,7 @@
|
|
|
297
297
|
})( jQuery );
|
|
298
298
|
|
|
299
299
|
```
|
|
300
|
+
|
|
301
|
+
|
|
302
|
+
|
|
303
|
+
自分で触ったのは、position: fixed;を削除した部分です。
|
2
code修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -34,6 +34,8 @@
|
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
|
|
37
|
+
```ここに言語を入力
|
|
38
|
+
|
|
37
39
|
( function( $ ){
|
|
38
40
|
|
|
39
41
|
String.prototype.format = function()
|
|
@@ -293,3 +295,5 @@
|
|
|
293
295
|
|
|
294
296
|
|
|
295
297
|
})( jQuery );
|
|
298
|
+
|
|
299
|
+
```
|
1
js内容の追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
こちらの、
|
|
5
|
+
こちらの、jQueryプラグインによる背景画像によるスライドを利用したいのですが、
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
@@ -23,3 +23,273 @@
|
|
|
23
23
|
高さを保持できておらず、続くコンテンツと被ってしまっている状態です。
|
|
24
24
|
|
|
25
25
|
また、徐々に拡大はしますが、高さも拡大していってしまっています。
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
下記がjsファイルの内容です。
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
( function( $ ){
|
|
38
|
+
|
|
39
|
+
String.prototype.format = function()
|
|
40
|
+
|
|
41
|
+
{
|
|
42
|
+
|
|
43
|
+
var args = arguments;
|
|
44
|
+
|
|
45
|
+
return this.replace(/{(\d+)}/g, function(match, number)
|
|
46
|
+
|
|
47
|
+
{
|
|
48
|
+
|
|
49
|
+
return typeof args[number] != 'undefined'
|
|
50
|
+
|
|
51
|
+
? args[number]
|
|
52
|
+
|
|
53
|
+
: match
|
|
54
|
+
|
|
55
|
+
;
|
|
56
|
+
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
var $backgrounds = $( "<ul class='sm-slider'></ul>" ),
|
|
66
|
+
|
|
67
|
+
methods = {
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
// Init plugin
|
|
72
|
+
|
|
73
|
+
init : function( settings ) {
|
|
74
|
+
|
|
75
|
+
var options = {
|
|
76
|
+
|
|
77
|
+
src: [],
|
|
78
|
+
|
|
79
|
+
scaling: 1.17,
|
|
80
|
+
|
|
81
|
+
rotating: 3,
|
|
82
|
+
|
|
83
|
+
duration: 6,
|
|
84
|
+
|
|
85
|
+
fade: 2,
|
|
86
|
+
|
|
87
|
+
overlay: "images/pattern.png"
|
|
88
|
+
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
$.extend( options, settings );
|
|
94
|
+
|
|
95
|
+
this.options=options;
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
var css = this.mkcss( options.src.length , options.duration , options.fade );
|
|
100
|
+
|
|
101
|
+
$('<style type="text/css"></style>').html(css).appendTo('head');
|
|
102
|
+
|
|
103
|
+
$backgrounds.html(this.mkhtml( options.src )).prependTo("body");
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
},
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
// Make HTML Construction
|
|
112
|
+
|
|
113
|
+
mkhtml: function( src )
|
|
114
|
+
|
|
115
|
+
{
|
|
116
|
+
|
|
117
|
+
var html = "" ,
|
|
118
|
+
|
|
119
|
+
li = "<li> <span></span> <div> <h3>%title%</h3> </div> </li>";
|
|
120
|
+
|
|
121
|
+
for( var i=0,length=src.length; i<length; i++ )
|
|
122
|
+
|
|
123
|
+
{
|
|
124
|
+
|
|
125
|
+
var title = src[i].title ? src[i].title : "";
|
|
126
|
+
|
|
127
|
+
html+=li.replace("%title%",title);
|
|
128
|
+
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
return html;
|
|
132
|
+
|
|
133
|
+
},
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
/**
|
|
138
|
+
|
|
139
|
+
* [mkcss description]
|
|
140
|
+
|
|
141
|
+
* @param {int} bgCount background count
|
|
142
|
+
|
|
143
|
+
* @param {int} duration duration
|
|
144
|
+
|
|
145
|
+
* @return {string} CSS string
|
|
146
|
+
|
|
147
|
+
*/
|
|
148
|
+
|
|
149
|
+
mkcss: function( bgCount , duration , fade )
|
|
150
|
+
|
|
151
|
+
{
|
|
152
|
+
|
|
153
|
+
var
|
|
154
|
+
|
|
155
|
+
total_time = duration*bgCount,
|
|
156
|
+
|
|
157
|
+
fadeInPercentile = (fade/total_time)*100,
|
|
158
|
+
|
|
159
|
+
remainPercentile = (duration/total_time)*100,
|
|
160
|
+
|
|
161
|
+
fadeOutPercentile = (remainPercentile+(fadeInPercentile*0.6)),
|
|
162
|
+
|
|
163
|
+
fadeOutPercentile_title = (remainPercentile+(fadeInPercentile*0.3)),
|
|
164
|
+
|
|
165
|
+
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),
|
|
166
|
+
|
|
167
|
+
otherCSS = ".sm-slider,.sm-slider:after { margin: 0;padding: 0;list-style: none;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),
|
|
168
|
+
|
|
169
|
+
css = keyframes+otherCSS,
|
|
170
|
+
|
|
171
|
+
src = this.options.src;
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
for(var i=0;i<bgCount;i++)
|
|
176
|
+
|
|
177
|
+
{
|
|
178
|
+
|
|
179
|
+
var bg = src[i];
|
|
180
|
+
|
|
181
|
+
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 );
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
if(this.options.rotating===false&&this.options.scaling===false)
|
|
194
|
+
|
|
195
|
+
{
|
|
196
|
+
|
|
197
|
+
css=css.replace(/transform.*?;/g,"");
|
|
198
|
+
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
else if(this.options.rotating===false)
|
|
202
|
+
|
|
203
|
+
{
|
|
204
|
+
|
|
205
|
+
css=css.replace(/rotateZ\(.*?deg\)/g,"");
|
|
206
|
+
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
else if(this.options.scaling===false)
|
|
210
|
+
|
|
211
|
+
{
|
|
212
|
+
|
|
213
|
+
css=css.replace(/scale\(.*?\)/g,"");
|
|
214
|
+
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
|
|
218
|
+
|
|
219
|
+
if(this.options.rotating)
|
|
220
|
+
|
|
221
|
+
{
|
|
222
|
+
|
|
223
|
+
css=css.replace(/rotateZ\(.*?\)/g,"rotateZ({0}deg)".format(this.options.rotating));
|
|
224
|
+
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
if(this.options.scaling)
|
|
228
|
+
|
|
229
|
+
{
|
|
230
|
+
|
|
231
|
+
css=css.replace(/scale\(.*?\)/g,"scale({0})".format(this.options.scaling));
|
|
232
|
+
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
|
|
236
|
+
|
|
237
|
+
css = this.addPrefix(css);
|
|
238
|
+
|
|
239
|
+
return css;
|
|
240
|
+
|
|
241
|
+
},
|
|
242
|
+
|
|
243
|
+
|
|
244
|
+
|
|
245
|
+
/**
|
|
246
|
+
|
|
247
|
+
* [addPrefix description]
|
|
248
|
+
|
|
249
|
+
* @param {string} css The string of CSS to be added prefix
|
|
250
|
+
|
|
251
|
+
*/
|
|
252
|
+
|
|
253
|
+
addPrefix: function( css )
|
|
254
|
+
|
|
255
|
+
{
|
|
256
|
+
|
|
257
|
+
var
|
|
258
|
+
|
|
259
|
+
keyframes = /@(keyframes[\s\S]*?100%.*?\{[\s\S]*?\}[\s\S]*?\})/g,
|
|
260
|
+
|
|
261
|
+
cssProperties = /(?:animation|transform)[:-].*?;/g;
|
|
262
|
+
|
|
263
|
+
|
|
264
|
+
|
|
265
|
+
css = css.replace(keyframes,"@-webkit-$1 @-moz-$1 @-ms-$1 @-o-$1 @$1").replace(cssProperties,"-webkit-$& -moz-$& -ms-$& -o-$& $&");
|
|
266
|
+
|
|
267
|
+
return css;
|
|
268
|
+
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
|
|
274
|
+
|
|
275
|
+
|
|
276
|
+
|
|
277
|
+
|
|
278
|
+
|
|
279
|
+
|
|
280
|
+
|
|
281
|
+
|
|
282
|
+
|
|
283
|
+
// The plugin
|
|
284
|
+
|
|
285
|
+
$.sublime_slideshow = function( options ) {
|
|
286
|
+
|
|
287
|
+
methods.init( options );
|
|
288
|
+
|
|
289
|
+
};
|
|
290
|
+
|
|
291
|
+
|
|
292
|
+
|
|
293
|
+
|
|
294
|
+
|
|
295
|
+
})( jQuery );
|