Behaviors Effect Menüsü
Effect menüsü
Nesnelerimize değişik efektler vermemize yarayan menüdür.
İlk önce bir div içinde resim ekleyelim.

Sonra behaviors effect menüsünden appear fadeyi seçelim.

Fade
Solma efekti vermeye yarar.
Target element : Nesnemizi seçeriz.
Effect duration : Efektimizin süresini ayarlarız.
Fade from : Hangi dereceden solmaya başlayacağını ayarlarız.
Fade to : Hangi dereceye kadar solacağını ayarlarız.

Fare ile tıklama olayını seçtik.

Resmimize fare ile tıklarız.

Resmimiz belirtilen sürede solma efekti alcaktır.

Appear
Belirme efekti vermemize yarar.
Target element : Nesnemizi seçeriz.
Effect duration : Efektimizin süresini ayarlarız.
Appear from : Hangi dereceden belirmeye başlayacağını ayarlarız.
Appear to : Hangi dereceye kadar belireceğini ayarlarız.

Resmimize fare ile tıklarız.

Resmimiz ilk olarak görünmezken yavaş yavaş belirmeye başlayacaktır.

En sonunda ise tamamen belirmiş olacaktır.

Blind
Behaviors effect menüsünden blindi seçelim.

Blind up
Nesnemize yukarı doğru tırmanma efekti vermemize yarar.
Target element : Nesnemizi seçeriz.
Effect duration : Efektimizin süresini ayarlarız.
Blind up from : Hangi dereceden yukarıya tırmanmaya başlayacağını ayarlarız.
Blind up to : Hangi dereceye kadar yukarıya tırmanacağını ayarlarız.

Fare ile tıklama olayını seçtik.

Resmimize fare ile tıklarız.

Sonra resmimiz yukarıya doğru tırmanır.

Blind Down
Nesnemize aşağıya doğru iniş efekti vermemize yarar.
Target element : Nesnemizi seçeriz.
Effect duration : Efektimizin süresini ayarlarız.
Blind down from : Hangi dereceden aşağıya inmeye başlayacağını ayarlarız.
Blind down to : Hangi dereceye kadar aşağıya ineceğini ayarlarız.

Resmimize fare ile tıklarız.

Sonra resmimiz aşağıya doğru iner.

Grow/Shrink
Behaviors effect menüsünden grow/shrinki seçelim.

Shrink
Nesnemize küçülme efekti vermemize yarar.
Target element : Nesnemizi seçeriz.
Effect duration : Efektimizin süresini ayarlarız.
Shrink from : Hangi dereceden küçülmeye başlayacağını ayarlarız.
Shrink to : Hangi dereceye küçüleceğini ayarlarız.
Shrink to : Nereden küçüleceğini ayarlarız.

Fare ile tıklama olayını seçeriz.

Resmimize tıklarız.

Sonra resmimiz küçülme efektiyle küçülür.

Grow
Nesnemize büyüme efekti vermemize yarar.
Target element : Nesnemizi seçeriz.
Effect duration : Efektimizin süresini ayarlarız.
Grow from : Hangi dereceden büyümeye başlayacağını ayarlarız.
Grow to : Hangi dereceye büyüyeceğini ayarlarız.
Grow from : Nereden büyüyeceğini ayarlarız.

Resmimize tıklarız.

Sonra resmimiz büyüme efekti ile büyür.

Highlight
Behaviors effect menüsünden highlighti seçelim.

Highlight
Nesnemize perde efekti vermemize yarar.
Target element : Nesnemizi seçeriz.
Effect duration : Efektimizin süresini ayarlarız.
Start color : Başlangıç resmini ayarlarız.
End color : Bitiş rengini ayarlarız.
Color After Effect : Renklerden sonraki ara rengi ayarlarız.

Fare ile tıklama olayını seçeriz.

Resmimize tıklarız.

Resmimizin üzerine belirttiğimiz renkte bir perde belirir.

Daha sonra resmimiz eski haline döner.

Highlight
Behaviors effect menüsünden shakeyi seçelim.

Shake
Nesnemize sallama efekti vermeye yarar.
TargeT Element : Nesnemizi seçeriz.

Fare ile tıklama olayını seçeriz.

Resmimize tıklarız.

Daha sonra resmimiz sallanmış gibi olur.

Slide
Behaviors effect menüsünden slideyi seçelim.

Slide up
Nesnemize yukarı doğru kayma efekti vermemize yarar.
Target element : Nesnemizi seçeriz.
Effect duration : Efektimizin süresini ayarlarız.
Slide up from : Hangi dereceden yukarı kayacağını ayarlarız.
Slide up to : Hangi dereceye kadar kayacağını ayarlarız.

Fare ile tıklama olayını seçeriz.

Resmimize tıklarız.

Daha sonra resmimiz yukarıya doğru kaymaya başlar.

Resmimiz sonuna kadar kayar.

Slide down
Nesnemize aşağıya doğru kayma efekti vermemize yarar.
Target element : Nesnemizi seçeriz.
Effect duration : Efektimizin süresini ayarlarız.
Slide down from : Hangi dereceden aşağıya kayacağını ayarlarız.
Slide down to : Hangi dereceye kadar kayacağını ayarlarız.

Resmimize tıklarız.

Resmimiz üstten yavaş yavaş kaymaya başlar.

Aşağıya doğru kaymaya devam eder.

Squish
Uzaklaşarak kaybolma efekti vermemize yarar.
Behaviors effect menüsünden squishi seçelim.

TargeT Element : Nesnemizi seçeriz.

Fare ile tıklama olayını seçeriz.

Resmimize tıklarız.

Resmimiz uzaklaşma efekti ile uzaklaşır.

Kaynak Reha Gürsel
Nesnelerimize değişik efektler vermemize yarayan menüdür.
İlk önce bir div içinde resim ekleyelim.

Sonra behaviors effect menüsünden appear fadeyi seçelim.

Fade
Solma efekti vermeye yarar.
Target element : Nesnemizi seçeriz.
Effect duration : Efektimizin süresini ayarlarız.
Fade from : Hangi dereceden solmaya başlayacağını ayarlarız.
Fade to : Hangi dereceye kadar solacağını ayarlarız.

Fare ile tıklama olayını seçtik.

Resmimize fare ile tıklarız.

Resmimiz belirtilen sürede solma efekti alcaktır.

Appear
Belirme efekti vermemize yarar.
Target element : Nesnemizi seçeriz.
Effect duration : Efektimizin süresini ayarlarız.
Appear from : Hangi dereceden belirmeye başlayacağını ayarlarız.
Appear to : Hangi dereceye kadar belireceğini ayarlarız.

Resmimize fare ile tıklarız.

Resmimiz ilk olarak görünmezken yavaş yavaş belirmeye başlayacaktır.

En sonunda ise tamamen belirmiş olacaktır.

Blind
Behaviors effect menüsünden blindi seçelim.

Blind up
Nesnemize yukarı doğru tırmanma efekti vermemize yarar.
Target element : Nesnemizi seçeriz.
Effect duration : Efektimizin süresini ayarlarız.
Blind up from : Hangi dereceden yukarıya tırmanmaya başlayacağını ayarlarız.
Blind up to : Hangi dereceye kadar yukarıya tırmanacağını ayarlarız.

Fare ile tıklama olayını seçtik.

Resmimize fare ile tıklarız.

Sonra resmimiz yukarıya doğru tırmanır.

Blind Down
Nesnemize aşağıya doğru iniş efekti vermemize yarar.
Target element : Nesnemizi seçeriz.
Effect duration : Efektimizin süresini ayarlarız.
Blind down from : Hangi dereceden aşağıya inmeye başlayacağını ayarlarız.
Blind down to : Hangi dereceye kadar aşağıya ineceğini ayarlarız.

Resmimize fare ile tıklarız.

Sonra resmimiz aşağıya doğru iner.

Grow/Shrink
Behaviors effect menüsünden grow/shrinki seçelim.

Shrink
Nesnemize küçülme efekti vermemize yarar.
Target element : Nesnemizi seçeriz.
Effect duration : Efektimizin süresini ayarlarız.
Shrink from : Hangi dereceden küçülmeye başlayacağını ayarlarız.
Shrink to : Hangi dereceye küçüleceğini ayarlarız.
Shrink to : Nereden küçüleceğini ayarlarız.

Fare ile tıklama olayını seçeriz.

Resmimize tıklarız.

Sonra resmimiz küçülme efektiyle küçülür.

Grow
Nesnemize büyüme efekti vermemize yarar.
Target element : Nesnemizi seçeriz.
Effect duration : Efektimizin süresini ayarlarız.
Grow from : Hangi dereceden büyümeye başlayacağını ayarlarız.
Grow to : Hangi dereceye büyüyeceğini ayarlarız.
Grow from : Nereden büyüyeceğini ayarlarız.

Resmimize tıklarız.

Sonra resmimiz büyüme efekti ile büyür.

Highlight
Behaviors effect menüsünden highlighti seçelim.

Highlight
Nesnemize perde efekti vermemize yarar.
Target element : Nesnemizi seçeriz.
Effect duration : Efektimizin süresini ayarlarız.
Start color : Başlangıç resmini ayarlarız.
End color : Bitiş rengini ayarlarız.
Color After Effect : Renklerden sonraki ara rengi ayarlarız.

Fare ile tıklama olayını seçeriz.

Resmimize tıklarız.

Resmimizin üzerine belirttiğimiz renkte bir perde belirir.

Daha sonra resmimiz eski haline döner.

Highlight
Behaviors effect menüsünden shakeyi seçelim.

Shake
Nesnemize sallama efekti vermeye yarar.
TargeT Element : Nesnemizi seçeriz.

Fare ile tıklama olayını seçeriz.

Resmimize tıklarız.

Daha sonra resmimiz sallanmış gibi olur.

Slide
Behaviors effect menüsünden slideyi seçelim.

Slide up
Nesnemize yukarı doğru kayma efekti vermemize yarar.
Target element : Nesnemizi seçeriz.
Effect duration : Efektimizin süresini ayarlarız.
Slide up from : Hangi dereceden yukarı kayacağını ayarlarız.
Slide up to : Hangi dereceye kadar kayacağını ayarlarız.

Fare ile tıklama olayını seçeriz.

Resmimize tıklarız.

Daha sonra resmimiz yukarıya doğru kaymaya başlar.

Resmimiz sonuna kadar kayar.

Slide down
Nesnemize aşağıya doğru kayma efekti vermemize yarar.
Target element : Nesnemizi seçeriz.
Effect duration : Efektimizin süresini ayarlarız.
Slide down from : Hangi dereceden aşağıya kayacağını ayarlarız.
Slide down to : Hangi dereceye kadar kayacağını ayarlarız.

Resmimize tıklarız.

Resmimiz üstten yavaş yavaş kaymaya başlar.

Aşağıya doğru kaymaya devam eder.

Squish
Uzaklaşarak kaybolma efekti vermemize yarar.
Behaviors effect menüsünden squishi seçelim.

TargeT Element : Nesnemizi seçeriz.

Fare ile tıklama olayını seçeriz.

Resmimize tıklarız.

Resmimiz uzaklaşma efekti ile uzaklaşır.

Kaynak Reha Gürsel
Yorumunuzu Ekleyin