利用CSS固定背景交替实现视差滚动效果

最新推荐文章于 2024-06-30 08:30:00 发布
最新推荐文章于 2024-06-30 08:30:00 发布
阅读量2.1k 收藏
点赞数
分类专栏： web前端
利用CSS固定背景交替实现视差滚动效果
 外部样式表部分
*{
 margin:0;
 padding:0;
}
body{
 font-family:"Trebuchet MS", "Myriad Pro", Arial, sans-serif;
 font-size:14px;
 background:#222;
 color:#333;
 
 overflow-x:hidden;
}
h1{
 font-size:56px;
 color:#ccc;
}
h2{
 font-size:20px;
 padding:10px 0px 10px 0px;
 margin:15px 0px 20px 0px;
}
a{
 color:#555;
 text-decoration:none;
}
a:hover{
 color:#222;
}
p{
 padding:5px 0px;
}
.wrapper{
 width:960px;
 margin:100px auto 20px;
 text-align: center;
}
.clear{
 clear:both;
}
.footer{
 text-align:center;
 width:100%;
 padding:20px 0px;
 clear:both;
 margin-top:30px;
}
.footer a{
 margin:0px 20px;
}
.pxs_container{
 width:100%;
 height:420px;
 position:relative;
 border-top:7px solid #333;
 border-bottom:7px solid #333;
 overflow:hidden;
 -moz-box-shadow:0px 0px 7px #000;
 -webkit-box-shadow:0px 0px 7px #000;
 box-shadow:0px 0px 7px #000;
}
.pxs_bg{
 background:transparent url(../images/bg.png) repeat top left;
}
.pxs_bg div{
 position:absolute;
 top:0px;
 left:0px;
 width:7584px; 
 height:420px;
 background-repeat:repeat;
 background-position:top left;
 background-color:transparent;
}
.pxs_bg .pxs_bg1{
 background-image:url(../images/bg1.png);
}
.pxs_bg .pxs_bg2{
 background-image:url(../images/bg2.png);
 
}
.pxs_bg .pxs_bg3{
 background-image:url(../images/bg3.png);
 
}
.pxs_slider_wrapper{
 display:none;
}
.pxs_container ul{
 margin:0px;
 padding:0px;
 list-style:none;
}
ul.pxs_slider{
 position:absolute;
 left:0px;
 top:0px;
 
}
ul.pxs_slider li{
 
 float:left;
 position:relative;
}
ul.pxs_slider li img{
 display:block;
 margin:35px auto 0px auto;
 -moz-box-shadow:0px 0px 7px #222;
 -webkit-box-shadow:0px 0px 7px #222;
 box-shadow:0px 0px 7px #222;
 border: 8px solid transparent;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border-radius:4px;
}
ul.pxs_thumbnails{
 height:35px;
 position:absolute;
 top:320px;
 left:50%;
}
ul.pxs_thumbnails li{
 position:absolute;
 display:block;
}
ul.pxs_thumbnails li img{
 border: 5px solid #FFFFFF;
 -moz-box-shadow:1px 1px 7px #555;
 -webkit-box-shadow:1px 1px 7px #555;
 box-shadow:1px 1px 7px #555;
 cursor:pointer;
 display:block;
 opacity:0.7;
}
ul.pxs_thumbnails li.selected img{
 opacity:1.0;
}
.pxs_navigation span{
 position:absolute;
 width:30px;
 height:60px;
 -moz-box-shadow:0px 0px 2px #000;
 -webkit-box-shadow:0px 0px 2px #000;
 box-shadow:0px 0px 2px #000;
 top:145px;
 opacity:0.6;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border-radius:4px;
 cursor:pointer;
}
.pxs_navigation span:hover{
 opacity:0.9;
}
.pxs_navigation span.pxs_prev{
 background:#000 url(../images/prev.png) no-repeat center center;
}
.pxs_navigation span.pxs_next{
 background:#000 url(../images/next.png) no-repeat center center;
}
.pxs_loading{
 color:#fff;
 font-size:20px;
 padding:15px 15px 15px 50px;
 position:absolute;
 background:#333 url(../images/ajax-loader.gif) no-repeat 10px 50%;
 -moz-border-radius:15px;
 -webkit-border-radius:15px;
 border-radius:15px;
 opacity:0.7;
 width:180px;
 position:absolute;
 top:150px;
 left:50%;
 margin-left:-90px;
}
html及js部分
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8"/>
        <meta name="description" content="" />
        <meta name="keywords" content=""/>
  <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" href="http://dreamsky.github.io/main/blog/common/init.css">
  <script src="js/cufon-yui.js" type="text/javascript"></script>
  <script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
  <script type="text/javascript">
   Cufon.replace('h1',{ textShadow: '1px 1px #000'});
   Cufon.replace('h2',{ textShadow: '1px 1px #000'});
   Cufon.replace('.footer',{ textShadow: '1px 1px #000'});
   Cufon.replace('.pxs_loading',{ textShadow: '1px 1px #000'});
  </script>
    </head>
    <body>
  
  <div id="pxs_container" class="pxs_container">
   <div class="pxs_bg">
    <div class="pxs_bg1"></div>
    <div class="pxs_bg2"></div>
    <div class="pxs_bg3"></div>
   </div>
   <div class="pxs_loading">Loading images...</div>
   <div class="pxs_slider_wrapper">
    <ul class="pxs_slider">
     <li><img src="images/1.jpg" alt="First Image" /></li>
     <li><img src="images/2.jpg" alt="Second Image" /></li>
     <li><img src="images/3.jpg" alt="Third Image" /></li>
     <li><img src="images/4.jpg" alt="Forth Image" /></li>
     <li><img src="images/5.jpg" alt="Fifth Image" /></li>
     <li><img src="images/6.jpg" alt="Sixth Image" /></li>
    </ul>
    <div class="pxs_navigation">
     <span class="pxs_next"></span>
     <span class="pxs_prev"></span>
    </div>
    <ul class="pxs_thumbnails">
     <li><img src="images/thumbs/1.jpg" alt="First Image" /></li>
     <li><img src="images/thumbs/2.jpg" alt="Second Image" /></li>
     <li><img src="images/thumbs/3.jpg" alt="Third Image" /></li>
     <li><img src="images/thumbs/4.jpg" alt="Forth Image" /></li>
     <li><img src="images/thumbs/5.jpg" alt="Fifth Image" /></li>
     <li><img src="images/thumbs/6.jpg" alt="Sixth Image" /></li>
    </ul>
   </div>
  </div>
  
  <!-- The JavaScript -->
  <script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
   (function($) {
    $.fn.parallaxSlider = function(options) {
     var opts = $.extend({}, $.fn.parallaxSlider.defaults, options);
     return this.each(function() {
      var $pxs_container  = $(this),
      o     = $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;
      
     
      var $pxs_slider  = $('.pxs_slider',$pxs_container),
      
      $elems   = $pxs_slider.children(),
      
      total_elems  = $elems.length,
     
      $pxs_next  = $('.pxs_next',$pxs_container),
      $pxs_prev  = $('.pxs_prev',$pxs_container),
      
      $pxs_bg1  = $('.pxs_bg1',$pxs_container),
      $pxs_bg2  = $('.pxs_bg2',$pxs_container),
      $pxs_bg3  = $('.pxs_bg3',$pxs_container),
     
      current   = 0,
      
      $pxs_thumbnails = $('.pxs_thumbnails',$pxs_container),
     
      $thumbs   = $pxs_thumbnails.children(),
      
      slideshow,
      
      $pxs_loading = $('.pxs_loading',$pxs_container),
      $pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container);
       
      
      var loaded  = 0,
      $images  = $pxs_slider_wrapper.find('img');
       
      $images.each(function(){
       var $img = $(this);
       $('<img/>').load(function(){
        ++loaded;
        if(loaded == total_elems*2){
         $pxs_loading.hide();
         $pxs_slider_wrapper.show();
          
         
         var one_image_w  = $pxs_slider.find('img:first').width();
       
        
         setWidths($pxs_slider,
         $elems,
         total_elems,
         $pxs_bg1,
         $pxs_bg2,
         $pxs_bg3,
         one_image_w,
         $pxs_next,
         $pxs_prev);
       
         
         $pxs_thumbnails.css({
          'width'   : one_image_w + 'px',
          'margin-left'  : -one_image_w/2 + 'px'
         });
         var spaces = one_image_w/(total_elems+1);
         $thumbs.each(function(i){
          var $this  = $(this);
          var left = spaces*(i+1) - $this.width()/2;
          $this.css('left',left+'px');
           
          if(o.thumbRotation){
           var angle  = Math.floor(Math.random()*41)-20;
           $this.css({
            '-moz-transform' : 'rotate('+ angle +'deg)',
            '-webkit-transform' : 'rotate('+ angle +'deg)',
            'transform'   : 'rotate('+ angle +'deg)'
           });
          }
         
          $this.bind('mouseenter',function(){
           $(this).stop().animate({top:'-10px'},100);
          }).bind('mouseleave',function(){
           $(this).stop().animate({top:'0px'},100);
          });
         });
          
         
         highlight($thumbs.eq(0));
          
         
         $pxs_next.bind('click',function(){
          ++current;
          if(current >= total_elems)
           if(o.circular)
            current = 0;
          else{
           --current;
           return false;
          }
          highlight($thumbs.eq(current));
          slide(current,
          $pxs_slider,
          $pxs_bg3,
          $pxs_bg2,
          $pxs_bg1,
          o.speed,
          o.easing,
          o.easingBg);
         });
         $pxs_prev.bind('click',function(){
          --current;
          if(current < 0)
           if(o.circular)
            current = total_elems - 1;
          else{
           ++current;
           return false;
          }
          highlight($thumbs.eq(current));
          slide(current,
          $pxs_slider,
          $pxs_bg3,
          $pxs_bg2,
          $pxs_bg1,
          o.speed,
          o.easing,
          o.easingBg);
         });
       
         
         $thumbs.bind('click',function(){
          var $thumb = $(this);
          highlight($thumb);
          
          if(o.auto)
           clearInterval(slideshow);
          current  = $thumb.index();
          slide(current,
          $pxs_slider,
          $pxs_bg3,
          $pxs_bg2,
          $pxs_bg1,
          o.speed,
          o.easing,
          o.easingBg);
         });
       
        
       
        
         if(o.auto != 0){
          o.circular = true;
          slideshow = setInterval(function(){
           $pxs_next.trigger('click');
          },o.auto);
         }
       
         
         $(window).resize(function(){
          w_w = $(window).width();
          setWidths($pxs_slider,$elems,total_elems,$pxs_bg1,$pxs_bg2,$pxs_bg3,one_image_w,$pxs_next,$pxs_prev);
          slide(current,
          $pxs_slider,
          $pxs_bg3,
          $pxs_bg2,
          $pxs_bg1,
          1,
          o.easing,
          o.easingBg);
         });
        }
       }).error(function(){
        alert('here')
       }).attr('src',$img.attr('src'));
      });
       
       
       
     });
    };
    
    
    var w_w    = $(window).width();
    
    var slide   = function(current,
    $pxs_slider,
    $pxs_bg3,
    $pxs_bg2,
    $pxs_bg1,
    speed,
    easing,
    easingBg){
     var slide_to = parseInt(-w_w * current);
     $pxs_slider.stop().animate({
      left : slide_to + 'px'
     },speed, easing);
     $pxs_bg3.stop().animate({
      left : slide_to/2 + 'px'
     },speed, easingBg);
     $pxs_bg2.stop().animate({
      left : slide_to/4 + 'px'
     },speed, easingBg);
     $pxs_bg1.stop().animate({
      left : slide_to/8 + 'px'
     },speed, easingBg);
    }
    
    var highlight  = function($elem){
     $elem.siblings().removeClass('selected');
     $elem.addClass('selected');
    }
    
    var setWidths  = function($pxs_slider,
    $elems,
    total_elems,
    $pxs_bg1,
    $pxs_bg2,
    $pxs_bg3,
    one_image_w,
    $pxs_next,
    $pxs_prev){
     
     var pxs_slider_w = w_w * total_elems;
     $pxs_slider.width(pxs_slider_w + 'px');
     
     $elems.width(w_w + 'px');
     
      
     $pxs_bg1.width(pxs_slider_w + 'px');
     $pxs_bg2.width(pxs_slider_w + 'px');
     $pxs_bg3.width(pxs_slider_w + 'px');
     
     
     var position_nav = w_w/2 - one_image_w/2 + 3;
     $pxs_next.css('right', position_nav + 'px');
     $pxs_prev.css('left', position_nav + 'px');
    }
    
    $.fn.parallaxSlider.defaults = {
     auto   : 0, 
           
     speed   : 1000,
     easing   : 'jswing',
     easingBg  : 'jswing',
     circular  : true,
     thumbRotation : true,
    };
    
   })(jQuery);
  </script>
  <script type="text/javascript">
   $(function() {
    var $pxs_container = $('#pxs_container');
    $pxs_container.parallaxSlider();
   });
        </script>
  <script src="http://dreamsky.github.io/main/blog/common/init.js"></script>
    </body>
</html>

 
图片

图片

图片

图片
想旅游咯
关注
专栏目录
1.CSS 简单的视差滚动效果
kxdhshlg的博客
04-25 215
HTML 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
17.使用CSS完成视差滚动效果?
kleinBlue.的博客
11-07 590
一、是什么 视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验 我们可以把网页解刨成：背景层、内容层、悬浮层 当滚动鼠标滑轮的时候，各个图层以不同的速度移动，形成视觉差的效果 二、实现方式 使用css形式实现视觉差滚动效果的方式有： background-attachment transform:translate3D background-attachment 作用是设置背景图像是否固定...
滚动视差？CSS 不在话下
weixin_34138139的博客
08-10 366
何为滚动视差 视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。 作为网页设计的热点趋势，越来越多的网站应用了这项技术。 通常而言，滚动视差在前端需要辅助 Javascript 才能实现。当然，其实 CSS 在实现滚动视差效果方面，也有着不俗的能力。下面就让我们来见识一二：   认识 background-att...
用CSS实现视差滚动酷炫交互动效，高级感满满！
最新发布
流绪@微梦
06-30 578
视差滚动是指多层背景网页元素在滚动时呈现出不同的滚动速度，可以让页面元素以不同的速度移动，从而创造出一种视觉上的层次感，形成立体的运动效果，给用户一种仿佛置身于三维空间的感觉，带来非常出色的视觉体验。网页解析成：背景层、内容层、悬浮层。当滚动鼠标滑轮的时候，各个图层以不同的速度移动，形成视觉差的效果。
css实现视差滚动
piaoliangj的博客
02-23 388
20.css实现视差滚动——软设问题总结20.1 视差滚动20.2 视差滚动主要要点20.3 代码 20.1 视差滚动 视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。 20.2 视差滚动主要要点 把背景的宽高铺满一个浏览器可视区： width = 100%; height = 浏览器可视高度 将背景设置为相对于视口固定： background-attachment: fixed; 20.3 代码 <div cl
css实现视差滚动效果
m0_46239267的博客
03-25 659
css实现视差滚动效果 实现该效果其实非常简单，就是background-attachment：fixed background-attachment有三个属性值 下面是效果： <body> <div class="box"> <div class="flowImage fixed-bg bg1"> <p>aaa</p> </div> <div class="fl
面试官：如何使用CSS完成视差滚动效果?
weixin_44475093的博客
04-21 691
一、是什么视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验我们可以把网页解刨成：背景层、内容层、悬浮层当滚动鼠标滑轮...
html+css实现简单的视差滚动效果
m0_47450083的博客
08-31 772
这是我在外网视频上借鉴过来的 效果图如下： 这是index.html界面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid..
山景昼夜交替视差滚动H5特效
06-24
"山景昼夜交替视差滚动H5特效"是一种利用HTML5技术实现的创新交互设计，它为用户提供了独特的视觉体验。这个特效通过SVG（Scalable Vector Graphics）矢量图绘制出逼真的山景，并结合JavaScript编程实现昼夜交替和...
山景昼夜交替视差滚动动画特效
06-01
此外，视差滚动效果则是通过改变不同元素的滚动速度来实现，让背景元素比前景元素移动得慢，从而营造出立体感和深度。 视差滚动技术源于游戏设计，近年来被广泛应用在网页设计中。它通过创建深度感和运动错觉，使...
HTML5鼠标滚动昼夜交替视差特效
07-24
在这个特定的案例中，我们讨论的是一个利用HTML5特性实现的鼠标滚动昼夜交替视差特效。这种特效能够为用户带来深度感和立体感，提升网站的用户体验。 视差滚动是近年来网页设计中流行的一种技术，它通过在不同层面...
css3背景图片页面滚动视差效果
11-24
css3背景图片页面滚动视差效果
使用CSS3来实现滚动视差效果的教程
09-24
主要介绍了使用CSS3来实现滚动视差效果的教程,主要使用到了background-attachment属性,需要的朋友可以参考下
十分钟教你用 CSS 实现滚动视差 ！（实用）
前端下午茶
02-01 7156
何为滚动视差视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应用了这项技...
css 实现视差滚动
lszyzs的博客
06-16 181
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css 视差滚动</title> </head> <style> body { padding:
如何使用css完成视差滚动效果?
Harley567
10-12 1825
如何使用css完成视差滚动效果?
css实现滚动视差效果
A_bad_boy_hahaha的博客
06-21 532
滚动视差
【前端知识之CSS】CSS视差滚动
weixin_44337386的博客
05-17 1344
本系列主要整理前端面试中需要掌握的知识点。本节介绍如何用CSS完成视差滚动的效果。
CSS 实现视差滚动效果
前端小白的博客
04-14 1271
● 滚动滚动条，由于子元素设置了不同的 transform: translateZ()，那么他们滚动的上下距离 translateY 相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果。● perspective: css3 属性，当元素涉及 3d 变换时，perspective 可以定义我们眼睛看到的 3d 立体效果，即空间感。● 子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D Z轴方向距离屏幕（我们的眼睛）的距离也就不一样。
前端面试深度解析：CSS实现视差滚动效果
在这个例子中，`.g-img`元素的背景图片会保持固定，只有内容区域滚动，从而产生视差效果。 2. transform: translate3D 另一种方法是使用`transform: translate3D`。通过在3D空间中移动元素，可以实现类似的效果。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值