Saat 01:38 css animasyon örneği geldi aklıma. Projelere uyarlamak için öylesine tasarladım. Bu tasarımda css 3d animasyonlarından prespective,rotateX, rotateY ve javascript ile yükleniyor uygulaması yaptım. Javascripte MetinCreat fonksiyonu içerisine ne yazarsanız onu dinamik olarak oluşturarak ilgili css efektini uyguluyor. Daha profesyonel halede getirilebilir uğraşmak isterseniz ama benim uykum geldi. Bu günlük bu kadar yeter. Faydalı olaması dileğiyle, umarım projelerinizde kullanırsınız. Başarılar.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
<title>CSS Animasyon</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body{ margin:0; padding:0; background-image: linear-gradient(to right top, #fafafa,#cfd1d1, #747575); width:100vw; height: 100vh; } .main{ position: absolute; left: calc((100vw - 20vw)/2); top: calc((100vh - 80vh)/2); transform-style:preserve-3d; transform: perspective(1000px) rotateX(10deg) rotateY(20deg); width: 20vw; height: 80vh; z-index: 1; } .main .child{ position: absolute; left:0; bottom:0; width:100%; height:100%; transform-style: preserve-3d; } .main .child span{ box-sizing: border-box; position: absolute; left:0; top:0; padding:1vh; display: block; width:100%; height: 100%; background: linear-gradient(0deg, #f1f1f1,#bbb,#f1f1f1); border-radius:10px; text-align: center; font-size:10vw; color:red; font-weight: bold; transition: all 0.4s linear; } @keyframes div-1{ 0%{ transform: rotateX(0deg) ; } 97%{ opacity: 1; } 100%{ transform:rotateX(-180deg); opacity: 0; } } @media only screen and (max-width: 759px) { .main{ width: 30vw; height: 30vh; top:((100vh - 30vh)/2); left:((100vw - 30vw)/2); } } </style> <div class="main"> <div class="child"> </div> </div> <script> /* Yapmanız geren sadece MetinCreat fonksiyonunu çağırırken yazılacak metini girmek. */ MetinCreat(" LÜTFEN BEKLEYİNİZ ÇAĞLAR BOSTANCI "); var say=document.querySelectorAll(".main .child span").length-1; yukleniyor(); /**********************FUNCTION START******************/ function MetinCreat(metin){ for(var sMetin=metin.length-1;sMetin>0;sMetin--){ var span=document.createElement("span"); span.appendChild(document.createTextNode(metin[sMetin])) document.getElementsByClassName("child")[0].appendChild(span); } } function yukleniyor(){ var spanlar=document.querySelectorAll(".main .child span"); spanlar[say].style.animation="div-1 0.1s ease"; spanlar[say].style.transform="rotateX(-180deg)"; spanlar[say].style.opacity=0; say--; if(say<0){ for(var tem=0;tem<document.querySelectorAll(".main .child span").length;tem++){ spanlar[tem].style.transform="rotateX(0deg)"; spanlar[tem].style.opacity=1; } say=document.querySelectorAll(".main .child span").length-1; setTimeout(yukleniyor,50); }else{ setTimeout(yukleniyor,100); } } /**********************FUNCTION END*********************/ </script> |