jquery横向滚动_使⽤jQuery进⾏横向滚动
jquery横向滚动
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 or in the portfolio section of brilliantly designed . 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.
收到请求后，我们将向您展⽰如何创建“滚动插⼊”效果。 您可能已经在某些⽹站上看到了这种酷效果，
例如或设计的作品集部分。 主要思想是根据⽂档的滚动位置在元素上横向滑动。 将页⾯分为左侧和右侧，我们希望将元素在视⼝中时从页⾯的“外部”移动到中⼼。 我们还将添加在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>html横向滚动条样式
</div>
<!-- -->
</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)
The container will occupy all the width and we’ll set the overflow to hidden because we don’t want a scrollbar to appear when we move the left and right elements out of if:
容器将占据所有宽度，我们将溢出设置为隐藏，因为当我们将左右元素移出if时，我们不希望出现滚动条：
.ss-container{
width: 100%;
position: relative;
text-align: left;
float: left;
overflow: hidden;
padding-bottom: 500px;
}
To create the middle line throughout the container, we’ll use a pseudo element that we’ll position in the middle of the container:
为了在整个容器中创建中间线，我们将使⽤⼀个伪元素，将其放置在容器的中间：
position: absolute;
width: 4px;
background: rgba(17,17,22,0.8);
top: 0px;
left: 50%;
margin-left: -2px;
content: '';
height: 100%;
}
The row will serve as a wrapper for the left and right elements：该⾏将⽤作左右元素的包装：
.ss-row{
width: 100%;
clear: both;
float: left;
position: relative;
padding: 30px 0;
}
The two lateral elements will occupy half of the width:
这两个横向元素将占据⼀半的宽度：
.ss-left, .ss-right{
float: left;
width: 48%;
position: relative;
}
.ss-right{
padding-left: 2%;
}
.ss-left{
text-align: right;
float: left;
padding-right: 2%;
}
The headings will have the following style:
标题将具有以下样式：
font-size: 40px;
text-transform: uppercase;
color: rgba(78,84,123,0.2);
text-shadow: 0px 1px 1px #fff;
padding: 20px 0px;
}
.ss-container h3{
margin-top: 34px;
padding: 10px 15px;
background: rgba(26, 27, 33, 0.6);
text-shadow: 1px 1px 1px rgba(26, 27, 33, 0.8)
}
To create a circle, we’ll set the border radius of the anchor to 50% and we’ll add some neat box shadow:
要创建⼀个圆，我们将锚的边界半径设置为50％，并添加⼀些整齐的框阴影：
.ss-circle{
border-radius: 50%;
overflow: hidden;
display: block;
text-indent: -9000px;
text-align: left;
box-shadow:
0px 2px 5px rgba(0,0,0,0.7) inset,
0px 0px 0px 12px rgba(61,64,85,0.3);
background-size: cover;
background-color: #f0f0f0;
background-repeat: no-repeat;
background-position: center center;
}
We’ll have three different circle sizes and depending on which side we are we’ll make the circle float either left or right：我们将使⽤三种不同的圆⼤⼩，并根据我们在哪⼀侧的⾓度使圆向左或向右浮动：
width: 100px;
height: 100px;
}
.ss-medium .ss-circle{
width: 200px;
height: 200px;
}
.ss-large .ss-circle{
width: 300px;
height: 300px;
}
.ss-left .ss-circle{
float: right;
margin-right: 30%;
}
.ss-right .ss-circle{
float: left;
margin-left: 30%;
}
We’ll use the pseudo element :before and :after in order to create the line and the arrow that will point to the middle line. The width will be defined as a percentage so that it adjust to the screen size. We’ll also center it by setting the top to 50% and correct the position by setting the margin-top to -3px. Depending on where we are (left or right side) we want the position to be different:
我们将使⽤伪元素：before和：after来创建线和指向中间线的箭头。 宽度将定义为百分⽐，以便调整为屏幕尺⼨。 我们还将顶部设置为50％来居中，并通过将margin-top设置为-3px来校正位置。 根据我们所在的位置(左侧或右侧)，我们希望位置不同：
.ss-circle-deco:before{
width: 29%;
height: 0px;
border-bottom: 5px dotted #ddd;
border-bottom: 5px dotted rgba(17, 17, 22, 0.3);
box-shadow: 0px 1px 1px #fff;
position: absolute;
top: 50%;
content: '';
margin-top: -3px;
}
.ss-left .ss-circle-deco:before{
right: 2%;
}
.ss-right .ss-circle-deco:before{
left: 2%;
}
The little arrow will be created by the border style and depending on if it’s a child of the left or right side, we’ll set the according border and position:
⼩箭头将由边框样式创建，并且取决于它是左侧还是右侧的⼦项，我们将设置相应的边框和位置：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。