HTML标记（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结构包括一个main container，和一些行，用来放置左右元素。左右元素包括一个h2头，一个圆形图片链接，或者h3链接和一个span。
<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”.
环形我们有三种不同大小。ss-small,ss-medium,ss-large
Let’s look at the style.
样式（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:
.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:
为了做出穿过container的一个中间线，使用一个pseudo元素，放置在中间。
.ss-container:before{ position: absolute; width: 4px; background: rgba(17,17,22,0.8); top: 0px; left: 50%; margin-left: -2px; content: ''; height: 100%;}
row作为左右元素的包装。
.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:
.ss-container h2{ 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%，增加一些干净的box阴影。
.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:
.ss-small .ss-circle{ 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:
我们使用pseudo元素:before和:after来创建箭头指向中间线。宽度设置为百分比。设置top50%使在中间，并设置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:
.ss-circle-deco:after{ width: 0px; height: 0px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; content: ''; position: absolute; top: 50%; margin-top: -10px;}.ss-left .ss-circle-deco:after{ right: 0; border-right: 10px solid rgba(17,17,22,0.8);}.ss-right .ss-circle-deco:after{ left: 0; border-left: 10px solid rgba(17,17,22,0.8);}
Because of the different circle sizes, we’ll need to adjust the position of the headings on the other side. We want them to be at the height of the arrow, so we’ll set the margins differently (the one for ss-small is already set in the circle itself):
1 2 3 4 5 6 7 8 9 10 11 12 | .ss-container .ss-medium h3{ margin-top: 82px;}.ss-container .ss-large h3{ margin-top: 133px;}.ss-container .ss-left h3{ border-right: 5px solid rgba(164,166,181,0.8);}.ss-container .ss-right h3{ border-left: 5px solid rgba(164,166,181,0.8);} |
The style for the description:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .ss-container h3 span{ color: rgba(255,255,255,0.8); font-size: 13px; display: block; padding-bottom: 5px;}.ss-container h3 a{ font-size: 28px; color: rgba(255,255,255,0.9); display: block;}.ss-container h3 a:hover{ color: rgba(255,255,255,1);} |
Each circle is going to have a different background image:
1 2 3 4 5 6 7 8 9 10 | .ss-circle-1{ background-image:url(../images/1.jpg);}.ss-circle-2{ background-image: url(../images/2.jpg);}.ss-circle-3{ background-image: url(../images/3.jpg);}/* and so on... */ |
And that’s all the style! Let’s take a look at the JavaScript.
