[CSS]背景を固定させて、カーテンのようにスクロールさせるテクニック

Post on:2013年5月16日

Demo 1のHTML

HTMLの基本構造は、header要素があり、各スライドはsection要素です。section内には見出しやテキストや画像などを自由に配置できます。

<header>
  <a href="#" id="logo">Logo</a>
</header>

<section id="hero1" class="hero">
  <div class="inner">
    <div class="copy">
    <h1>Choice mountains bro</h1>
    <p>Its like im actually there! But sitting at a computer. Wow, the future is intense!</p>
    </div>
  </div>
</section>

<section class="content">
  <div class="inner">
    <div class="copy">
    <h1>Amazing copy!</h1>
    <p>The words are like jumping out at me man! </p>
    </div>
  </div>
</section>
以下略

</header>

<h1>Choice mountains bro</h1>

<p>Its like im actually there! But sitting at a computer. Wow, the future is intense!</p>

</div>

</section>

<h1>Amazing copy!</h1>

<p>The words are like jumping out at me man! </p>

</div>

</section>

以下略

Demo 1のCSS

box-sizingをborder-boxにし、headerをposition:fixed、各sectionの背景をfixedにします。

html, body{
  margin:0px; padding:0px;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

header{
  z-index: 1;
  position:fixed; 
  width:100%; 
  height:60px; 
  background:rgba(0,0,0,0.1);
}

header a{
  color:white;
  background:rgba(0,0,0,0.1); 
  display:inline-block; 
  padding:0px 30px; 
  height:60px;
  line-height:60px; 
  text-align:center;
  font-family: 'Roboto Slab', serif; 
  text-decoration:none;
  text-transform:uppercase; 
  letter-spacing:2px; 
  font-weight:700;
}
#hero1{
 background:url(http://4.bp.blogspot.com/_AQ0vcRxFu0A/S9shDGGyMTI/AAAAAAAAAYk/kn3WTkY2LoQ/s1600/IMG_0714.JPG);
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
}
#hero2{background: url(http://nexttriptourism.com/wp-content/uploads/2013/02/Natural-Underground-Rivers.jpg);
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
}
.hero, .content{
  text-align:center; 
  position:relative;
  width: 100%;
}

.inner{
  min-height:600px;
  position: relative;
}

.hero .inner{
  background: rgba(0,0,0,0.7) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAYAAACddGYaAAAAD0lEQVQIW2NkQABjRmQOAAM+AGkQsDBSAAAAAElFTkSuQmCC) repeat;}

html, body{

margin:0px; padding:0px;

}

*, *:after, *:before {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

header{

z-index: 1;

position:fixed;

width:100%;

height:60px;

background:rgba(0,0,0,0.1);

}

header a{

color:white;

background:rgba(0,0,0,0.1);

display:inline-block;

padding:0px 30px;

height:60px;

line-height:60px;

text-align:center;

font-family: 'Roboto Slab', serif;

text-decoration:none;

text-transform:uppercase;

letter-spacing:2px;

font-weight:700;

}

#hero1{

background:url(http://4.bp.blogspot.com/_AQ0vcRxFu0A/S9shDGGyMTI/AAAAAAAAAYk/kn3WTkY2LoQ/s1600/IMG_0714.JPG);

background-size:cover;

background-position:center center;

background-attachment:fixed;

}

#hero2{background: url(http://nexttriptourism.com/wp-content/uploads/2013/02/Natural-Underground-Rivers.jpg);

background-size:cover;

background-position:center center;

background-attachment:fixed;

}

.hero, .content{

text-align:center;

position:relative;

width: 100%;

}

.inner{

min-height:600px;

position: relative;

}

.hero .inner{

background: rgba(0,0,0,0.7) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAYAAACddGYaAAAAD0lEQVQIW2NkQABjRmQOAAM+AGkQsDBSAAAAAElFTkSuQmCC) repeat;}

上記のデモにインスパイアされた、スクリプト併用のもう一つのデモも紹介します。

Slideshow

こちらはスライドショーとしての機能が追加されており、スクロールだけでなく、キーボードの左右の矢印キーでも操作が可能です。

Slideshowをスクロール

背景の写真画像は、ウインドウの表示に合わせて拡大縮小されます。

Demo 2のHTML

こちらはスライドショーが前提なので、背景画像としてdiv要素に配置しています。

<div id="image1" class="img" data-img="image1.jpg"></div>
<div id="image2" class="img" data-img="image2.jpg"></div>
以下略

以下略

Demo 2のCSS

画像を固定させるのは同じですが、HTMLの方に画像を指定しているためシンプルです。

html, body
{
  height: 100%;
  margin: 0;
}
.img
{
  position: relative;
  height: 100%;
  /* attr data-type doesn't work anywhere for the moment :( */
  /* Even in chrome canary */
  /* So we do it the JS way */
  background-image: attr(data-img url); /* Keep it anyway */
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  border-bottom: 3px solid white;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: -2px;
  color: rgba(255,255,255,0.7);
  text-stroke: 2px rgba(0,0,0,0.7);
  cursor: default;
}
.img:last-of-type
{
  border-bottom: none;
}
.img:before
{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.multiline
{
  display: inline-block;
}
.max
{
  display: block;
  font-size: 60px;
  letter-spacing: 1px;
}

html, body

{

height: 100%;

margin: 0;

}

.img

{

position: relative;

height: 100%;

/* attr data-type doesn't work anywhere for the moment :( */

/* Even in chrome canary */

/* So we do it the JS way */

background-image: attr(data-img url); /* Keep it anyway */

background-attachment: fixed;

background-size: cover;

background-position: center;

border-bottom: 3px solid white;

text-align: center;

font-family: 'Open Sans', sans-serif;

font-size: 28px;

font-weight: bold;

letter-spacing: -2px;

color: rgba(255,255,255,0.7);

text-stroke: 2px rgba(0,0,0,0.7);

cursor: default;

}

.img:last-of-type

{

border-bottom: none;

}

.img:before

{

content: '';

display: inline-block;

height: 100%;

vertical-align: middle;

}

.multiline

{

display: inline-block;

}

.max

{

display: block;

font-size: 60px;

letter-spacing: 1px;

}

Demo 2のJavaScript

スクリプトで背景画像やスクロールを制御します。

$(document).ready(function(){
  var isWebkit = navigator && navigator.userAgent.match(/webkit/i);
  var $root = $(isWebkit ? 'body' : 'html');
  var elements = $('div'), elcount = elements.length;
  var scrolling = false;
  // Replacing the CSS attr(... url)
  elements.css('background-image', function(i){
    return 'url('+$(this).data('img')+')';
  });
  //Add permalinks
  elements.each(function(i){
    var $t = $(this);
    var id = $t.attr('id');
    if(!id) return;
    $('<a>').addClass('permalink')
            .attr('href', '#'+id)
            .appendTo($t);
  });
  $root.keydown(function(e){
    if(e.keyCode != 37 && e.keyCode != 39) return;
    var current = scrolling || 0;
    if(scrolling === false)
    {
      var bsT = $root.scrollTop(), t;
      while(current < elcount && (t = elements.eq(current).offset().top) < bsT)
        current++;
    }
    if(e.keyCode == 37) current--;
    else if(scrolling !== false || t == bsT) current++;
    current = (current + elcount) % elcount;
    $root.stop().animate({scrollTop: elements.eq(current).offset().top}, function(){scrolling = false;});
    scrolling = current;
  });
});

$(document).ready(function(){

var isWebkit = navigator && navigator.userAgent.match(/webkit/i);

var $root = $(isWebkit ? 'body' : 'html');

var elements = $('div'), elcount = elements.length;

var scrolling = false;

// Replacing the CSS attr(... url)

elements.css('background-image', function(i){

return 'url('+$(this).data('img')+')';

});

//Add permalinks

elements.each(function(i){

var $t = $(this);

var id = $t.attr('id');

if(!id) return;

$('<a>').addClass('permalink')

.attr('href', '#'+id)

.appendTo($t);

});

$root.keydown(function(e){

if(e.keyCode != 37 && e.keyCode != 39) return;

var current = scrolling || 0;

if(scrolling === false)

{

var bsT = $root.scrollTop(), t;

while(current < elcount && (t = elements.eq(current).offset().top) < bsT)

current++;

}

if(e.keyCode == 37) current--;

else if(scrolling !== false || t == bsT) current++;

current = (current + elcount) % elcount;

$root.stop().animate({scrollTop: elements.eq(current).offset().top}, function(){scrolling = false;});

scrolling = current;

});

[CSS]背景を固定させて、カーテンのようにスクロールさせるテクニック

Demo 1のHTML

Demo 1のCSS

Demo 2のHTML

Demo 2のCSS

Demo 2のJavaScript

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Category

Blog Info

[CSS]背景を固定させて、カーテンのようにスクロールさせるテクニック

Demo 1のHTML

Demo 1のCSS

Demo 2のHTML

Demo 2のCSS

Demo 2のJavaScript

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info