当前位置：首页 > 网页特效 > 滚动

jQuery超酷背景视觉差特效插件Jarallax.js

分类：滚动日期：2024-05-14 点击(2) 评论(0)

简介

##### CSS样式

------------

首先是设置一些基本样式。

```html
body {
  font-family: arial, sans-serif, verdana;
  height:5000px;
  color:white;
  margin:0;
  padding:0;
}
```
页面高度要设置的足够高，这样才有足够的空间来滚动视觉差元素。这里设置为5000px，你可以根据需要设置。

下面为页面中的元素设置样式，先为p元素设置样式

```html
p{
  font-size: 72px;
  width: 30%;
  position: absolute;
  left: 10%;
  top: 25%;
  padding: 10px 20px;
  font-weight: bold;
  font-family: Verdana;
  text-shadow: 0 1px 1px #000;
}
```
然后为内容区域设置样式，使它第一时间出现在浏览者的视线中。

```html
.content {
  position:fixed;
  width:100%;
  height:100%;
}
```
接下来需要为页面中的主要元素设置样式，例如页面顶部的进度条，背景图像和两个星球。

```html
/*The loading bar*/
.bmeter {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 0%;
  height: 15px;
  background-color: #fff;
  opacity: 0.5;
  z-index: 10;
}
/*The end screen*/
.theend {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #000;
  color: #fff;
  padding-top: 45%;
  padding-left: 60%;
  font-size: 72px;
  font-weight: bold;
  font-family: Verdana;
  text-shadow: 0 1px 1px #000;
  opacity: 0;
  z-index: 13;
}
.behind, .planet1, .planet2{
  display:block;
  position:absolute;
}
  
.behind{
  width:100%;
  height:110%;
  background:url(images/back.jpg) top center no-repeat;
  top:0%;
  left:0%;
  position:absolute;
  z-index:-1;
}
  
.planet1{
  width:356px;
  height:344px;
  background:url(images/bigmoon.png) no-repeat;
  left:65%;
  top:90%;
}
  
.planet2{
  background:url(images/smallmoon.png) no-repeat;
  width:204px;
  height:183px;
  left:50%;
  top:70%;
}
@media only screen and (max-width: 1000px) {
  p{
    font-size: 48px;
  }
  .planet2{
    left: 40%;
    background-size: 80%;
  }
  .planet1 {
    background-size: 80%;
  }
  .theend {
    font-size: 48px;
  }
}
```
.behind包含了背景图像。它的高度设置为110%，这样可以在用户滚动页面时给图片留下足够的高度。

##### JAVASCRIPT
在完成CSS样式后，我们需要使用Jarallax库来创建视觉差动画效果。

首先要创建一个animations.js文件。在这个文件中将添加所有的视觉差动画。animations.js文件从下面的语句开始：

```html
init = function(){
      jarallax = new Jarallax();
```
这条语句将创建一个init()方法和一个Jarallax class对象。简单的来说，这个方法将在页面加载时被调用，然后在页面滚动时将所有元素运动起来。下面开始填充动画元素：

```html
jarallax.setDefault('#p1, #p2, #p3', {opacity:'0'});
jarallax.setDefault('#p1, #p2, #p3', {marginLeft:'-1000px'});
```
使用上面的代码将使进度条一开始是不可见的。然后我们要为背景图像添加动画，其他的滚动元素的js代码如下：

```html
jarallax.addAnimation('.planet2',[{progress: "0%", top:"70%"}, {progress: "100%", top: "40%"}]);
jarallax.addAnimation('.planet1',[{progress: "0%", top:"90%"}, {progress: "100%", top: "-5%"}]);
jarallax.addAnimation('.behind',[{progress: "0%", top:"0%"}, {progress: "100%", top: "-10%"}]);
jarallax.addAnimation('.bmeter',[{progress: "0%", width:"0%"}, {progress: "100%", width: "100%"}]);
jarallax.addAnimation('.theend',[{progress: "95%", opacity:"0"}, {progress: "100%", opacity:"0.85"}]);
      
jarallax.addAnimation('#p1',[{progress: "15%", opacity:"0"}, {progress: "20%", opacity:"1"}]);
jarallax.addAnimation('#p1',[{progress: "20%", opacity:"1"}, {progress: "30%"}]);
jarallax.addAnimation('#p1',[{progress: "30%", opacity:"1"}, {progress: "40%", opacity:"0"}]);
jarallax.addAnimation('#p1',[{progress: "15%", marginLeft:"0"}, {progress: "40%"}]);
      
jarallax.addAnimation('#p2',[{progress: "45%", opacity: "0"}, {progress: "50%", opacity: "1"}]);
jarallax.addAnimation('#p2',[{progress: "50%", opacity: "1"}, {progress: "60%"}]);
jarallax.addAnimation('#p2',[{progress: "60%", opacity:"1"}, {progress: "70%", opacity:"0"}]);     
jarallax.addAnimation('#p2',[{progress: "45%", marginLeft:"0"}, {progress: "70%"}]);
      
jarallax.addAnimation('#p3',[{progress: "75%", opacity:"0"}, {progress: "80%", opacity:"1"}]);
jarallax.addAnimation('#p3',[{progress: "80%", opacity:"1"}, {progress: "100%"}]);
jarallax.addAnimation('#p3',[{progress: "75%", marginLeft:"0"}, {progress: "100%"}]);
```
在Jarallax库中，所有的滚动动画元素都要被添加到addAnimation()方法中。要搞清楚如何使用Jarallax来添加滚动动画元素，先来看一个小例子：

```html
jarallax.addAnimation('.planet2',[{progress: "0%", top:"70%"}, {progress: "100%", top: "40%"}]);
```
在上面的语句中，通过addAnimation()方法，在里面设置了一些参数，如.planet2、progress和一些CSS样式。这里的.planet2代表我们在CSS中创建的小星球。

现在我们要选择一个滚动动画的起点。这里选择的是{progress: "0%", top:"70%"}，表示滚动元素将从屏幕高度的70%开始滚动。

同理，我们需要创建滚动动画的结束点。我们使用的是{progress: "100%", top: "40%"}，表示滚动元素将在屏幕高度40%的位置停止滚动。

我们也可以使用多个起点和结束点来分割屏幕，就像段落#p1、#p2和#p3那样。

##### HTML结构
```html
<!DOCTYPE html>
<html>
  <head>
    <title>Parallax Scrolling Website with Jarallax.js</title>
     
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="js/jquery.js"></script>
    <script src="js/animations.js"></script>
    <script src="js/jarallax.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body onload="init()">
    <div class="content">
      <span class="bmeter"></span>
      <span class="behind"></span>
      <span class="planet1"></span>
      <span class="planet2"></span>
      <span class="theend">THE END</span>
       
      <p id="p1">
        Hello!
      </p>
      <p id="p2">
        Welcome to the world of 2050.
      </p>
      <p id="p3">
        Get ready for the ultimate battle.
      </p>
    </div>
  </body>
</html>
```

web299.com

jQuery超酷背景视觉差特效插件Jarallax.js

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果