nealnote/css3-first-screen

## css3-first-screen
<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf-8'>
<title>first-screen</title>
<style type="text/css">
body {
  padding: 0;
  margin: 0;
}
.first-screen {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background: #000;
}
.first-screen-txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -webkit-transform-origin: 50% 50%;
  text-align: center;
  color: #fff;
  opacity: .99;
}
.first-screen-txt h2 {
  font-size: 4em;
  font-family: 'microsoft yahei';
}
.other-screen {
  position:relative;
  background:#fff;
  height:1600px
}
.other-screen-txt {
  font-size: 500%;
}
</style>
</head>

<body>
<div class="first-screen">
  <img id="J_first-screen-img" src="http://s.cn.bing.net/az/hprichbg/rb/MountainSunset_ZH-CN6369748777_1366x768.jpg" alt="" data-width="1366" data-height="768">
  <div class="first-screen-txt">
    <h2>first screen</h2>
  </div>
</div>
<div id="J_first-screen-holder"></div>
<div class="other-screen">
  <div class="other-screen-txt">other screen</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
;(function($,window,undefined){
  //first screen
  var img = $('#J_first-screen-img'),
    holder = $('#J_first-screen-holder'),
    imgWidth = img.attr('data-width'),
    imgHeight = img.attr('data-height');
  var resizeImg = function(){
    var width = $(window).width(),
      height = $(window).height();
    //scale of img
    var scaleImg = imgWidth / imgHeight;
    //scale of win
    var scaleWin = width / height;

    //set holder height
    holder.css('height', height);

    //set img scale
    if ( scaleImg>scaleWin ) {
      img.css({
        top: 0,
        left: (height * scaleImg - width) / -2,
        height: '100%',
        width: height * scaleImg
      });
      return ;
    }
    //
    img.css({
      top: (width / scaleImg - height) * -.5,
      left: 0,
      height: width / scaleImg,
      width: '100%'
    });
  }
  resizeImg();
  $(window).on('resize', resizeImg);

  //effect scroll
  $(window).on('scroll', function(){
    var scrollTop = $(this).scrollTop(),
        height = $(window).height();
    var opacity = Math.max(1 - scrollTop / $(window).height(), .2);
    //img
    img.css("opacity", opacity);
    //text
    img.next().css("opacity", opacity <= 0.99 ? opacity : 0.99);
  });
})(jQuery,window);
</script>
</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset='utf-8'>
	<title>first-screen</title>
	<style type="text/css">
	body {
	padding: 0;
	margin: 0;
	}
	.first-screen {
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background: #000;
	}
	.first-screen-txt {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-webkit-transform-origin: 50% 50%;
	text-align: center;
	color: #fff;
	opacity: .99;
	}
	.first-screen-txt h2 {
	font-size: 4em;
	font-family: 'microsoft yahei';
	}
	.other-screen {
	position:relative;
	background:#fff;
	height:1600px
	}
	.other-screen-txt {
	font-size: 500%;
	}
	</style>
	</head>

	<body>
	<div class="first-screen">
	<img id="J_first-screen-img" src="http://s.cn.bing.net/az/hprichbg/rb/MountainSunset_ZH-CN6369748777_1366x768.jpg" alt="" data-width="1366" data-height="768">
	<div class="first-screen-txt">
	<h2>first screen</h2>
	</div>
	</div>
	<div id="J_first-screen-holder"></div>
	<div class="other-screen">
	<div class="other-screen-txt">other screen</div>
	</div>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script type="text/javascript">
	;(function($,window,undefined){
	//first screen
	var img = $('#J_first-screen-img'),
	holder = $('#J_first-screen-holder'),
	imgWidth = img.attr('data-width'),
	imgHeight = img.attr('data-height');
	var resizeImg = function(){
	var width = $(window).width(),
	height = $(window).height();
	//scale of img
	var scaleImg = imgWidth / imgHeight;
	//scale of win
	var scaleWin = width / height;

	//set holder height
	holder.css('height', height);

	//set img scale
	if ( scaleImg>scaleWin ) {
	img.css({
	top: 0,
	left: (height * scaleImg - width) / -2,
	height: '100%',
	width: height * scaleImg
	});
	return ;
	}
	//
	img.css({
	top: (width / scaleImg - height) * -.5,
	left: 0,
	height: width / scaleImg,
	width: '100%'
	});
	}
	resizeImg();
	$(window).on('resize', resizeImg);

	//effect scroll
	$(window).on('scroll', function(){
	var scrollTop = $(this).scrollTop(),
	height = $(window).height();
	var opacity = Math.max(1 - scrollTop / $(window).height(), .2);
	//img
	img.css("opacity", opacity);
	//text
	img.next().css("opacity", opacity <= 0.99 ? opacity : 0.99);
	});
	})(jQuery,window);
	</script>
	</body>
	</html>