色板游戏_带有CSS3和jQuery的色板书

最新推荐文章于 2021-10-21 15:08:51 发布

culiao9310

最新推荐文章于 2021-10-21 15:08:51 发布

阅读量448

点赞数

文章标签： css html js java vue ViewUI

原文链接：https://tympanus.net/codrops/2012/07/02/swatch-book-with-css3-and-jquery/

版权

色板游戏

View demo 查看演示 Download Source 下载源

Today’s tutorial is about creating an animated swatch book using CSS rotation transforms and JavaScript. The idea is to show a swatch book like structure and make the single swatches or “sheets” clickable. When clicking on a swatch, we’ll rotate the other swatches in order to reveal the selected one.

今天的教程是关于使用CSS旋转变换和JavaScript创建动画样本集的。这样做的目的是展示一种类似于结构的色板书，并使单个色板或“工作表”可点击。单击一个色板时，我们将旋转其他色板以显示选定的色板。

Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. 请注意：本教程的结果只能在支持各自CSS属性的浏览器中按预期工作。

In this tutorial we will be using an icon font that was created with Fontello.

在本教程中，我们将使用由Fontello创建的图标字体。

We will omit vendor prefixes in this tutorial. But you’ll of course find them in the files.

在本教程中，我们将省略供应商前缀。 但是，您当然会在文件中找到它们。

标记 (The Markup)

For the markup we’ll have a simple structure with several divisions where each one contains an icon span and a h4:

对于标记，我们将使用一个简单的结构，将其分为几个部分，每个部分包含一个图标范围和一个h4：


<div id="sb-container" class="sb-container">

	<div>
		<span class="sb-icon icon-cog"></span>
		<h4><span>All Settings</span></h4>
	</div>
	
	<div>
		<span class="sb-icon icon-flight"></span>
		<h4><span>User Modes</span></h4>
	</div>	
	
	<div>
		<!-- ... -->
	</div>	
	
	<!-- ... -->
	
	<div>
		<h4><span>Profile</span></h4>
		<h5><span>We ♥ color</span></h5>
	</div>
	
</div><!-- sb-container -->

The last division will not have an icon span but instead an h4 and an h5 element. This last division will be our “cover”, the top most layer of the swatch book.

最后一个分区将不具有图标范围，而是一个h4和一个h5元素。最后一个部分将是我们的“封面”，即色样书的最顶层。

Let’s take a look at the style.

让我们看一下样式。

CSS (The CSS)

First, let’s define the style for the containing wrapper. We’ll make it the same width like one of the swatches (although they will take up more space) so that we can easily center it:

首先，让我们定义包含包装器的样式。我们将使其宽度与其中一个样本相同(尽管它们将占用更多空间)，以便我们可以轻松地将其居中：


.sb-container {
	position: relative;
	width: 150px;
	height: 400px;
	margin: 30px auto 0 auto;
}

Our aim is to create a swatch book like structure with several swatch “sheets”. Each one will be rotated using the CSS transform property (JS). So, let’s give the swatches a realistic width and height and make them absolute. Our initial state is that all swatches are stacked on top of each other. The transform-origin will define how our swatches will be rotated. Since we’ll want to use the bottom left corner for that, we’ll set a value of 25% 90%. The backface-visibility hidden will help avoiding a jagged looking text when rotating:

我们的目标是创建一个带有几个样本“表”的样本书结构。每一个都将使用CSS变换属性(JS)进行轮换。因此，让我们为色板提供实际的宽度和高度，并使其绝对。我们的初始状态是所有色板都堆叠在一起。 transform-origin将定义如何旋转样本。由于我们要为此使用左下角，因此我们将值设置为25％90％。隐藏的背面可见性将有助于避免旋转时出现锯齿状的文本：


.sb-container div {
    position: absolute;
	top: 0;
	left: 0; 
	width: 130px;
	background: #fff;
	height: 400px;
	border-radius: 5px;
	cursor: pointer;
	text-align: center;
	background-image: url(../images/fabric.png);
	transform-origin: 25% 90%;
	backface-visibility: hidden;
}

Let’s define a different background color and box shadow for each division:

让我们为每个分区定义不同的背景颜色和框阴影：


.sb-container div:nth-child(1){
	background-color: #ea2a29;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);
}
.sb-container div:nth-child(2){
	background-color: #f16729;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 2px 2px 1px rgba(0,0,0,0.1);
}
.sb-container div:nth-child(3){
	background-color: #f89322;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 3px 3px 2px rgba(0,0,0,0.2);
}
.sb-container div:nth-child(4){
	background-color: #ffcf14;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 4px 4px 4px rgba(0,0,0,0.2);
}
.sb-container div:nth-child(5){
	background-color: #ffea0d;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 5px 5px 6px rgba(0,0,0,0.3);
}
.sb-container div:nth-child(6){
	background-color: #87b11d;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 6px 6px 8px rgba(0,0,0,0.3);
}
.sb-container div:nth-child(7){
	background-color: #008253;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 7px 7px 10px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(8){
	background-color: #3277b5;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 8px 8px 12px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(9){
	background-color: #4c549f;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 9px 9px 14px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(10){
	background-color: #764394;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 10px 10px 16px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(11){
	background-color: #ca0d86;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 11px 11px 18px rgba(0,0,0,0.4);
}

We want to make it look as realistic as possible, so we’ll give the bottom most element, which is our first child, a very subtle shadow. For every following element we’ll increase that second shadow.

我们希望使其看起来尽可能逼真，因此我们将最底层的元素(即我们的第一个孩子)的阴影变得非常微妙。对于接下来的每个元素，我们将增加第二个阴影。

The last swatch will serve as a cover, so we’ll give it a special background and box shadow:

最后一个色板将作为封面，因此我们将为其赋予特殊的背景和阴影：


.sb-container div:last-child{
	background: #645b5c url(../images/cover.jpg) repeat center center;
	box-shadow: 
		-1px -1px 3px rgba(0,0,0,0.2),
		12px 12px 20px rgba(0,0,0,0.6),
		inset 2px 2px 0 rgba(255, 255, 255, 0.1);
}

Let’s add a little brass fastener. For that we’ll use the pseudo-class :after. It will have a gradient and a box shadow to make it look like as if it’s from metal. The position depends on the transform-origin of the swatches and since we’ve chosen the bottom left corner, we’ll set the according position of the brass fastener to be there, too:

让我们添加一个黄铜紧固件。为此，我们将使用伪类：after。它会有一个渐变和一个盒子阴影，使其看起来好像是金属制成的。该位置取决于样例的变换原点，并且由于我们选择了左下角，因此我们还将黄铜紧固件的相应位置也设置在该位置：


.sb-container div:last-child:after{
	content: '';
	position: absolute;
	bottom: 15px;
	left: 15px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #dddddd;
	background: linear-gradient(135deg, #dddddd 0%,#58535e 48%,#889396 100%);
	box-shadow: -1px -1px 1px rgba(0,0,0,0.5), 1px 1px 1px rgba(255,255,255,0.1);
}

Let’s style the headings:

让我们设置标题样式：


.sb-container div h4{
	color: rgba(255,255,255,0.9);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	border-top: 1px dashed rgba(0,0,0,0.1);
	border-bottom: 1px dashed rgba(0,0,0,0.1);
	margin: 5px;
	padding: 5px;
	user-select: none;
}
.sb-container div:last-child h4{
	background: rgba(0,0,0,0.2);
	box-shadow: 0 1px 1px rgba(255,255,255,0.1);
}

The big heading on the cover will be rotated and translated into the right position. This depends on the size of it, so if we were to use other words, we’d need to adjust these values:

封面上的大标题将旋转并平移到正确的位置。这取决于它的大小，因此，如果要使用其他字词，则需要调整以下值：


.sb-container div:last-child h5{
	font-size: 50px;
	white-space: nowrap;
	text-align: left;
	margin: 0;
	padding: 0;
	position: absolute;
	line-height: 50px;
	top: 0px;
	left: 0px;
	color: #111;
	text-shadow: -1px -1px 1px rgba(255,255,255,0.1);
	text-transform: uppercase;
	transform: rotate(-90deg) translateX(-157%) translateY(73px);
	transform-origin: 0 0;
	user-select: none;
}

Last, but not least, let’s style the icon class. We’ll use an icon font that we have generated with Fontello (Entypo icon set). We’ll style the span and the :before pseudo-element, which will contain the characters of the icon font:

最后，但并非最不重要，让我们设置图标类的样式。我们将使用通过Fontello (Entypo图标集)生成的图标字体。我们将设置span和：before伪元素的样式，其中将包含图标字体的字符：


span.sb-icon{
	display: block;
	height: 70px;
	width: 70px;
	margin: 20px auto;
	user-select: none;
}
span.sb-icon:before {
	font-family: 'icons';
	font-style: normal;
	font-weight: normal;
	speak: none;
	display: block;
	text-decoration: inherit;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); 
	line-height: 64px;
	width: 100%;
	font-size: 60px;
	color: #000;
	text-shadow: 0 0 1px #000;

}
.icon-cog:before { content: '35'; } /* '5' */
.icon-flight:before { content: '37'; } /* '7' */
.icon-eye:before { content: '34'; } /* '4' */
.icon-install:before { content: '39'; } /* '9' */
.icon-bag:before { content: '36'; } /* '6' */
.icon-globe:before { content: '38'; } /* '8' */
.icon-picture:before { content: '32'; } /* '2' */
.icon-video:before { content: '30'; } /* '0' */
.icon-download:before { content: '41'; } /* 'A' */
.icon-mobile:before { content: '42'; } /* 'B' */
.icon-camera:before { content: '33'; } /* '3' */

And that’s all the style! Now, let’s make some magic!

这就是所有样式！现在，让我们做些魔术吧！

JavaScript (The JavaScript)

Let’s first take a look at our plugin options:

首先让我们看一下我们的插件选项：


$.SwatchBook.defaults = {
	// index of initial centered item
	center : 6,
	// number of degrees that is between each item
	angleInc : 8,
	speed : 700,
	easing : 'ease',
	// amount in degrees for the opened item's next sibling
	proximity : 45,
	// amount in degrees between the opened item's next siblings
	neighbor : 4,
	// animate on load
	onLoadAnim : true,
	// if it should be closed by default
	initclosed : false,
	// index of the element that when clicked, triggers the open/close function
	// by default there is no such element
	closeIdx : -1,
	// open one specific item initially (overrides initclosed)
	openAt : -1
};

The options mean the following:

这些选项表示：

center: The index of the “centered” item, the one that will have an angle of 0 degrees when the swatch book is opened
中心： “居中”项目的索引，当打开色样簿时该索引的角度为0度
angleInc: The space between the items (in degrees)
angleInc：项目之间的间隔(以度为单位)
speed & easing: The speed and transition timing functions
速度和缓动：速度和过渡定时功能
proximity: The distance from the opened item to its next sibling
接近：从打开的项目到下一个同级的距离
neighbor: The distance from the opened item’s next siblings
邻居：到打开的项目的下一个兄弟姐妹的距离
onLoadAnim: If true the swatch book will open with a transition on load, otherwise it will be opened by default
onLoadAnim：如果为true，则样例书将在加载时以过渡状态打开，否则默认情况下将打开
initclosed: If true the swatch book will be initially closed
initclosed：如果为true，则样例书将首先关闭
closeIdx: The index of the item that will trigger the swatch book’s close function when clicked
closeIdx：单击该项目时将触发样本书的关闭功能的项目的索引
openAt: The index of the item that will be opened initially
openAt：最初将打开的项目的索引

We will start by executing the _init function:

我们将从执行_init函数开始：



_init : function( options ) {
			
	this.options = $.extend( true, {}, $.SwatchBook.defaults, options );

	this.$items = this.$el.children( 'div' );
	this.itemsCount = this.$items.length;
	this.current = -1;
	this.support = Modernizr.csstransitions;
	this.cache = [];
	
	if( this.options.onLoadAnim ) {
		this._setTransition();
	}

	if( !this.options.initclosed ) {
		this._center( this.options.center, this.options.onLoadAnim );
	}
	else {

		this.isClosed = true;
		if( !this.options.onLoadAnim ) {
			this._setTransition();
		}

	}

	if( this.options.openAt >= 0 && this.options.openAt < this.itemsCount ) {
		this._openItem( this.$items.eq( this.options.openAt ) );
	}
	
	this._initEvents();
	
}

Here we are basically caching some elements and initializing some variables to be used later. Also, we need to check if the swatch book will be initially opened or closed. If it should be closed, we need to set the CSS transitions for the items (_setTransition function).

在这里，我们基本上是缓存一些元素并初始化一些变量以供以后使用。另外，我们需要检查样本簿是最初打开还是关闭。如果应将其关闭，则需要设置各项CSS过渡(_setTransition函数)。

Finally we load the click events on the items.

最后，我们在项目上加载click事件。



_setTransition : function() {

	if( this.support ) {
		this.$items.css( { 'transition': 'all ' + this.options.speed + 'ms ' + this.options.easing } );
	}

}

When we click on one of the items, the item will rotate so it has 0 degrees. We also need to rotate its siblings, in such way that we can read the opened item's content:

当我们单击其中一个项目时，该项目将旋转以使其具有0度。我们还需要旋转其同级，以使我们可以读取打开的项目的内容：



_initEvents : function() {

	var self = this;
	
	this.$items.on( 'click.swatchbook', function( event ) {
		self._openItem( $( this ) );
	} );

}

_openItem : function( $item ) {
	
	var itmIdx = $item.index();
	
	if( itmIdx !== this.current ) {

		if( this.options.closeIdx !== -1 && itmIdx === this.options.closeIdx ) {

			this._openclose();
			this._setCurrent();

		}
		else {

			this._setCurrent( $item );
			$item.css( { 'transform' : 'rotate(0deg)' } );
			this._rotateSiblings( $item );

		}

	}

}

The _rotateSiblings looks as follows:

_rotateSiblings如下所示：



_rotateSiblings : function( $item ) {

	var self = this,
		idx = $item.index(),
		$cached = this.cache[ idx ],
		$siblings;

	if( $cached ) {
		$siblings = $cached;
	}
	else {

		$siblings = $item.siblings();
		this.cache[ idx ] = $siblings;
		
	}

	$siblings.each( function( i ) {

		var rotateVal = i < idx ? 
			self.options.angleInc * ( i - idx ) : 
			i - idx === 1 ?
				self.options.proximity : 
				self.options.proximity + ( i - idx - 1 ) * self.options.neighbor;

		var transformStr = 'rotate(' + rotateVal + 'deg)';

		$( this ).css( { 'transform' : transformStr } );

	} );

}

Basically, we are rotating the item's next siblings in a way that these leave space for us to read the content of the item. The amount itself is defined in the options (proximity and neighbor).

基本上，我们以某种方式旋转项目的下一个同级，使它们为我们留出空间来读取项目的内容。金额本身在选项(接近度和邻居)中定义。

If we want the swatch book to be initially closed and/or we specify an item to trigger the open/close function, the click event on that item will open/close the swatch book, depending on its current status:

如果我们希望最初关闭色样簿和/或指定一个项目来触发打开/关闭功能，则该项目上的click事件将打开/关闭色样簿，具体取决于它的当前状态：



_openclose : function() {

	this.isClosed ? this._center( this.options.center, true ) : this.$items.css( { 'transform' : 'rotate(0deg)' } );
	this.isClosed = !this.isClosed;

}

And that's all, I hope you like it and find it inspiring!

仅此而已，我希望您喜欢它并发掘灵感！

翻译自: https://tympanus.net/codrops/2012/07/02/swatch-book-with-css3-and-jquery/

色板游戏

culiao9310

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
色板游戏_带有CSS3和jQuery的色板书

色板游戏View demo 查看演示Download Source 下载源Today’s tutorial is about creating an animated swatch book using CSS rotation transforms and JavaScript. The idea is to show a swatch book like...
复制链接

扫一扫