Site icon Vavik96

Оригинальные Hover Effects с помощью CSS3 часть 2

CSS3 имеет действительно большой потенциал для создания замечательных эффектов. Вскоре, мы надеемся,можно будет избежать использования JavaScript для простых эффектов и полагаться на 100% на CSS, во всех браузерах.
Я надеюсь, что Вам понравятся эти эксперименты, но, прежде всего, я надеюсь, что они могут вдохновить вас для ваших собственных проектов.

Продолжение, начало здесь.

Пример 6

В этом примере мы сделаем так, что бы описание приеходило  с переднего плана, увеличивалось до его первоначального размера (шкала фактора 10 до 1). Кнопка Информации будет скользить из нижней части (translate).

.view-sixth img { 
	transition: all 0.4s ease-in-out 0.5s; 
}
.view-sixth .mask{ 
	background-color: rgba(146,96,91,0.5);
	opacity:0;
	transition: all 0.3s ease-in 0.4s;
}
.view-sixth h2{
	opacity:0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: scale(10);
    transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth p { 
	opacity:0;
    transform: scale(10);
	transition: all 0.3s ease-in-out 0.2s;
}
.view-sixth a.info { 
	opacity:0;
    transform: translateY(100px);
	transition: all 0.3s ease-in-out 0.1s;
}

Обратный переход будет задержан таким образом, что он выглядел гладким:

.view-sixth:hover .mask {  
	opacity:1; 
	transition-delay: 0s;
}																			 
.view-sixth:hover img { 
	transition-delay: 0s; 
}
.view-sixth:hover h2 { 
	opacity: 1;
    transform: scale(1);
	transition-delay: 0.1s;
}
.view-sixth:hover p { 
	opacity:1; 
    transform: scale(1);
	transition-delay: 0.2s;
}
.view-sixth:hover a.info { 
	opacity:1;
    transform: translateY(0px);
	transition-delay: 0.3s;
}

Пример 7

В этом седьмом примере идея состоит в том, чтобы повернуть изображение в центр и уменьшить его. Тогда описание приходит вращающимся сверху.

.view-seventh img{
    transition: all 0.5s ease-out;
	opacity: 1;
}
.view-seventh .mask { 
	background-color: rgba(77,44,35,0.5);
    transform: rotate(0deg) scale(1);
	opacity: 0;
	transition: all 0.3s ease-out;
    transform: translateY(-200px) rotate(180deg);
}
.view-seventh h2{
    transform: translateY(-200px);
	transition: all 0.2s ease-in-out;
}
.view-seventh p { 
    transform: translateY(-200px);
	transition: all 0.2s ease-in-out;
}
.view-seventh a.info { 
    transform: translateY(-200px);
	transition:  all 0.2s ease-in-out;
}

При наведении курсора мы добавим задержку для элементов elements. Это покажет нам вращающееся изображение, а затем описание приходит в фотографию. В обратном переходе, все исчезнет сразу, и мы увидим изображение повернутым обратно:

.view-seventh:hover img{
    transform: rotate(720deg) scale(0);
	opacity: 0;
}
.view-seventh:hover .mask { 
	opacity: 1;  
    transform: translateY(0px) rotate(0deg);
    transition-delay: 0.4s;
}																						
.view-seventh:hover h2 { 
    transform: translateY(0px);
	transition-delay: 0.7s;
}
.view-seventh:hover p { 
	transform: translateY(0px);
	transition-delay: 0.6s;
}
.view-seventh:hover a.info { 
    transform: translateY(0px);
	transition-delay: 0.5s;
}

Пример 8

В этом восьмом примере мы будем использовать анимацию и воссоздавать bounce effect. Описание будет отражаться сверху.

.view-eighth .mask { 
	background-color: rgba(255, 255, 255, 0.7);
	top: -200px;
	opacity: 0;
	transition: all 0.3s ease-out 0.5s;
}
.view-eighth h2{
    transform: translateY(-200px);
	transition: all 0.2s ease-in-out 0.1s;
}
.view-eighth p { 
    color: #333;
    transform: translateY(-200px);
	transition: all 0.2s ease-in-out 0.2s;
}
.view-eighth a.info { 
    transform: translateY(-200px);
	transition:  all 0.2s ease-in-out 0.3s;
}

Мы добавим анимацию к маске элемента и определим некоторые подходящие задержки для начала описания элементов:

.view-eighth:hover .mask { 
	opacity: 1; 
	top: 0px; 
	transition-delay: 0s; 
    animation: bounceY 0.9s linear;
}																						
.view-eighth:hover h2 { 
    transform: translateY(0px);
	transition-delay: 0.4s;
}
.view-eighth:hover p { 
	transform: translateY(0px);
	transition-delay: 0.2s;
}
.view-eighth:hover a.info { 
    transform: translateY(0px);
	transition-delay: 0s;
}

Для воссоздания подлинного bounce effect, мы используем translateY, как вы можете видеть, есть пара кадров, для того, чтобы сделать эффект:

@keyframes bounceY {
    0% { transform: translateY(-205px);}
    40% { transform: translateY(-100px);}
    65% { transform: translateY(-52px);}
    82% { transform: translateY(-25px);}
    92% { transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}

Пример 9

В этом примере мы будем использовать два элемента маски, чтобы скользить из нижней правой и левой верхней части:

<div class="view view-ninth">
	<img src="images/11.jpg" />
	<div class="mask mask-1"></div>
	<div class="mask mask-2"></div>
	<div class="content">
		<h2>Hover Style #9</h2>
		<p>Some Text</p>
		<a href="#" class="info">Read More</a>
	</div>
</div>

Две маски будет иметь разные оригинальные переходы и трансформации. Кроме того, мы установим один, чтобы выводить сверху и другой внизу:

.view-ninth .mask-1,
.view-ninth .mask-2{
	background-color: rgba(0,0,0,0.5);
    height: 361px;
    width: 361px;
	background: rgba(119,0,36,0.5);
	opacity: 1;
    transition: all 0.3s ease-in-out 0.6s;
}
.view-ninth .mask-1 { 
    left: auto;
    right: 0px;
    transform: rotate(56.5deg) translateX(-180px);
    transform-origin: 100% 0%;
}
.view-ninth .mask-2 { 
    top: auto;
    bottom: 0px;
    transform: rotate(56.5deg) translateX(180px);
    transform-origin: 0% 100%;
}

Контент будет выдержан в таком стиле, что он выглядит как как будто он выходит в виде маленького среза затрагивающего края двух масок:

.view-ninth .content{
    background: rgba(0,0,0,0.9);
    height: 0px;
    opacity: 0.5;
    width: 361px;
    overflow: hidden;
    transform: rotate(-33.5deg) translate(-112px,166px);
    transform-origin: 0% 100%;
    transition: all 0.4s ease-in-out 0.3s;
}
.view-ninth h2{
    background: transparent;
    margin-top: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.view-ninth a.info{
    display: none;
}

При наведении курсора, мы сделаем содержание выходящее из слота и сделать маски касающиеся их краёв:

.view-ninth:hover .content{
    height: 120px;
    width: 300px;
    opacity: 0.9;
    top: 40px;
    transform: rotate(0deg) translate(0px,0px);
}
.view-ninth:hover .mask-1,
.view-ninth:hover .mask-2{
	transition-delay: 0s;
}
.view-ninth:hover .mask-1{
    transform: rotate(56.5deg) translateX(1px);
}
.view-ninth:hover .mask-2 {  
    transform: rotate(56.5deg) translateX(-1px);
}

Пример 10

В последнем примере, мы будем увеличивать изображения с последующим его исчезновением, перенося описание на передний план. Мы можем сделать это, используя шкалу преобразования и настройки уровня прозрачности:

.view-tenth img { 
	transform: scaleY(1);
	transition: all 0.7s ease-in-out;
}
.view-tenth .mask { 
    background-color: rgba(255, 231, 179, 0.3); 
    transition: all 0.5s linear;
    opacity: 0;
}	
.view-tenth h2{
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: scale(0);
    color: #333;
    transition: all 0.5s linear;
    opacity: 0;
}
.view-tenth p {
    color: #333;
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}
.view-tenth a.info { 
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}

При наведении курсора, изображение масштабируется вверх и исчезает, уменьшая его непрозрачность до 0:

.view-tenth:hover img { 
	transform: scale(10);
    opacity: 0;
}
.view-tenth:hover .mask { 
	opacity: 1;
}																			 
.view-tenth:hover h2,
.view-tenth:hover p,
.view-tenth:hover a.info{ 
    transform: scale(1);
    opacity: 1;
}

ОригиналПеревод

Exit mobile version