geçişler

Bu konuların her birini aşama aşama anlatırsam daha faydalı olur diye kendimce bir harita çizerek buna göre konulara devam ettim. Bazı bölümleri atladığımı düşünüyorum. Eğer geçişler ve dönüşümler ile alakalı bulamadığınız bir bölüm var ise yorum bölümünü veya sorun cevaplayalım bölümünü kullanabilirsiniz. Bir önceki konularımızda 2D ve 3D transform yani dönüşüm konularını anlattık.

Eğer konulardaki örnekleri dikkatlice inceleyediyseniz her işlemin bir anda olup bittiğini fark etmişsinizdir. Normalde kutuların büyümesi, renk değiştirmesi, bir köşeye doğru kayması falan filan gibi geçişlerin bir anda olup bitmemesi için jQuery kullanırdık. Transitions çıktıktan sonra bu tür özellikleri ayarlamak için artık jQuery’ye ihtiyacımız kalmadı diyebiliriz. Geçişler arasındaki zamanlama, geçiş için easing kullanma ve mouse nesneye ulaştığı anda geçişin ne kadar süre içinde gerçekleşeceğini belirleyeceğimiz bir kaç tane konu bulunuyor. Bu özelliği kullanmadaki en rahatsız olduğum konu da her tarayıcının kendine göre ek belirtmiş olması. Tarayıcılara uygun ekleri yerleştirmediğiniz taktirde geçiş efektleri çalışmıyor ve her şey bir anda olup bitiyor. Neyse ki yeni tarayıcı sürümleri çıktıktan sonra çoğu tarayıcı bu ekleri ekleseniz de eklemeseniz de destekliyor artık.

Css3 transitions (geçişler) destekleyen tarayıcılar ve ön ekleri :

Özellik Internet Explorer Goggle Chrome Mozilla Firefox Safari Opera
transition 10.0 26.0
4.0 -webkit-
16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-delay 10.0 26.0
4.0 -webkit-
16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-duration 10.0 26.0
4.0 -webkit-
16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-property 10.0 26.0
4.0 -webkit-
16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-timing-function 10.0 26.0
4.0 -webkit-
16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-

Gördüğünüz gibi Css3 geçişler için kullanabileceğimiz 5 tane özellik bulunuyor. Her birini ayrı ayrı anlatmak yerine tek bir konuda birleştirmek sanırım hepimiz için daha iyi olacak. Yazı biraz uzayacağından dolayı sizin için sıkıcı gelebilir.

Transitions kullanımı:

Bu işlemi uygulayacağınız nesnelerin içine aşağıdaki kodları eklediğinizde geçişler bir anda olup bitmez ve belirlediğiniz zamana göre hız kazanır.

-webkit-transition: 0.3s;/*Chrome 4.0 ve önceki tarayıcılar  + Safari 3.1 ve önceki tarayıcılar  */
-moz-transition: 0.3s;/* Mozilla 4.0 ve önceki tarayıcılar */
-ms-transition: 0.3s; /* Öylesine ekledim :) Internet Explorer'in işi belli olmaz. */
-o-transition: 0.3s; /* Opera 10.5 ve öncesi için */
transition: 0.3s; /* Yeni tarayıcıların desteklediği */

Yukarıdaki kodun anlamı eklenen nesnenin bütün geçişleri 0.3 saniye içinde olsun demek oluyor.  Rakamla 1s olarak belirlediğinizde bir saniyeye eşit olur. Ona göre zaman ayarını yaparsınız.

Örnek olarak aynı kodu aşağıdaki kutuya uyarladık. Kutunun genişliği 200 piksel ve yüksekliği de 100 pikseldir. Mouse kutunun içine girdiği anda yavaşça kutu genişliği 300 piksel ve yüksekliği de 200 piksel olacaktır.

Bu ayarı sadece bir bölüme de uygulayabilmeniz mümkündür. Örneğin bir anda yüksekliği artsın ama yavaşça genişlesin. Bunun için de zaman rakamının (transitions: 0.3s) önüne zaman fonksiyonu  eklemek istediğimiz değerin ismini yazıyoruz.

Örnek: transitions: width 1st;


Yada yüksekliğe ayrı hız ve genişliğe ayrı hız da verebilirsiniz.

Örnek : transitions : width 1s, height 5s;  Bu şekilde 1 saniye içinde genişler ve 5 saniye içinde de yüksekliği artar.

Aynı şekilde bu özelliği aklınıza gelebilecek her türlü nesne için uygulayabilirsiniz. Bir tane örnek de yazı rengi ve yazı fontu için hazırladım. Renk değiştirme ve font büyüklüğü+font tipi değişikliği için ayrı ayrı zaman ayarı ekledim. Normal p etiketine eklediğim yazı fontu standart ve rengi beyaz ancak mouse üzerine geldiğinde aşağıdaki değerler uygulanacak.

    color:red;
    font: normal 28px Calibri, Arial, Sans-Serif;
    -webkit-transition: color 2s, font 0.5s;
    -moz-transition: color 2s, font 0.5s;
    -ms-transition: color 2s, font 0.5s;
    -o-transition: color 2s, font 0.5s;
    transition: color 2s, font 0.5s;


Bu şekilde örnekleri istediğiniz kadar çoğaltabilmeniz mümkündür. Temel olarak geçiş efektlerinin kullanımını öğrendiğinize  göre sıra geldi diğer özelliklere.

Diğer özellikler:

  1. transition-delay : Mouseyi farketme süresi.
  2. transition-duration : Geçiş esnasındaki hız.
  3. transition-property : Özelliğin kullanılacağı değer (genişlik, yükseklik, renk, dönüşümler vs.)
  4. transition-timing-function : jQuery easing benzeri geçiş hareketlerinin seçimi. Hepsini tek tek yazmak yerine sizin için büyük kolaylık sağlayabilecek bir kod oluşturucu da bulunuyor. Aşağıdaki resme tıklayarak açılacak olan sitede  hemen kod oluştuşturmaya başlayabilirsiniz.

css3 ease generator function
Kod oluşturucu ile hazırlanmış bir örnek:

Örnek kod: Sizde bunun gibi kod oluşturarak uygulamak istediğiniz nesnelerin stil kodları içine ekleyerek çalıştırabilirsiniz.

-webkit-transition: all 500ms cubic-bezier(1.000, 0, 1.000, 0.015); /* eski webkit */
-webkit-transition: all 500ms cubic-bezier(1.000, -0.040, 1.000, 0.015); 
   -moz-transition: all 500ms cubic-bezier(1.000, -0.040, 1.000, 0.015); 
     -o-transition: all 500ms cubic-bezier(1.000, -0.040, 1.000, 0.015); 
        transition: all 500ms cubic-bezier(1.000, -0.040, 1.000, 0.015); /* temel */

Şimdi de sıra geldi bu özelliklerin tümünü bir arada kullanmaya. Aşağıdaki kodlar sizin için biraz komik görünebilir. Çünkü bu kodların hepsi sadece kutu genişliğine yani width değerine atanmış olan bir kaç ayar. Mouse kutunun içine girdikten 0.2 saniye sonra geçişler başlıyor ve 0.1 saniye sonra da geçiş işlemi bitiyor. Opera, Safari, Chrome ve Mozilla için ayrı ayrı eklemek oldukça mantıksız. Hatta kullanmamak en doğrusu olur gibime geliyor. Neyseki yeni çıkan tarayıcılar artık standart olanı desteklediklerinden dolayı bu kadar uzun yazanıza gerek kalmıyor.

Örnek bir saçmalık 🙂

/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:0.1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:0.2s;
/* Mozilla */
-moz-transition-property:width;
-moz-transition-duration:0.1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:0.2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:0.1s;
-o-transition-timing-function:linear;
-o-transition-delay:0.2s;
/* Standart */
transition-property:width;
transition-duration:0.1s;
transition-timing-function:linear;
transition-delay:0.2s;

Aklınızda soru işareti bırakmaması için son olarak div ismini .transitions olarak belirlememin sebebi  bu konuyu anlattığımdan dolayıdır. Bu div isimlerini .ahmet veya .mehmet şeklinde olarak da ayarlayabilirsiniz.

Önceki yazılarda  bu konuyu transform 2D ve 3D geçişler üzerinde anlatacağımı söylemiştim. O da konu bittikten sonra aklıma geldi. Neyse sanırım yeteri kadar açıklayıcı bir konu olmuştur. En başta da belirttiğim gibi eğer aklınıza takılan ve yapamadığınız sorunlar var ise yorum olarak bildirebilirsiniz.

 


Etiketler:
Ali senin düşüncelerini merak ediyor. Bir yorum yaz

  1. hasan dedi ki:

    saol