google Plus标题内容动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 google Plus标题内容动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>google Plus标题内容动画特效</title>
		<link rel="stylesheet" type="text/css" href="css/default.css" />

		<!-- Edit Below -->
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
		<script type="text/javascript" src="js/jquery.appear.js"></script>
		<script src="../file/js/modernizr.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="header">
				<h1>Google Plus App Tile Animation</h1>	
			</div>
		
			<div class="main">
	        	<div class="card"></div>
				<div class="card"></div>
				<div class="card"></div>
				<div class="card"></div>
				<div class="card"></div>
				<div class="card"></div>
				<div class="card"></div>
				<div class="card"></div>
	      	</div>
		</div><!-- Container -->
	
	<script type='text/javascript'>
		$(function() {
		  $(document.body).on('appear', '.card', function(e, $affected) {
		    // add class called “appeared” for each appeared element
		    $(this).addClass("appeared");
		  });
		  $('.card').appear({force_process: true});
		});
	</script>
</body>
</html>

JS代码(jquery.appear.js):

/* * jQuery appear plugin * * Copyright (c) 2012 Andrey Sidorov * licensed under MIT license. * * https://github.com/morr/jquery.appear/ * * Version:0.3.3 */
(function($){
	var selectors = [];
	var check_binded = false;
	var check_lock = false;
	var defaults ={
	interval:250,force_process:false}
var $window = $(window);
	var $prior_appeared;
	function process(){
	check_lock = false;
	for (var index = 0;
	index < selectors.length;
	index++){
	var $appeared = $(selectors[index]).filter(function(){
	return $(this).is(':appeared');
}
);
	$appeared.trigger('appear',[$appeared]);
	if ($prior_appeared){
	var $disappeared = $prior_appeared.not($appeared);
	$disappeared.trigger('disappear',[$disappeared]);
}
$prior_appeared = $appeared;
}
}
// "appeared" custom filter $.expr[':']['appeared'] = function(element){
	var $element = $(element);
	if (!$element.is(':visible')){
	return false;
}
var window_left = $window.scrollLeft();
	var window_top = $window.scrollTop();
	var offset = $element.offset();
	var left = offset.left;
	var top = offset.top;
	if (top + $element.height() >= window_top && top - ($element.data('appear-top-offset') || 0) <= window_top + $window.height() && left + $element.width() >= window_left && left - ($element.data('appear-left-offset') || 0) <= window_left + $window.width()){
	return true;
}
else{
	return false;
}
}
$.fn.extend({
	// watching for element's appearance in browser viewport appear:function(options){
	var opts = $.extend({
}
,defaults,options ||{
}
);
	var selector = this.selector || this;
	if (!check_binded){
	var on_check = function(){
	if (check_lock){
	return;
}
check_lock = true;
	setTimeout(process,opts.interval);
}
;
	$(window).scroll(on_check).resize(on_check);
	check_binded = true;
}
if (opts.force_process){
	setTimeout(process,opts.interval);
}
selectors.push(selector);
	return $(selector);
}
}
);
	$.extend({
	// force elements's appearance check force_appear:function(){
	if (check_binded){
	process();
	return true;
}
;
	return false;
}
}
);
}
)(jQuery);

CSS代码(style.css):

/* Custom Stylesheet */
body{background:#f3f3f3;}
h1{color:#000;}
.main{margin-top:50px;}
.card{background:#fff url(../img/wpb9BKE.jpg) center center;width:350px;height:300px;box-shadow:0 1px 2px rgba(0,0,0,0.5);border-radius:3px 3px;margin:0 auto 10px;-webkit-transition:all 400ms ease;-moz-transition:all 400ms ease;-o-transition:all 400ms ease;transition:all 400ms ease;-webkit-transform:translate3d(0px,100px,0) rotateX(-30deg) scale(1.25,1.25);-moz-transform:translate3d(0px,100px,0) rotateX(-30deg) scale(1.25,1.25);transform:translate3d(0px,100px,0) rotateX(-30deg) scale(1.25,1.25);opacity:0;}
.card.appeared{-webkit-transform:translate3d(0px,0px,0px) rotateX(0) scale(1,1);-moz-transform:translate3d(0px,0px,0px) rotateX(0) scale(1,1);transform:translate3d(0px,0px,0px) rotateX(0) scale(1,1);opacity:1;}

附件:下载该文件资源,减少时间成本(增值服务)