Langsung ke konten utama

Rotating Words CSS Animations

Rotating Words CSS Animations - Pada kesempatan saat ini saya hanya sekedar berbagi tentang sebuah efect yang mungkin brada bisa kembangkan menjadi lebih variatif lagi . Rotating Words CSS Animation saya dapatkan mentahnya dari Tympanus dan tidak melakukan perubahan sedikit pun, kenapa saya share karena efect ini bisa mendukung untuk sebuah desain template terutama yang mengusung template blogazine. Untuk lebih jelasnya silahkan lihat demonya dibawah ini 

Kerangka Dasar 

body{ background: #fff url(https://lh4.googleusercontent.com/-_WXQug5OLUI/UlEpid7X6sI/AAAAAAAAEFg/vFUC6RJwQoE/w702-h468-no/bg1.jpg) no-repeat top right; background-attachment: fixed; background-size: cover;}.rw-wrapper{
width: 80%;
position: relative;
margin: 0px auto 0 auto;
padding: 10px;
}
.rw-sentence{
margin: 0;
}
.rw-sentence span{
text-align: center;
color: rgba(255,255,255,1);
font-family: 'Trocchi';
white-space: nowrap;
text-shadow: 2px 5px 10px rgba(0,0,0,0.1);
}
.rw-sentence > span{
position: absolute;
}
.rw-sentence > span:first-child{
top: 0px;
left: 140px;
font-size: 700%;
color: rgba(187,177,168,0.6);
}
.rw-sentence > span:nth-child(2){
top: 160px;
left: 300px;
font-size: 315%;
color: rgba(191,218,206, 0.7);
}
.rw-sentence > span:nth-child(3){
top: 185px;
left: 65px;
font-size: 600%;
color: rgba(255,255,255,0.8);
}
.rw-sentence > span:last-child{
top: 435px;
left: 550px;
font-size: 200%;
color: rgba(237,234,168, 0.9);
}
.rw-words{
position: absolute;
left: 220px;
top: 220px;
height: 80px;
width: 400px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;
}
.rw-words span{
position: absolute;
font-size: 800%;
color: transparent;
text-shadow: 0px 0px 80px rgba(255,255,255,1);
opacity: 0;
-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 span:nth-child(2) {
    -webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.rw-words span:nth-child(3) {
    -webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.rw-words span:nth-child(4) {
    -webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-o-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
.rw-words span:nth-child(5) {
    -webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.rw-words span:nth-child(6) {
    -webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
-o-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s;
}
@-webkit-keyframes rotateWord {
    0% { opacity: 0; -webkit-animation-timing-function: ease-in; -webkit-transform: translateY(-200px) translateZ(300px) rotateY(-120deg); }
    5% { opacity: 1; -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(0px) translateZ(0px) rotateY(0deg); }
6% { text-shadow: 0px 0px 0px rgba(255,255,255,1); color #fff; }
    17% { opacity: 1; text-shadow: 0px 0px 0px rgba(255,255,255,1); color #fff; }
    20% { opacity: 0; }
    100% { opacity: 0; }
}
@-moz-keyframes rotateWord {
    0% { opacity: 0; -moz-animation-timing-function: ease-in; -moz-transform: translateY(-200px) translateZ(300px) rotateY(-120deg); }
    5% { opacity: 1; -moz-animation-timing-function: ease-out; -moz-transform: translateY(0px) translateZ(0px) rotateY(0deg); }
6% { text-shadow: 0px 0px 0px rgba(255,255,255,1); color #fff; }
    17% { opacity: 1; text-shadow: 0px 0px 0px rgba(255,255,255,1); color #fff; }
    20% { opacity: 0; }
    100% { opacity: 0; }
}
@-o-keyframes rotateWord {
    0% { opacity: 0; -o-animation-timing-function: ease-in; -o-transform: translateY(-200px) translateZ(300px) rotateY(-120deg); }
    5% { opacity: 1; -o-animation-timing-function: ease-out; -o-transform: translateY(0px) translateZ(0px) rotateY(0deg); }
6% { text-shadow: 0px 0px 0px rgba(255,255,255,1); color #fff; }
    17% { opacity: 1; text-shadow: 0px 0px 0px rgba(255,255,255,1); color #fff; }
    20% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWord {
    0% { opacity: 0; -ms-animation-timing-function: ease-in; -ms-transform: translateY(-200px) translateZ(300px) rotateY(-120deg); }
    5% { opacity: 1; -ms-animation-timing-function: ease-out; -ms-transform: translateY(0px) translateZ(0px) rotateY(0deg); }
6% { text-shadow: 0px 0px 0px rgba(255,255,255,1); color #fff; }
    17% { opacity: 1; text-shadow: 0px 0px 0px rgba(255,255,255,1); color #fff; }
    20% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWord {
    0% { opacity: 0; animation-timing-function: ease-in; transform: translateY(-200px) translateZ(300px) rotateY(-120deg); }
    5% { opacity: 1; animation-timing-function: ease-out; transform: translateY(0px) translateZ(0px) rotateY(0deg); }
6% { text-shadow: 0px 0px 0px rgba(255,255,255,1); color #fff; }
    17% { opacity: 1; text-shadow: 0px 0px 0px rgba(255,255,255,1); color #fff; }
    20% { opacity: 0; }
    100% { opacity: 0; }
}
@media screen and (max-width: 1060px){
.rw-sentence > span:first-child { font-size: 500%; left: 0px;}
.rw-sentence > span:nth-child(2) { font-size: 200%; top: 125px; left: 30px; }
.rw-sentence > span:nth-child(3) { top: 175px; left: 30px; font-size: 235%; }
.rw-words { left: 95px; top: 171px; }
.rw-words span { font-size: 250%; }
.rw-sentence > span:last-child { top: 240px; left: 30px; }
}
@media screen and (max-width: 400px){
.rw-sentence > span:first-child { font-size: 200%; left: 0px;}
.rw-sentence > span:nth-child(2) { font-size: 100%; top: 50px; left: 10px; }
.rw-sentence > span:nth-child(3) { top: 76px; left: 10px; font-size: 120%; }
.rw-words { left: 45px; top: 76px; }
.rw-words span { font-size: 120%; }
.rw-sentence > span:last-child { top: 106px; left: 10px; font-size: 100%; }
}
Dasar CSS diatas seperti biasa ditempatkan diatas kode ]]><b:skin> atau </style>
<h2 class="rw-sentence">
<span>What</span>
<span>would you like</span>
<span>to</span>
<div class="rw-words">
<span>share</span>
<span>make</span>
<span>build</span>
<span>enjoy</span>
<span>create</span>
<span>invent</span>
</div>
<span>today?</span>
</h2> 
Kode HTML pemanggil yang bisa sobat kreasikan dan ditempatkan sesuai keinginan.
Label:

Komentar

  1. Adhy SuryadiSenin, Oktober 07, 2013

    Ciyyuuss kang Keeeyyeennn :-bd :-bd

    BalasHapus
    Balasan
    1. Sopala MultapaSenin, Oktober 07, 2013

      lumayan kang .. ngemeng ..emo na teu diaktifkeun hihi

      Hapus
  2. M. Alex JoenaediSenin, Oktober 07, 2013

    mantap juragan,,,,
    unur datang ningan hurupna hehhehhehe

    BalasHapus
    Balasan
    1. Sopala MultapaSenin, Oktober 07, 2013

      Pan kabogoh ge sok kitu gening kang .. unur datang hihi

      Hapus
  3. Beben KobenSenin, Oktober 07, 2013

    geus ningali, ti dropcops D

    BalasHapus
    Balasan
    1. Sopala MultapaSenin, Oktober 07, 2013

      semua ge ges ningali kang .. tujuanna supaya dikembangken

      Hapus
    2. Beben KobenSenin, Oktober 07, 2013

      kembangkeun sok tah, ulah kempes deui

      Hapus
    3. Sopala MultapaSenin, Oktober 07, 2013

      siap kang .. urang kompa ku komprosor

      Hapus
  4. UnknownSenin, Oktober 07, 2013

    keren gan, perlu belajar ma master neh

    BalasHapus
    Balasan
    1. Sopala MultapaSenin, Oktober 07, 2013

      Saya bukan master .. noh yg pada diatas baru mereka master sob

      Hapus
  5. AdminSenin, Oktober 07, 2013

    keren buaget mas, namun kodenya juga gede buaget heheheheh

    BalasHapus
  6. UnknownSenin, Oktober 07, 2013

    Weew keren tuh mas css animasinya, bisa dicobain ntar :)

    BalasHapus
  7. Saeful RahmanKamis, Oktober 10, 2013

    pas kanggo blogazine, keren pisan lamun di angge mah. haha

    BalasHapus
  8. Kang RianJumat, Oktober 11, 2013

    terakhir saya baca tutorial ini di tympanus.net , tapi great post sob .. mudah di pahami kalo bahasa indonesia :D

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Membuat Menu Dengan CSS Border Animation

Setelah beberapa waktu lalu selalu membuat postingan dengan konsep blogazine sebagai ajang pelepas suntuk dan sebagai trick menghindari kejenuhan dalam blogging saat ini saya akan coba share kebiasaan lama yaitu tutorial dalam membuat menu navigasi. Kali menu yang ditawarkan sangat-sangatlah simple , hanya memanfaatkan border dan sedikit animasi hover . SEE DEMO CSS .items{ margin-top:50px; } .items li{ float:left; padding:20px 35px 20px 35px; list-style:none; border:5px solid rgba(255,255,255,0.2); margin-left:10px; -webkit-box-reflect: below 0.5px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4))); } .items li:hover{ border:5px solid rgba(255,255,255,1); -webkit-transition:all ease-in 0.3s;/*Chrome*/ -moz-transition:all ease-in 0.3s;/*Firefox*/ -o-transition:all ease-in 0.3s;/*Opera*/ -ms-transition:all ease-in 0.3s;/*Microsoft*/ } .items li a{ color:#FFF; text-decoration:none
58 komentar
Baca selengkapnya

Membuat Slideout Navigation

Masih Seputar tutorial dalam membuat menu untuk bagian sidebar , namun ini agak sedikit berbeda dari menu tutorial kemaren yang menggunakan system hover , karena kali ini saya menggunakan Push Menu dengan system onclick ( menu akan muncul setelah kita klik tombol / button  tertanda ) dan sekaligus ini jawaban dan request para sahabat.  Baca: Memasang Simple Flat Sidebar  Demosion   Langkah Kustomisasi  Masukan kode CSS dibawah ini sebelum kode </style> .pushmenu { /*this is the nav*/ background: #3c3933; font-family: Arial, Helvetics, sans-serif; width: 240px; height: 100%; top: 0; z-index: 1000; position:fixed; } .pushmenu h3 { color: #cbbfad; font-size: 14px; font-weight: bold; padding: 15px 20px; margin: 0; background: #282522; height: 16px; } .pushmenu a { display: block; /* drops the nav vertically*/ color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; border-top: 1px solid #56544e; b
62 komentar
Baca selengkapnya

Menu CSS3 Dengan Efect Hover

Menu CSS3 Dengan Efect Hover    - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin yang pas , biarpun pada akhirnya sedikit merasa lega juga dengan yang sekarang ,memang belum puas tapi ya sudahlah . O..ya pada sedikit kesempatan ini saya akan coba share sebuah menu simple CSS3 dengan hover efect yang lumayan bisa diandalkan untuk merubah penampilan template . Untuk lengkapnya silahkan cek demonya . See Demo Komposisi   CSS3  /.....---CSS3 BREWOK---.....\ nav {   font:700 16px/60px 'Lato', sans-serif;   width:90%;   margin:30px auto 0 auto;   background: #374D61 ;   overflow:hidden;   -webkit-border-radius:8px;   -moz-border-radius:8px;   -o-border-radius:8px;   border-radius:8px; } nav ul {   height:60px;   overflow:hidden; } nav ul li {   width:25%;   float:left;   text-align:center; } .item-container {   position:relative;   height:120px;   cursor:pointer;   -webkit-transition: all 0.3s ease; -moz-transition:  
45 komentar
Baca selengkapnya