Clip-path альтернативы для раскрытия текста - PullRequest
Новая
       17

Clip-path альтернативы для раскрытия текста

0 голосов
/ 07 ноября 2018

Я пытаюсь реализовать что-то вроде этого 

body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background-color: #8ce2ea;
	flex-direction: column;
}

.reveal-text,
.reveal-text::after {
	-webkit-animation-delay: 2s;
	        animation-delay: 2s;
	-webkit-animation-iteration-count: 1;
	        animation-iteration-count: 1;
	-webkit-animation-duration: 800ms;
	        animation-duration: 800ms;
	-webkit-animation-fill-mode: both;
	        animation-fill-mode: both;
	-webkit-animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
	        animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

.reveal-text {
	position: relative;
	font-size: 10vw;
	display: block;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	-webkit-animation-name: reveal-text;
	        animation-name: reveal-text;
	color: #FFF;
	white-space: nowrap;
	cursor: default
	
}

.reveal-text::after {
	content: "";
	position: absolute;
	z-index: 999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #f2f98b;
	-webkit-transform: scaleX(0);
	        transform: scaleX(0);
	-webkit-transform-origin: 0 50%;
	        transform-origin: 0 50%;
	pointer-events: none;
	-webkit-animation-name: revealer-text;
	        animation-name: revealer-text;
}


@-webkit-keyframes reveal-text {
	from {
		-webkit-clip-path: inset(0 100% 0 0);
		        clip-path: inset(0 100% 0 0);
	}
	to {
		-webkit-clip-path: inset(0 0 0 0);
		        clip-path: inset(0 0 0 0);
	}
}


@keyframes reveal-text {
	from {
		-webkit-clip-path: inset(0 100% 0 0);
		        clip-path: inset(0 100% 0 0);
	}
	to {
		-webkit-clip-path: inset(0 0 0 0);
		        clip-path: inset(0 0 0 0);
	}
}


@-webkit-keyframes revealer-text {
	
	0%, 50% {
		-webkit-transform-origin: 0 50%;
		        transform-origin: 0 50%;
	}
	
	60%, 100% {
		-webkit-transform-origin: 100% 50%;
		        transform-origin: 100% 50%;		
	}

	
	60% {
		-webkit-transform: scaleX(1);
		        transform: scaleX(1);
	}
	
	100% {
		-webkit-transform: scaleX(0);
		        transform: scaleX(0);
	}
}


@keyframes revealer-text {
	
	0%, 50% {
		-webkit-transform-origin: 0 50%;
		        transform-origin: 0 50%;
	}
	
	60%, 100% {
		-webkit-transform-origin: 100% 50%;
		        transform-origin: 100% 50%;		
	}

	
	60% {
		-webkit-transform: scaleX(1);
		        transform: scaleX(1);
	}
	
	100% {
		-webkit-transform: scaleX(0);
		        transform: scaleX(0);
	}
}
<h1 class="reveal-text">
	I'm here.
</h1>

Но проблема в том, что он не работает на границе, как ожидалось, из-за clip-path (текст отображается с самого начала) 

@keyframes reveal-text {
  from {
     clip-path: inset(0 100% 0 0);
  }
  to {
     clip-path: inset(0 0 0 0);
  }
}

Есть ли другой способ сделать эту работу в краю?

(Я читал, что путь клипа работает в svg на краю, я должен создать svg с текстом?)

1 Ответ

0 голосов
/ 07 ноября 2018

Вот еще один способ, где вам не нужно использовать clip-path. Просто положитесь на цвет фона, который покроет ваш текст. У вас не будет прозрачности, но у вас будет лучшая поддержка. 

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #8ce2ea;
  margin:0;
}

.reveal-text {
  position: relative;
  font-size: 10vw;
  color: #FFF;
}

.reveal-text::after {
  content: "";
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(#f2f98b, #f2f98b), 
    linear-gradient(#8ce2ea, #8ce2ea);
  background-size: 0% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: left, right;
  animation: revealer-text 0.8s 2s cubic-bezier(0.0, 0.0, 0.2, 1) forwards;
}

@keyframes revealer-text {
  0% {
    background-size: 0% 100%, 100% 100%;
    background-position: left, right;
  }
  50% {
    background-size: 100% 100%, 0% 100%;
    background-position: left, right;
  }
  51% {
    background-size: 100% 100%, 0% 100%;
    background-position: right;
  }
  100% {
    background-size: 0% 100%, 0% 100%;
    background-position: right;
  }
}
<h1 class="reveal-text">
  I'm here.
</h1>
...