Frases em "slide".
Não achei um título melhor AOJSOAKS. Enfim, veja o preview: clique aqui! Caso tenha algum erro no preview, recarregue a pág. Não existe tutorial em NENHUM tumblr de html, então não plagiem por favor!
Não é necessário código Jquery nem Java Script nesse tutorial, apenas no css mesmo, mas é necessário atenção!
Primeiramente coloque esse código entre <style> e </style>:
.rw-wrapper{ width: 100%; position: relative; margin: 110px auto 0 auto; font-family: 'Bree Serif'; padding: 10px; } .rw-sentence{width:100%; margin: 0; text-align: left;font-family:'homenaje'; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); } .rw-sentence span{ color: #444; font-size: 175%; font-weight: normal; } .rw-words{ display: inline; text-indent: 10px;text-align:center; } .rw-words-1 span{text-align:center; position: absolute; opacity: 0; overflow: hidden; color: #6b969d; -webkit-animation: rotateWord 18s linear infinite 0s; -moz-animation: rotateWord 18s linear infinite 0s; -o-animation: rotateWord 18s linear infinite 0s; -ms-animation: rotateWord 18s linear infinite 0s; animation: rotateWord 18s linear infinite 0s; } .rw-words-1 span:nth-child(2) { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; color: #6b889d; } .rw-words-1 span:nth-child(3) { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; color: #6b739d; } .rw-words-1 span:nth-child(4) { -webkit-animation-delay: 9s; -moz-animation-delay: 9s; -o-animation-delay: 9s; -ms-animation-delay: 9s; animation-delay: 9s; color: #7a6b9d; } .rw-words-1 span:nth-child(5) { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; color: #8d6b9d; } .rw-words-1 span:nth-child(6) { -webkit-animation-delay: 15s; -moz-animation-delay: 15s; -o-animation-delay: 15s; -ms-animation-delay: 15s; animation-delay: 15s; color: #9b6b9d; } @-webkit-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -webkit-transform: translateY(-30px); } 5% { opacity: 1; -webkit-transform: translateY(0px);} 17% { opacity: 1; -webkit-transform: translateY(0px); } 20% { opacity: 0; -webkit-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -moz-transform: translateY(-30px); } 5% { opacity: 1; -moz-transform: translateY(0px);} 17% { opacity: 1; -moz-transform: translateY(0px); } 20% { opacity: 0; -moz-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -o-transform: translateY(-30px); } 5% { opacity: 1; -o-transform: translateY(0px);} 17% { opacity: 1; -o-transform: translateY(0px); } 20% { opacity: 0; -o-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -ms-transform: translateY(-30px); } 5% { opacity: 1; -ms-transform: translateY(0px);} 17% { opacity: 1; -ms-transform: translateY(0px); } 20% { opacity: 0; -ms-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; transform: translateY(-30px); } 5% { opacity: 1; transform: translateY(0px);} 17% { opacity: 1; transform: translateY(0px); } 20% { opacity: 0; transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @media screen and (max-width: 768px){ .rw-sentence { font-size: 18px; } } @media screen and (max-width: 320px){ .rw-sentence { font-size: 9px; } }
Só mude algo se souber mexer em html/css, apenas o básico, só pra mudar as cores e etc. Então coloque isso onde você quiser que ele apareça, atenção, tem que ser após a tag: <body>.
<h2 class="rw-sentence"> <div class="rw-words rw-words-1"> <span>Aqui ficará a sua Priimeira palavra, tá ok?</span> <span>Aqui ficará a sua Segunda palavra, tá ok?</span> <span>Aqui ficará a sua Terceiraa palavra, tá ok?</span> <span>Aqui ficará a sua Quarta palavraaa, tá ok?</span> <span>Aqui ficará a sua Quinta palavraaa, tá ok?</span> <span>Aqui ficará a sua Sexta Palavraaaa, tá ok?</span> </div></h2>
Agora vamos aprender a mudar as características.
Fonte:
Aperte Ctrl + F e procure por .rw -wrapper e font-family: 'Bree Serif', então isso é para mudar a fonte da frase, troque o Bree sarif pela fonte desejada, ah, e não pode retirar as aspas. NÃO MUDE M-A-I-S N-A-D-A além disso.
Cores:
Aperte Ctrl + f, de novo, e procure por .rw-words-1, vão aparecer vários, não é? Então, procure neles o código color: #algumnumero; e mude o algumnumero para o código da cor desejada.
Adicionar ou retirar frases:
Para retirar uma frase, é simples, basta eliminar um <span>blablabla</span> no código que eu mandei colocar depois de <body> e pronto! Para adicionar é mais complicado, pois terá que mexer no css, que é bastante complexo, mas mesmo assim irei ensinar, adicione esse código depois de <style> ou antes de </style>:
.rw-words-1 span:nth-child(7) { -webkit-animation-delay: 15s; -moz-animation-delay: 15s; -o-animation-delay: 15s; -ms-animation-delay: 15s; animation-delay: 15s; color: #9b6b9d; }
e adicione mais um <span>sua frase</span> junto aos outros que eu mandei, depois de <body>.
Bom, espero ter tirado todas as dúvidas, mas caso contrário, me avise na ask. Tutorial por Marcos Lima, se usar dê like e credite ao Htmland! Não plagie!