Классная идея для сортировки фотографий

demosourse

Экспериментальный скрипт. Идея в том, чтобы при нажатии на две кнопки различным образом отсортировать картинки.

HTML структура будет выглядеть следующим образом:

<ul id="stack_yuda" class="stack stack--yuda">
	<li class="stack__item"><img src="img/1.png" alt="Tree 1" /></li>
	<li class="stack__item"><img src="img/2.png" alt="Tree 2" /></li>
	<li class="stack__item"><img src="img/3.png" alt="Tree 3" /></li>
	<li class="stack__item"><img src="img/4.png" alt="Tree 4" /></li>
	<li class="stack__item"><img src="img/5.png" alt="Tree 5" /></li>
	<li class="stack__item"><img src="img/6.png" alt="Tree 6" /></li>
</ul>
<div class="controls">
	<button class="button button--sonar button--reject" data-stack="stack_yuda">
		<i class="fa fa-times"></i>
		<span class="text-hidden">Reject</span>
	</button>
	<button class="button button--sonar button--accept" data-stack="stack_yuda">
		<i class="fa fa-check"></i>
		<span class="text-hidden">Accept</span>
	</button>
</div>

Все элементы расположены абсолютно, один на другом. При клике на ту или иную кнопку им будет присвоен класс “accept” или “reject”.

Для этого примера был реализован небольшой плагин. Для анимации мы использовали плагин dynamics.js от Michael Villar. В том числе для анимации используются CSS стили.

Плагин работает согласно следующим настройкам:

Stack.prototype.options = {
	// значение перспективы
	perspective: 1000,

	// перспектива стека
	perspectiveOrigin : '50% -50%',

	// количество видимых элементов стека
	visible : 3,

	// навигация
	infinite : true,

	// колбэк: запустится когда мы дойдём до конца стека
	onEndStack : function() {return false;},

	// настройки анимации перегруппировки
	// (см. http://dynamicsjs.com/)
	// пример:
	// {type: dynamics.spring,duration: 1641,frequency: 557,friction: 459,anticipationSize: 206,anticipationStrength: 392}
	stackItemsAnimation : {
		duration : 500,
		type : dynamics.bezier,
		points : [{'x':0,'y':0,'cp':[{'x':0.25,'y':0.1}]},{'x':1,'y':1,'cp':[{'x':0.25,'y':1}]}]
	},

	// задержка
	stackItemsAnimationDelay : 0,

	// настройка анимации перед группировкой
	stackItemsPreAnimation : {
		reject : {
			elastic : true,
			animationProperties : {},
			animationSettings : {}
		},
		accept : {
			elastic : true,
			animationProperties : {},
			animationSettings : {}
		}
	}
}

А вот пример эффекта reject/accept (одобрения/отклонения):

/***********************************************/
/******************** yuda *********************/
/***********************************************/

.stack--yuda .stack__item--reject {
	-webkit-animation: yudaReject 0.5s forwards;
	animation: yudaReject 0.5s forwards;
}

@-webkit-keyframes yudaReject {
	to {
		opacity: 0;
		-webkit-transform: translate3d(0, 200px, 0);
		transform: translate3d(0, 200px, 0);
	}
}

@keyframes yudaReject {
	to {
		opacity: 0;
		-webkit-transform: translate3d(0, 200px, 0);
		transform: translate3d(0, 200px, 0);
	}
}

.stack--yuda .stack__item--accept {
	-webkit-transform-origin: 50% 300%;
	transform-origin: 50% 300%;
	-webkit-animation: yudaAccept 0.5s forwards;
	animation: yudaAccept 0.5s forwards;
}

@-webkit-keyframes yudaAccept {
	to {
		opacity: 0;
		-webkit-transform: rotate3d(0, 0, 1, 20deg);
		transform: rotate3d(0, 0, 1, 20deg);
	}
}

@keyframes yudaAccept {
	to {
		opacity: 0;
		-webkit-transform: rotate3d(0, 0, 1, 20deg);
		transform: rotate3d(0, 0, 1, 20deg);
	}
}

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tympanus.net/codrops/2015/10/28/effect-ideas-for-card-stacks/
Перевел: Станислав Протасевич
Урок создан: 2 Ноября 2015
Просмотров: 7978
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^