Çağlar Bostancı

TURKEY/Ankara
Programmer
Turkish Language and Literature
Management İnformation Systems
caglarbostanci.com.tr

CSS Animasyon Uygulaması

Tarhi : 12-07-2019 02:00:29 | Yazar : ÇAĞLAR BOSTANCI

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.


            <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>

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>

<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>

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>

DEMO 1

DEMO 2

İlgili

PYTHON

>> print("PYTHON Konu İçeriği ")

Hemen Başla

Array ( [0] => WP_Term Object ( [term_id] => 210 [name] => Animasyon [slug] => animasyon [term_group] => 0 [term_taxonomy_id] => 210 [taxonomy] => post_tag [description] => [parent] => 0 [count] => 1 [filter] => raw ) [1] => WP_Term Object ( [term_id] => 80 [name] => CSS [slug] => css [term_group] => 0 [term_taxonomy_id] => 80 [taxonomy] => post_tag [description] => [parent] => 0 [count] => 11 [filter] => raw ) [2] => WP_Term Object ( [term_id] => 211 [name] => CSS Animasyon Uygulaması [slug] => css-animasyon-uygulamasi [term_group] => 0 [term_taxonomy_id] => 211 [taxonomy] => post_tag [description] => [parent] => 0 [count] => 1 [filter] => raw ) [3] => WP_Term Object ( [term_id] => 106 [name] => CSS DERSLERİ [slug] => css-dersleri [term_group] => 0 [term_taxonomy_id] => 106 [taxonomy] => post_tag [description] => [parent] => 0 [count] => 4 [filter] => raw ) [4] => WP_Term Object ( [term_id] => 174 [name] => CSS Developer [slug] => css-developer [term_group] => 0 [term_taxonomy_id] => 174 [taxonomy] => post_tag [description] => [parent] => 0 [count] => 8 [filter] => raw ) [5] => WP_Term Object ( [term_id] => 186 [name] => CSS Uzmanı [slug] => css-uzmani [term_group] => 0 [term_taxonomy_id] => 186 [taxonomy] => post_tag [description] => [parent] => 0 [count] => 3 [filter] => raw ) [6] => WP_Term Object ( [term_id] => 172 [name] => PHP Developer [slug] => php-developer [term_group] => 0 [term_taxonomy_id] => 172 [taxonomy] => post_tag [description] => [parent] => 0 [count] => 26 [filter] => raw ) [7] => WP_Term Object ( [term_id] => 169 [name] => PHP Hocası [slug] => php-hocasi [term_group] => 0 [term_taxonomy_id] => 169 [taxonomy] => post_tag [description] => [parent] => 0 [count] => 19 [filter] => raw ) [8] => WP_Term Object ( [term_id] => 171 [name] => PHP Uzmanı [slug] => php-uzmani [term_group] => 0 [term_taxonomy_id] => 171 [taxonomy] => post_tag [description] => [parent] => 0 [count] => 24 [filter] => raw ) [9] => WP_Term Object ( [term_id] => 164 [name] => web tasarım [slug] => web-tasarim [term_group] => 0 [term_taxonomy_id] => 164 [taxonomy] => post_tag [description] => [parent] => 0 [count] => 18 [filter] => raw ) [10] => WP_Term Object ( [term_id] => 165 [name] => web-master [slug] => web-master [term_group] => 0 [term_taxonomy_id] => 165 [taxonomy] => post_tag [description] => [parent] => 0 [count] => 12 [filter] => raw ) )

Çağlar Bostancı

CSS Animasyon Uygulaması