Сегодня мы создадим эффект типографики, который подойдет для больших заголовков с помощью CSS3 и JQuery. Есть много вещей, которые мы можем сделать с CSS3 анимации и переходов, и мы рассмотрим один из них.
Разметка HTML
<div id="letter-container" class="letter-container">
<h2>
<a href="#">...and then there was serendipity</a>
</h2>
</div>
CSS
.letter-container {
border-bottom: 1px dashed rgba(255,255,255,0.3);
border-top: 1px dashed rgba(255,255,255,0.3);
margin: 20px;
padding: 20px;
height: 340px;
}
.letter-container h2 {
text-align: center;
font-family: 'Niconne', Arial, sans-serif;
letter-spacing: 3px;
}
.letter-container h2 a {
text-align: center;
font-size: 130px;
line-height: 160px;
display: block;
padding-bottom: 30px;
-webkit-mask: url(../images/mask.png) repeat;
-o-mask: url(../images/mask.png) repeat;
-moz-mask: url(../images/mask.png) repeat;
-ms-mask: url(../images/mask.png) repeat;
mask: url(../images/mask.png) repeat;
}
.letter-container h2 a span {
color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-animation: sharpen 0.9s linear backwards;
-moz-animation: sharpen 0.9s linear backwards;
-ms-animation: sharpen 0.9s linear backwards;
animation: sharpen 0.9s linear backwards;
}
.letter-container h2 a span:hover{
text-shadow: 0px 0px 40px #fff;
}
.letter-container h2 a span:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
.letter-container h2 a span:nth-child(2) {
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-ms-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.letter-container h2 a span:nth-child(3) {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.letter-container h2 a span:nth-child(4) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-ms-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.letter-container h2 a span:nth-child(5) {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-ms-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.letter-container h2 a span:nth-child(6) {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-ms-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.letter-container h2 a span:nth-child(7) {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
-ms-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.letter-container h2 a span:nth-child(8) {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
-ms-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.letter-container h2 a span:nth-child(9) {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-ms-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.letter-container h2 a span:nth-child(10) {
-webkit-animation-delay: 0.9s;
-moz-animation-delay: 0.9s;
-ms-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.letter-container h2 a span:nth-child(11) {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-ms-animation-delay: 1s;
animation-delay: 1s;
}
.letter-container h2 a span:nth-child(12) {
-webkit-animation-delay: 1.1s;
-moz-animation-delay: 1.1s;
-ms-animation-delay: 1.1s;
animation-delay: 1.1s;
}
.letter-container h2 a span:nth-child(13) {
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-ms-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.letter-container h2 a span:nth-child(14) {
-webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
-ms-animation-delay: 1.3s;
animation-delay: 1.3s;
}
.letter-container h2 a span:nth-child(15) {
-webkit-animation-delay: 1.4s;
-moz-animation-delay: 1.4s;
-ms-animation-delay: 1.4s;
animation-delay: 1.4s;
}
.letter-container h2 a span:nth-child(16) {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.letter-container h2 a span:nth-child(17) {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
-ms-animation-delay: 1.6s;
animation-delay: 1.6s;
}
.letter-container h2 a span:nth-child(17) {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
-ms-animation-delay: 1.6s;
animation-delay: 1.6s;
}
.letter-container h2 a span:nth-child(18) {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
-ms-animation-delay: 1.7s;
animation-delay: 1.7s;
}
.letter-container h2 a span:nth-child(19) {
-webkit-animation-delay: 1.8s;
-moz-animation-delay: 1.8s;
-ms-animation-delay: 1.8s;
animation-delay: 1.8s;
}
.letter-container h2 a span:nth-child(20) {
-webkit-animation-delay: 1.9s;
-moz-animation-delay: 1.9s;
-ms-animation-delay: 1.9s;
animation-delay: 1.9s;
}
.letter-container h2 a span:nth-child(21) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
}
.letter-container h2 a span:nth-child(22) {
-webkit-animation-delay: 2.1s;
-moz-animation-delay: 2.1s;
-ms-animation-delay: 2.1s;
animation-delay: 2.1s;
}
.letter-container h2 a span:nth-child(23) {
-webkit-animation-delay: 2.2s;
-moz-animation-delay: 2.2s;
-ms-animation-delay: 2.2s;
animation-delay: 2.2s;
}
.letter-container h2 a span:nth-child(24) {
-webkit-animation-delay: 2.3s;
-moz-animation-delay: 2.3s;
-ms-animation-delay: 2.3s;
animation-delay: 2.3s;
}
.letter-container h2 a span:nth-child(25) {
-webkit-animation-delay: 2.4s;
-moz-animation-delay: 2.4s;
-ms-animation-delay: 2.4s;
animation-delay: 2.4s;
}
.letter-container h2 a span:nth-child(26) {
-webkit-animation-delay: 2.5s;
-moz-animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
animation-delay: 2.5s;
}
.letter-container h2 a span:nth-child(27) {
-webkit-animation-delay: 2.6s;
-moz-animation-delay: 2.6s;
-ms-animation-delay: 2.6s;
animation-delay: 2.6s;
}
.letter-container h2 a span:nth-child(28) {
-webkit-animation-delay: 2.7s;
-moz-animation-delay: 2.7s;
-ms-animation-delay: 2.7s;
animation-delay: 2.7s;
}
.letter-container h2 a span:nth-child(29) {
-webkit-animation-delay: 2.8s;
-moz-animation-delay: 2.8s;
-ms-animation-delay: 2.8s;
animation-delay: 2.8s;
}
.letter-container h2 a span:nth-child(30) {
-webkit-animation-delay: 2.9s;
-moz-animation-delay: 2.9s;
-ms-animation-delay: 2.9s;
animation-delay: 2.9s;
}
.letter-container h2 a span:nth-child(31) {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.letter-container h2 a span:nth-child(32) {
-webkit-animation-delay: 3.1s;
-moz-animation-delay: 3.1s;
-ms-animation-delay: 3.1s;
animation-delay: 3.1s;
}
.letter-container h2 a span:nth-child(33) {
-webkit-animation-delay: 3.2s;
-moz-animation-delay: 3.2s;
-ms-animation-delay: 3.2s;
animation-delay: 3.2s;
}
@keyframes sharpen {
0% {
opacity: 0;
text-shadow: 0px 0px 100px #fff;
color: transparent;
}
90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #fff;
color: transparent;
}
100% {
color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
}
}
@-moz-keyframes sharpen {
0% {
opacity: 0;
text-shadow: 0px 0px 100px #fff;
color: transparent;
}
90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #fff;
color: transparent;
}
100% {
color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
}
}
@-webkit-keyframes sharpen {
0% {
opacity: 0;
text-shadow: 0px 0px 100px #fff;
color: transparent;
}
90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #fff;
color: transparent;
}
100% {
color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
}
}
@-ms-keyframes sharpen {
0% {
opacity: 0;
text-shadow: 0px 0px 100px #fff;
color: transparent;
}
90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #fff;
color: transparent;
}
100% {
color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
}
}
Подключаем jQuery
(function($){
function injector(t, splitter, klass, after) {
var a = t.text().split(splitter), inject = '';
if (a.length) {
$(a).each(function(i, item) {
inject += '<span class="'+klass+(i+1)+'">'+item+'</span>'+after;
});
t.empty().append(inject);
}
}
var methods = {
init : function() {
return this.each(function() {
injector($(this), '', 'char', '');
});
},
words : function() {
return this.each(function() {
injector($(this), ' ', 'word', ' ');
});
},
lines : function() {
return this.each(function() {
var r = "eefec303079ad17405c889e092e105b0";
// Because it's hard to split a <br/> tag consistently across browsers,
// (*ahem* IE *ahem*), we replaces all <br/> instances with an md5 hash
// (of the word "split"). If you're trying to use this plugin on that
// md5 hash string, it will fail because you're being ridiculous.
injector($(this).children("br").replaceWith(r).end(), r, 'line', '');
});
}
};
$.fn.lettering = function( method ) {
// Method calling logic
if ( method && methods[method] ) {
return methods[ method ].apply( this, [].slice.call( arguments, 1 ));
} else if ( method === 'letters' || ! method ) {
return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array
}
$.error( 'Method ' + method + ' does not exist on jQuery.lettering' );
return this;
};
})(jQuery);
и небольшой скрипт, без которого работать не будет.
<script type="text/javascript">
$(function() {
$("#letter-container h2 a").lettering();
});
</script>
ПРОВЕРЕНО!
|
Понравился материал? Поделитесь с друзьями |
С этим материалом смотрят: Похожие материалы не найдены
| Feedback: 0 | |