jquery+css3华丽滚动效果代码

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

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

以下是 jquery+css3华丽滚动效果代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en" height="100%">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jquery+css3华丽滚动效果</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
    html, body, .banner, .container {
        height:100%;
        text-align: center;
    }
    .block {
        height:300px;
        background: blue;
        margin-bottom: 20px;
    }
    </style>
  </head>

  <body>
  <div class="container">
    <h1>向下滚动鼠标您将看到效果</h1>
  </div>
  <div class="container">
    <h2>Use Smoove to create smooth fade-in effects as you scroll down</h2>
    <div class="row">
      <div class="col-md-6"><div class="block"></div></div>
      <div class="col-md-6"><div class="block"></div></div>
    </div>
    <h2>You can also move objects across the screen...</h2>
    <div class="row">
      <div class="col-md-3"><div class="block" data-move-y="200px" data-move-x="-200px"></div></div>
      <div class="col-md-3"><div class="block" data-move-y="200px" data-move-x="-100px"></div></div>
      <div class="col-md-3"><div class="block" data-move-y="200px" data-move-x="100px"></div></div>
      <div class="col-md-3"><div class="block" data-move-y="200px" data-move-x="200px"></div></div>
    </div>
    <h2>...or rotate them</h2>
    <div class="row">
      <div class="col-md-3"><div class="block" data-move-x="-500px" data-rotate="90deg"></div></div>
      <div class="col-md-3"><div class="block" data-move-y="200px" data-move-x="-200px" data-rotate="45deg"></div></div>
      <div class="col-md-3"><div class="block" data-move-y="200px" data-move-x="200px" data-rotate="-45deg"></div></div>
      <div class="col-md-3"><div class="block" data-move-x="500px" data-rotate="-90deg"></div></div>
    </div>
   
    <h2>Even use cool 3D effects</h2>
    <div class="row">
      <div class="col-md-4"><div class="block" data-rotate-x="90deg" data-move-z="-500px" data-move-y="200px"></div></div>
      <div class="col-md-4"><div class="block" data-rotate-x="90deg" data-move-z="-500px" data-move-y="200px"></div></div>
      <div class="col-md-4"><div class="block" data-rotate-x="90deg" data-move-z="-500px" data-move-y="200px"></div></div>
    </div>
    <div class="row">
      <div class="col-md-3"><div class="block" data-rotate-y="180deg" data-move-z="-200px" data-move-x="-300px"></div></div>
      <div class="col-md-3"><div class="block" data-rotate-x="180deg" data-rotate-y="180deg" data-move-z="-700px"></div></div>
      <div class="col-md-3"><div class="block" data-rotate-x="180deg" data-rotate-y="45deg" data-move-z="-500px"></div></div>
      <div class="col-md-3"><div class="block" data-rotate-y="180deg" data-move-z="-100px" data-move-x="500px"></div></div>
    </div>
    <div class="row">
      <div class="col-md-6"><div class="block" data-rotate-y="270deg" data-move-x="-150%"></div></div>
      <div class="col-md-6"><div class="block" data-rotate-y="270deg" data-move-x="150%"></div></div>
    </div>
    <h2>Scale &amp; skew them...</h2>
    <div class="row">
      <div class="col-md-6"><div class="block" data-scale="5" ></div></div>
      <div class="col-md-6"><div class="block" data-scale="0.2" data-skew="90deg,90deg"></div></div>
    </div>
    
    <h2>Mix it up!</h2>
  </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.smoove.js"></script>
    <script>$('.block').smoove({offset:'40%'});</script>

</body>
</html>

JS代码(jquery.smoove.js):

/*!* jQuery Smoove v0.2.7 (http://smoove.donlabs.com)* Copyright (c) 2014 Adam Bouqdib* Licensed under GPL-2.0 (http://abemedia.co.uk/license)*/
(function ($,window,document){
	$.fn.smoove = function (options){
	$.fn.smoove.init(this,$.extend({
}
,$.fn.smoove.defaults,options));
	return this;
}
;
	$.fn.smoove.items = [];
	$.fn.smoove.loaded = false;
	$.fn.smoove.defaults ={
	offset:150,opacity:0,transition:"all 1s ease,opacity 1.5s ease",transformStyle:'preserve-3d',transformOrigin:false,perspective:1000}
;
	$.fn.smoove.init = function (items,settings){
	items.each(function(){
	var $item = $(this),params = $item.params = $.extend({
}
,settings,$item.data());
	$item.params.opacity = $item.params.opacity / 100;
	$item.data('top',$item.offset().top);
	params.transition = crossBrowser('transition',params.transition,'transform');
	$item.css(params.transition);
	$.fn.smoove.items.push($item);
}
);
	// function for adding vendor prefixes function crossBrowser(property,value,prefix){
	function ucase(string){
	return string.charAt(0).toUpperCase() + string.slice(1);
}
var vendor = ['webkit','moz','ms','o'],properties ={
}
;
	for(var i = 0;
	i < vendor.length;
	i++){
	if(prefix){
	value = value.replace(prefix,'-' + vendor[i] + '-' + prefix);
}
properties[ucase(vendor[i]) + ucase(property)] = value;
}
properties[property] = value;
	return properties;
}
// add event handlers if(!$.fn.smoove.loaded){
	$.fn.smoove.loaded = true;
	var didScroll = false,oldScroll = 0,oldHeight = $(window).height(),oldWidth = $(window).width(),oldDocHeight = $(document).height(),resizing;
	// naughty way of avoiding vertical scrollbars when items slide in/out from the side if($('body').width() === $(window).width()){
	$('body').css('overflow-x','hidden');
}
$(window).resize(function(){
	clearTimeout(resizing);
	resizing = setTimeout(function(){
	var height = $(window).height(),width = $(window).width(),direction = (oldHeight > height) ? direction = 'up':'down',items = $.fn.smoove.items;
	oldHeight = height;
	// responsive support - reassign position values on resize if(oldWidth !== width){
	for(var i = 0;
	i < items.length;
	i++){
	items[i].css(crossBrowser('transform','')).css(crossBrowser('transition',''));
}
// wait for responsive magic to finish var stillResizing = setInterval(function(){
	var docHeight = $(document).height();
	if(docHeight === oldDocHeight){
	window.clearInterval(stillResizing);
	for(var i = 0;
	i < items.length;
	i++){
	items[i].data('top',items[i].offset().top);
	items[i].css(items[i].params.transition);
}
smooveIt(direction);
}
oldDocHeight = docHeight;
}
,500);
}
else{
	smooveIt(direction);
}
oldWidth = width;
}
,500);
}
);
	$(window).on('load',function(){
	smooveIt();
	// throttle scroll handler $(window).scroll(function(){
	didScroll = true;
}
);
	setInterval(function(){
	if ( didScroll ){
	didScroll = false;
	var scrolltop = $(window).scrollTop(),direction = (scrolltop < oldScroll) ? direction = 'up':'down';
	oldScroll = scrolltop;
	smooveIt(direction);
}
}
,250);
}
);
}
function smooveIt(direction){
	for(var i = 0;
	i < $.fn.smoove.items.length;
	i++){
	var $item = $.fn.smoove.items[i],params = $item.params,height = $(window).height(),// if direction isn't set,set offset to 0 to avoid hiding objects that are above the fold offset = (!direction || direction === 'down' && $item.css('opacity') === '1') ? 0:params.offset,itemtop = $(window).scrollTop() + height - $item.data('top');
	// offset in % if(typeof offset === 'string' && offset.indexOf('%')){
	offset = parseInt(offset) / 100 * height;
}
if(itemtop < offset){
	if(params.opacity !== false){
	$item.css({
	opacity:params.opacity}
);
}
var transforms = [],properties = ['move','move3D','moveX','moveY','moveZ','rotate','rotate3d','rotateX','rotateY','rotateZ','scale','scale3d','scaleX','scaleY','skew','skewX','skewY'];
	for(var p = 0;
	p < properties.length;
	p++){
	if(typeof params[properties[p]] !== "undefined"){
	transforms[properties[p]] = params[properties[p]];
}
}
var transform = '';
	for(var t in transforms){
	transform += t.replace('move','translate') + '(' + transforms[t] + ') ';
}
if(transform){
	$item.css(crossBrowser('transform',transform));
	$item.parent().css(crossBrowser('perspective',params.perspective));
	//$item.parent().css(crossBrowser('transformStyle',params.transformstyle));
	if(params.transformOrigin){
	$item.css(crossBrowser('transformOrigin',params.transformOrigin));
}
}
}
else{
	$item.css('opacity',1).css(crossBrowser('transform',''));
}
}
}
}
;
}
( jQuery,window,document ));

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