stellar.js_使用Stellar.js创建视差滚动网站-CSDN博客

这篇教程介绍了如何利用stellar.js创建视差滚动效果的网站，详细讲解了视差滚动的概念、应用和实现方法，包括HTML、CSS和jQuery的使用。教程还提到了其他相关插件如Waypoints.js和jQuery easing。

摘要由CSDN通过智能技术生成

stellar.js

最近的现代网页设计的最大趋势之一是使用视差滚动效果。在本教程中，我将向您展示如何在自己的网站上创建效果，并需要一点想象力，并需要Stellar.js的帮助。

现代视差jQuery插件

有兴趣节省一些时间并确保您使用的是现代最佳实践吗？ Envato Market上有一个很棒的响应式jQuery滑块插件，可以完美地完成这项工作！它已经在超过150,000个网站上使用。

介绍

自从几年前耐克公司的“更好的世界”（Better World）等网站在其网站上引入视差滚动效果以来，它一直很受欢迎。自1980年代以来，关于界面的视差效应一直存在，当时它首先用于视频游戏中，随后又用于游戏本身。最近，它开始出现在Web界面中-您将熟悉Silverbackapp ，它将效果用作标题的一部分。

与网站的滚动功能结合使用时，视差滚动效果会产生强烈的视觉效果，尤其是与某种形式的故事结合使用时，带您踏上旅途。

帕拉...什么？

视差是沿两个不同视线观察的对象的视在位置的位移或差异。 - 维基百科

那么，视差效应到底是什么呢？好吧，这可能是客户盲目地说“我想要我的网站HTML5”时客户所指的一件事。每当客户要求我提供“ HTML5”网站时，我都必须特别询问他们如何解释HTML5的含义-目前，这似乎只是客户一直对我说的时髦词汇，却没有真正理解它的含义。

是HTML5吗？当然，HTML5确实在视差滚动效果中发挥了作用，但它比HTML5还要多，它还利用了某种形式的javascript，例如jQuery，并且如果没有一点CSS3就不可能实现。

实际单词视差源自希腊文παραλλαξη （视差），意为更改。距离眼睛较近的物体比距离远的物体具有更大的视差。这意味着距离我们更近的对象看起来比在背景中的对象移动得更快。

层叠多个背景和对象（例如图像），然后允许它们以不同的速度移动会产生深度和尺寸感。

视差效果

看一些演示视差效果的示例。

每个网站都讲一个故事

上面的示例都将带您经历某种形式的旅程或故事，并且它们以多种不同的方式进行。我认为，这就是使视差滚动站点成功的原因。使其有趣且独特的关键在于专注于一个好的故事和概念，然后以创造性和富于想象的方式使用该效果。

Nike Better World网站背后的支持者Wieden + Kennedy（W＆K）支持此功能：

我们认为，技术与概念无关。我们的主要重点是创造出色的交互式故事讲述体验。 - 维登+肯尼迪（W＆K）

我们的网站如何运作

为了演示实现视差滚动到您的网站中的一种方法，我选择向您展示一个简单的四张幻灯片的网站，该网站在不同的背景和图像上使用效果。我还在左上角添加了一个导航，该导航将滚动到站点上的特定幻灯片，并且还将更改大小以反映活动的幻灯片编号。我也使用网络字体Bebas ，但是如果愿意的话，您可以自由使用其他字体。

这是文件夹结构的显示方式：

使用的插件

Stellar.js

为了帮助我实现这一目标，我使用了Stellar.js，这是Mark Dalgleish的jquery插件，可轻松创建视差滚动站点。我已在本文底部列出了其他可用的插件来帮助您完成此操作。我选择使用Stellar.js，因为它实现起来非常简单，尽管在本教程中没有进行演示，但可以对其进行优化以在iOS等智能设备平台上工作。

Waypoints.js

我还将使用Caleb Troughton的 jQuery航路点。 Waypoints是另一个jQuery插件，每当您滚动到某个元素时，该插件都会执行一个函数。这使站点上的导航可以根据滚动条的位置突出显示我们正在播放的幻灯片。

jQuery轻松

jQuery easing是GSGD的插件，可提供高级的宽松选项。当从一个幻灯片过渡到另一个幻灯片时，我们将使用它来添加良好的缓动运动。

HTML标记

从index.html开始，我们添加HTML5文档类型，然后创建head部分。这包括CSS重置，后跟我们的样式表“ styles.css”。然后，我们添加jQuery库，然后添加自定义jQuery文件'js.js'。然后是三个插件“ jquery.stellar.min.js”，“ waypoints.min.js”和“ jquery.easing.1.3.js”。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Create a parallax Website using Stellar.js</title>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
<script type="text/javascript" src="js/waypoints.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

</head>

html中的下一个元素是Envato徽标的图像，该徽标在整个网站上始终保持固定的位置。为此，我们添加了一个“ envatologo”类，以便稍后在编写CSS代码时可以设置其位置。

<img class="envatologo" src="images/envatologo.png">

滑梯

四个幻灯片使用相同的标记：

<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">  		  		  		
		<a class="button" data-slide="2" title=""></a>  	
	</div><!--End Slide 1-->

我们使用一类“幻灯片”，将其用作所有幻灯片的通用样式。然后，为每个幻灯片指定一个“幻灯片”的ID，后跟幻灯片编号，即“幻灯片1”。我们使用HTML5数据属性，并将其命名为“数据幻灯片”。这将使我们能够使用jQuery定位它。添加了“ data-stellar-background-ratio”的另一个数据属性。这特定于stellar.js jQuery插件，并告诉插件该元素的速度应以什么比例滚动。

该比率是相对于自然滚动速度的，因此比率0.5将导致元素以半速滚动，比率1将没有效果，而比率2将导致元素以两倍的速度滚动。。

除第四张幻灯片以外的所有幻灯片都有一个按钮，使我们可以滚动到下一张幻灯片。为此，我们添加“数据幻灯片”属性和下一张幻灯片编号的值。这样按钮就知道下一步是什么幻灯片，以便我们可以将此值传递给jQuery。大多数幻灯片还具有“ slideno”类的跨度。只是幻灯片编号的大文本版本，出现在大多数幻灯片的左下角。这也可以用于标题。

<span class="slideno">Slide 1</span>

在幻灯片三和幻灯片四上，我们还向“幻灯片” div添加了一些图像元素。这些图像将真正洞察我们正在创建的视差效果。我们将这些文件包装在一个“包装器” div中，该包装器将被集中放置并且宽度为“ 960px”，这只是为了确保它在所有台式机显示器尺寸上均显示正常。

每个图像都有一个附加的“ data-stellar-ratio”属性。这再次是stellar.js特有的，并告诉插件我们应该以什么速度滚动元素。

<div class="wrapper">
		
			<img src="images/slide3/freelance.png" data-stellar-ratio="1.4" data-stellar-vertical-offset="-102"alt="">
			<img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt="">
			<img src="images/slide3/rockable.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="-200"alt="">
			<img src="images/slide3/themeforest.png" data-stellar-ratio="3" data-stellar-vertical-offset="-200"alt="">
			<img src="images/slide3/tutshub.png" data-stellar-ratio="1" data-stellar-vertical-offset="-200"alt="">
			<img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-200"alt="">

</div>

CSS

对我们来说幸运的是，CSS并没有涉及太多。它基本上是在设计一些简单元素的样式，但是大部分是用于放置某些图像元素的。

我们需要对CSS进行的第一件事是使用@ font-face导入BEBAS字体。然后，我们将其添加到html中以设置网站的字体。我们还将html和body的宽度和高度设置为100％。这将使我们的幻灯片可以采用用户屏幕的整个宽度和高度。

@font-face {  
	font-family: 'BebasRegular';  
	src: url('font/BEBAS___-webfont.eot');  
	src: url('font/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),     
	url('font/BEBAS___-webfont.woff') format('woff'),     
	url('font/BEBAS___-webfont.ttf') format('truetype'),     
	url('font/BEBAS___-webfont.svg#BebasRegular') format('svg');  
	font-weight: normal;  
	font-style: normal;  
	}  
	
html,body{ 
	font-family: 'BebasRegular';  	
	width:100%;  	
	height:100%;  
}

实际的列表只是文本的样式，底部带有边框以充当下划线。宽度为53px。还添加了一个过渡，以便从其标准状态到其悬浮状态设置动画。我在这里使用-webkit-前缀只是为了使代码简短，但是可以在上方下载的完整源代码包含所有供应商前缀。

悬停状态还使用与“活动”类相同的属性；基本上只是增加字体大小和宽度。 jQuery使用“活动”类来设置浏览器窗口中相关幻灯片的样式。

.navigation {  	
	position:fixed;  	
	z-index:1;  	
	top:20px;  
}  
.navigation li {  	
	color:#333333;  	
	display:block;  	
	padding: 0 10px;  	
	line-height:30px;  	
	margin-bottom:2px;  	
	font-weight:bold;  	
	-webkit-transition: all .2s ease-in-out;  	
	border-bottom:1px solid black;  	
	text-align:left;  	
	width:53px;  
}  
.navigation li:hover,
.active {  	
	font-size:25px;  	
	cursor:pointer;  	
	width:100px!important;  
}

赋予envato徽标一些定位样式，只是为了确保它保留在屏幕的中央。与导航类似，它的z-index也为'1'，以确保其位于顶部。

.envatologo {  
	position:fixed;  
	top:50%;  
	left:50%;  
	width:446px;  
	margin-top:-41px;  
	margin-left:-223px;  
	z-index:1;  
}

现在我们进入实际幻灯片的样式。我们给他们一个背景附加的“固定”属性。 background-attachment属性设置背景图像是固定的还是随页面的其余部分滚动，因此对于背景图像很有用（例如在幻灯片4上使用）。在本例中，我们使用了Philipp Seiffert的壁纸，可以在这里下载。我们将幻灯片的位置设置为“相对”。因此，我们可以将“ slideno”和“ button”类绝对定位在幻灯片上，而不是实际文档。

框阴影纯粹用于装饰目的，并在每张幻灯片的顶部插图中添加了不错的阴影。

.slide {
	background-attachment: fixed;
	width:100%;
	height:100%;
	position: relative;
	box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
}
.wrapper {
	width:960px;
	height:200px;
	margin:0 auto;
	position:relative;
}
.slideno {
	position:absolute;
	bottom:0px;
	left:0px;
	font-size:100px;
	font-weight:bold;
	color:rgba(255,255,255,0.3);
}

.button用于页面底部的按钮，它使我们可以前进到下一张幻灯片。我们将其放置在每张幻灯片的底部中心，并使用箭头图像作为指示器。

.button{
	display:block;
	width:50px;
	height:50px;
	position:absolute;
	bottom:0px;
	left:50%;
	background-color:#333333;
	background-image:url(../images/arrow.png);
	background-repeat:no-repeat;
}
.button:hover{
	background-color:#494949;
	cursor:pointer;
}

每个单独幻灯片的样式都相对简单，每次都遵循相同的样式。幻灯片一张的背景色为“＃5c9900”。幻灯片2也设置了背景色。幻灯片2还包含图像，我们可以使用CSS选择器nth-child(n)来定位每个图像。该选择器可以描述为

该伪类根据元素在父元素的子元素列表中的位置来匹配元素。

因此，我们基本上按照它们在标记中出现的顺序来设置每个图像的样式。我们只是将它们相对于幻灯片的包装放置。

/******************************
 SLIDE 1 
*******************************/
#slide1{
	background-color:#5c9900;
	
}
/******************************
 SLIDE 2 
*******************************/
#slide2{
	background-color:#005c99;
	
}
#slide2 img:first-child{
	position:absolute;
top: 700px;
left: -150px;
}
#slide2 img:nth-child(2){
	position:absolute;
	top:300px;
	left:100px;
}
#slide2 img:nth-child(3){
	position:absolute;
	top:600px;
	left:300px;
}
#slide2 img:nth-child(4){
	position:absolute;
	top:400px;
	left:300px;
}
#slide2 img:nth-child(5){
	position:absolute;
	top:600px;
	right:300px;
}
#slide2 img:nth-child(6){
	position:absolute;
	top:600px;
	right:300px;
}
#slide2 img:nth-child(7){
	position:absolute;
	top:400px;
	right:100px;
}
#slide2 img:nth-child(8){
	position:absolute;
	top:100px;
	right:300px;
}

幻灯片3与幻灯片2的穿着相同。

/****************************** SLIDE 3 *******************************/  
#slide3 {  	
	background-color:#b6c10b;  
}  
#slide3 img:first-child {  	
	position:absolute;  
	top: 700px;  
	left: 300px; 
}  
#slide3 img:nth-child(2){  	
	position:absolute;  	
	top:100px;  	
	left:100px;  
}  
#slide3 img:nth-child(3){  	
	position:absolute;  	
	top:150px;  	
	left:300px;  
}  
#slide3 img:nth-child(4){  	
	position:absolute;  	
	top:450px;  	
	left:300px; 
}  
#slide3 img:nth-child(5){  	
	position:absolute;  	
	top:200px;  	
	right:300px;  
}  
#slide3 img:nth-child(6){  	
	position:absolute;  	
	top:100px;  	
	right:300px;  
}

幻灯片4与前两张幻灯片略有不同，因为它不包含任何图像元素或背景色，而是使用背景图像。我们还为它提供了CSS3属性“ background-size：cover”。基本上，这会将背景图像设置为覆盖整个浏览器窗口，并且将随着浏览器窗口调整大小而调整大小。我们还在最后一张幻灯片上添加了一行文本，对其进行了样式设置并赋予了“ parallaxbg”类

/******************************
 SLIDE 4 
*******************************/

#slide4{
	background-image:url(../images/Slide4/desktop4.jpg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#slide4 .parallaxbg{
	position:absolute;
	right:40px;
	top:40px;
	font-size:28px;
	color:rgba(51,51,51,0.3);
}

jQuery的

jQuery确实是这东西开始变得生动的地方。我已经注释了代码，以便您可以准确地看到正在发生的事情。

jQuery(document).ready(function ($) {


    //initialise Stellar.js
    $(window).stellar();

    //Cache some variables
    var links = $('.navigation').find('li');
    slide = $('.slide');
    button = $('.button');
    mywindow = $(window);
    htmlbody = $('html,body');


    //Setup waypoints plugin
    slide.waypoint(function (event, direction) {

        //cache the variable of the data-slide attribute associated with each slide
        dataslide = $(this).attr('data-slide');

        //If the user scrolls up change the navigation link that has the same data-slide attribute as the slide to active and 
        //remove the active class from the previous navigation link 
        if (direction === 'down') {
            $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
        }
        // else If the user scrolls down change the navigation link that has the same data-slide attribute as the slide to active and 
        //remove the active class from the next navigation link 
        else {
            $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
        }

    });

    //waypoints doesnt detect the first slide when user scrolls back up to the top so we add this little bit of code, that removes the class 
    //from navigation link slide 2 and adds it to navigation link slide 1. 
    mywindow.scroll(function () {
        if (mywindow.scrollTop() == 0) {
            $('.navigation li[data-slide="1"]').addClass('active');
            $('.navigation li[data-slide="2"]').removeClass('active');
        }
    });

    //Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery
    //easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin.
    function goToByScroll(dataslide) {
        htmlbody.animate({
            scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
        }, 2000, 'easeInOutQuint');
    }



    //When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function
    links.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        goToByScroll(dataslide);
    });

    //When the user clicks on the button, get the get the data-slide attribute value of the button and pass that variable to the goToByScroll function
    button.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        goToByScroll(dataslide);

    });


});

几点

如果看一下我们示例的幻灯片2，您会注意到3D气泡。我为其中一些添加了轻微的高斯模糊，主要是针对前景和背景方面的模糊。将它们与清晰聚焦的气泡相结合，可以增加视差产生的深度感。这是您在尝试深入了解网站时应考虑的事项。

许多利用此效果的站点的图像往往很重，请确保尽可能多地压缩图像（不牺牲质量）。如果压缩后仍然需要花费一些时间来加载，请考虑将加载器添加到您的站点。

结论

视差滚动是近来最受欢迎的效果之一，并且人们不断地用它来突破极限。今天在这里，我向您展示了如何设置利用视差滚动的基本网站。我今天展示的演示是一个相对简单的站点，用于学习。对于那些将要使用此效果创建网站的人，我促请您花一些时间在概念和故事上，因为这是使它们与众不同，可共享且确实令人愉悦的浏览方式。这是关于如何明智地利用此效果，而不仅仅是为了使用而使用它。

我希望您喜欢阅读有关视差滚动的文章，并希望看到你们在自己的网站中如何使用它，请随时在下面留下指向他们的链接。直到下一次！