jquery横向滚动_使用jQuery进行横向滚动

jquery横向滚动

View demo 查看演示 Download Source 下载源

After getting the request, we are going to show you how to create a “slide-in on scroll” effect. You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from “outside” of the page to the center when they are in the viewport. We will also add the option to move the elements in 3D space.

收到请求后，我们将向您展示如何创建“滚动插入”效果。 您可能已经在某些网站上看到了这种酷效果，例如Nizo或设计精美的La Moulade的作品集部分。 主要思想是根据文档的滚动位置在元素上横向滑动。 将页面分为左侧和右侧，我们希望将元素在视口中时从页面的“外部”移动到中心。 我们还将添加在3D空间中移动元素的选项。

The theme of today’s tutorial is going to be a timeline where we will have some circular elements on one side and the descriptions on the other. We’ll be alternating the sides to create a random look.

今天的教程的主题将是一个时间轴，我们将在一侧有一些圆形元素，而在另一侧有描述。 我们将交替改变侧面以创建随机外观。

So, let’s start!

所以，让我们开始吧！

标记 (The Markup)

The HTML structure is going to consist of a main container and some rows that we’ll use to place the left and the right elements. The left and right elements will either contain a h2 heading, a circular link with a background image or a description in form of a h3 element with a link and a span:

HTML结构将由一个主容器和一些行组成，我们将使用这些行来放置左右元素。 左右元素将包含h2标题，带有背景图像的圆形链接或带有链接和范围的h3元素形式的描述：

<div id="ss-container" class="ss-container">
	<div class="ss-row">
		<div class="ss-left">
			<h2 id="november">November</h2>
		</div>
		<div class="ss-right">
			<h2>2011</h2>
		</div>
	</div>
	<div class="ss-row ss-medium">
		<div class="ss-left">
			<a href="#" class="ss-circle ss-circle-1">Some title</a>
		</div>
		<div class="ss-right">
			<h3>
				<span>November 28, 2011</span>
				<a href="#">Some Title</a>
			</h3>
		</div>
	</div>
	<!-- more rows... -->
</div>

For the circles we’ll have three different sizes and we’ll indicate that but giving the respective row the class of “ss-small”, “ss-medium” or “ss-large”. Let’s look at the style.

对于圆圈，我们将使用三种不同的大小，并指出这一点，但给相应的行指定“ ss-small”，“ ss-medium”或“ ss-large”类。 让我们看一下样式。

CSS (The CSS