├── README.md
├── index.html
├── css
└── scrollbackground.css
└── js
└── scrollbackground.js
/README.md:
--------------------------------------------------------------------------------
1 | # scrollbackground
2 | 滚动背景效果
3 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | scrollBackground 滚动背景
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
20 |
--------------------------------------------------------------------------------
/css/scrollbackground.css:
--------------------------------------------------------------------------------
1 | .cpt-scollBg{
2 | -moz-backface-visibility: hidden;
3 | -webkit-backface-visibility: hidden;
4 | -o-backface-visibility: hidden;
5 | -ms-backface-visibility: hidden;
6 | backface-visibility: hidden;
7 | @include translate3d(0,0,0);
8 | transform: translate3d(0,0,0);
9 | left: 0;
10 | opacity: 1;
11 | overflow: hidden;
12 | position: fixed;
13 | top: 0;
14 | vertical-align: center;
15 | }
16 |
17 |
18 | /*@-moz-keyframes cpt-scollBg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-1920px,0,0); -webkit-transform: translate3d(-1920px,0,0); -o-transform: translate3d(-1920px,0,0); -ms-transform: translate3d(-1920px,0,0); transform: translate3d(-1920px,0,0); } }
19 | @-webkit-keyframes cpt-scollBg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-1920px,0,0); -webkit-transform: translate3d(-1920px,0,0); -o-transform: translate3d(-1920px,0,0); -ms-transform: translate3d(-1920px,0,0); transform: translate3d(-1920px,0,0); } }
20 | @-o-keyframes cpt-scollBg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-1920px,0,0); -webkit-transform: translate3d(-1920px,0,0); -o-transform: translate3d(-1920px,0,0); -ms-transform: translate3d(-1920px,0,0); transform: translate3d(-1920px,0,0); } }
21 | @-ms-keyframes cpt-scollBg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-1920px,0,0); -webkit-transform: translate3d(-1920px,0,0); -o-transform: translate3d(-1920px,0,0); -ms-transform: translate3d(-1920px,0,0); transform: translate3d(-1920px,0,0); } }
22 | @keyframes cpt-scollBg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-1920px,0,0); -webkit-transform: translate3d(-1920px,0,0); -o-transform: translate3d(-1920px,0,0); -ms-transform: translate3d(-1920px,0,0); transform: translate3d(-1920px,0,0); } }*/
--------------------------------------------------------------------------------
/js/scrollbackground.js:
--------------------------------------------------------------------------------
1 | (function($){
2 | //滚动背景
3 | $.fn.scrollbackground = function(options){
4 | return this.each(function(){
5 | var $this = $(this);
6 | var defaultValuescrollBg = {
7 | url: 'http://www.daiwei.org/works/UI/imooc/img/bg.jpg', //图片地址
8 | bgPosition: 'bottom left', //图片的位置
9 | bgColor: '#348cb2', //div背景颜色
10 | bgRepeat: 'repeat-x', //重复
11 | imgwidth: 1920, //图片的宽度 是backgroundsize的倍数
12 | height: '100%', //height 100% px
13 | position: 'absolute', //定位方式 绝对定位
14 | duration: 60, //动画执行时间
15 | };
16 |
17 | var opt = $.extend(defaultValuescrollBg,options||{});
18 |
19 | defaultValuescrollBg.init = function(){
20 | defaultValuescrollBg.setCssAnimation();
21 | $this.css({
22 | position: 'relative',
23 | overflow: 'hidden',
24 | });
25 | $('').css({
26 | 'background-color': opt.bgColor,
27 | 'background-image': 'url('+opt.url+')',
28 | 'background-position': opt.bgPosition,
29 | 'background-repeat': opt.bgRepeat,
30 | 'background-size':(opt.imgwidth)+'px auto',
31 | '-moz-animation': 'cpt-scollBg '+opt.duration+'s linear infinite',
32 | '-webkit-animation': 'cpt-scollBg '+opt.duration+'s linear infinite',
33 | '-o-animation': 'cpt-scollBg '+opt.duration+'s linear infinite',
34 | '-ms-animation': 'cpt-scollBg '+opt.duration+'s linear infinite',
35 | animation: 'cpt-scollBg '+opt.duration+'s linear infinite',
36 | height: opt.height,
37 | width:opt.imgwidth * 3,
38 | position:opt.position,
39 | }).appendTo($this);
40 | };
41 |
42 | defaultValuescrollBg.setCssAnimation = function(){
43 | var browserType = ['-webkit-','-moz-','-ms-','-o-','']
44 | var str = '';
45 | for(var i = 0; i