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

去年くらいからよく見かけるようになったスクロールすると、カーテンを持ち上げるように次々にコンテンツが表示されるテクニックをスタイルシートのみ版とスクリプト併用パワーアップ版の二つを紹介します。

まずは、スタイルシートのみ版から。

サイトのキャプチャ

Fixed image backgrounds

スクロールするとヘッダは固定表示で、画像を配置した背景がカーテンを持ち上げるように次のコンテンツが表示されます。
背景は写真も面白いですが、ソリッドなカラーでも面白い効果が得られますね。

サイトのキャプチャ

Fixed image backgroundsをスクロール

実装はシンプルです、ポートフォリオなどでよく見かけるテクニックです。

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>
以下略

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;}

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

サイトのキャプチャ

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;
}

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;
$('').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; }); }); [/javascript]

top of page

©2017 coliss