Behaviors Effects Menüsü

Behaviors effects menüsü
 Effects Menüsü:Bu bölümümüzde web sayfamızda resimlerimizin yada "DIV" elemanımızın içine eklediğimiz herşeyi hareketli efektler vermek için kullanırız

Behaviors Effects Menüsü

Appear/Fade:Resmimizin direk olarak yada yumuşatılarak koybolma efekti vermek için kullandığımız bir efektir. bu efektimizi yapmak için öncelikle bir "DIV" eklememiz gerekmektedir desing sayfamızın üst tool barında bulunan "Layout" sekmemizden ekleyebiliriz aşağıdaki resmimizde nerden yapıldığını gösteriyorum

Behaviors Effects Menüsü

Ve daha sonra "DIV"imizin içine bir resim ekliyoruz bunuda yine "Desing" sayfamızın "Common" sekmesinden "İmage" bölümünden ekliyoruz aşağıdaki gibi.

Behaviors Effects Menüsü

 Resmimizide ekledikten sonra "Desing " sayfamızın sağ tarafında bulunan "Behaviors" bölümden "Effects" sekmesinden "Appear/fade" tıklıyoruz

Behaviors Effects Menüsü

Ve daha sonra karşımıza "Appear/Fade" bölümümüzdeki ayarlar karşımıza çıkmaktadır burada kullancağımız efekti ve nasıl bir sekilde olcağını seçiiyoruz ve düzenliyoruz

Behaviors Effects Menüsü

şimdi ayarlarımızda yaptıktan sonra hazırladığımız efekt aşağıdaki gibi olacaktır

Fade örneğimiz:Mouse ile üstüne tıklıyoruz ve resmimiz ikinci resmimizdeki gibi seffaflaşarak kaybolmaktadır ve sonunda kaybolmaktadır resmimiz geri gelmemektedir üstüne tıklanmadığı sürece

Behaviors Effects Menüsü Behaviors Effects Menüsü

Apper örneğimiz:Mouse ile üstüne tıkladığımızda bu sefer seffaflaşarak değil resmimiz direk kaybolmaktadır ve burda ki tek farkısımız seffaflaşmak değil resmimize tıkladıktan sonra gidip tekrar geri gelmesidir ikinci resmimizdeki gibi birden kaybolup geri gelmektedir.

Behaviors Effects MenüsüBehaviors Effects Menüsü

Blind efecti:Web sayfamızdaki resimlere kaydırma efekti vermek için kullanırız genellikle
sayfamıza bu efekti eklemek için diğer efkte yaptığımız gibi sayfamıza bir "DIV" eklemek zorundayız aşağıdaki resimde olduğu gibi

Behaviors Effects Menüsü

Ve daha sonra eklediğimiz bu "DIV" içine bi resim eklemek zorundayız ki yaptığımız efekti görebilelim aşağıdaki gibi resim ekleye biliriz

Behaviors Effects Menüsü

resmimizde ekledikten sonra "Desing" sayfamızın sağ tarafında bulunan "Behaviors" menümüzden "Blind" eektimizi seçelim

Behaviors Effects Menüsü

bu bölümde "Blind" efektimizle ilgili ayarlar bulunmaktadr ve bu ayarların ne olduğu haknda aşağıdaki resmimizde bilgi vermektedir

Behaviors Effects Menüsü


yukardaki gibi ayarlarımızı yaptıktan sonra resmimizin uygulamasını aşağıdaki resimde görmekteyiz

 Blind up örneğimiz: aşağıda görüldüğü gibi "Blindup" efektimiz resmimizi aşağıdan yukarı doğru kaydırmaktadır
Behaviors Effects MenüsüBehaviors Effects Menüsü

Blind down örneğimiz:
Bu efektimizde ise resmimiz "Blind up"ın tersine aşağı doğru kaymaktadır
Behaviors Effects Menüsü Behaviors Effects Menüsü

Grow/Shrink efekti:
resmimizin sanki küçltüpte kaybolma yada olan resmimizin kaybetip büyüyerek çıkartma efekti vermek için kullanırız
öncelikle bu efektimizi uygulamak için her efekte yaptığımız gibi sayfamaıza bir "DIV" eklemek zorundayız

Behaviors Effects Menüsü

ve daha sonra eklediğimiz "dıv"ın içine bir resim eklemeliyiz

Behaviors Effects Menüsü

resmimizde ekledikten sonra "Desing" sayfamızın sağ tarafında bulunan "Behaviors" menümüzden "Grow/Shrink" efektimizi seçelim

Behaviors Effects Menüsü

bu bölümde "Grow/Shrink" efektimizle ilgili ayarlar bulunmaktadr ve bu ayarların ne olduğu haknda aşağıdaki resmimizde bilgi vermektedir

Behaviors Effects Menüsü

Bu ayarlar çerçevesinde uygulamamız aşağıdaki gibidir.

Grow örneğimiz:Bu efektimizde resmimiz önce kaybkolum tekradan büyüyerak geri gelmektedir yani mouse ile üstüne tıkladığımzda kaybolmakta sonra geri gelmektedir.

Behaviors Effects MenüsüBehaviors Effects Menüsü

Shrink örneğimiz:Bu efektimizde ise resmimiz üstüne tıklandığında kendini ufaltarak kaybolmaktadır
 
Behaviors Effects MenüsüBehaviors Effects Menüsü

Highlight efekti:B u efektimiz ise renk geçişli bir efektir belirlediğimiz renkten belirlediğimiz tenke doğru bir geçiş söz konusudur
yine sayfamıza bir "DIV" eklemek zorundayız

Behaviors Effects Menüsü

ve daha sonra eklediğimiz bu "DIV"in içine bir resim ekleyelim

Behaviors Effects Menüsü

bu işlemimizde yaptıktan sonra  "Desing" sayfamızın sağ tarafında bulunan "Behaviors" menümüzden "Highlight" efektimizi seçelim

Behaviors Effects Menüsü

bu bölümde "Highlight" efektimizle ilgili ayarlar bulunmaktadr ve bu ayarların ne olduğu haknda aşağıdaki resmimizde bilgi vermektedir

Behaviors Effects Menüsü

Bu ayarlarımızı yaptıktan sonra uygulamamız aşağıdaki gibidir aşağıda görüldüğü gibi renk geçişimiz sıralı bir sekilde yeşilden mavi ye gitmektedir

Behaviors Effects MenüsüBehaviors Effects MenüsüBehaviors Effects Menüsü

Shake efekti:resmimizin üstüne tıkladığımızda resmimizi titretme efekti yada sallama efekti vermek için kullanırız
yine sayfamıza bir "DIV" eklemek zorundayız

Behaviors Effects Menüsü

ve daha sonra eklediğimiz bu "DIV"in içine bir resim ekleyelim

Behaviors Effects Menüsü

bu işlemimizde yaptıktan sonra  "Desing" sayfamızın sağ tarafında bulunan "Behaviors" menümüzden "Shake" efektimizi seçelim

Behaviors Effects Menüsü

Ve daha sonra karşımıza "Shake" bölümümüzde yapacağımız fazla bir ayar gerekmemektedir sadece olayımızı gerçekleştireceğimiz nesneyi seçmemiz yeterli olacaktır

Behaviors Effects Menüsü

 uygulamamızda birinci resim daha sağ tarafa yakınken ikinci resmimiz sol tarafa daha yakın gözükmektedir burda size tam olarak olayı açaıklayamıyorum normalde resmimizin üstüne tıklandığında resmimiz sağ ve sola doğru hızlı hareket etmektedir.

Behaviors Effects Menüsü

Behaviors Effects Menüsü

Slide efekti:Nesnelerimiz yukarı aşağı doğru kaydırmamızı sağlar yanİ Blindup ve Blinddown ile aynı işlemi yapmaktadır
yine sayfamıza bir "DIV" eklemek zorundayız

Behaviors Effects Menüsü

ve daha sonra eklediğimiz bu "DIV"in içine bir resim ekleyelim

Behaviors Effects Menüsü

bu işlemimizde yaptıktan sonra  "Desing" sayfamızın sağ tarafında bulunan "Behaviors" menümüzden "Slide" efektimizi seçelim

Behaviors Effects Menüsü

Ve daha sonra karşımıza "Slide" bölümümüzde yapacağımız fazla bir ayar gerekmemektedir sadece olayımızı gerçekleştireceğimiz nesneyi seçmemiz yeterli olacaktır

Behaviors Effects Menüsü

şimdi ayarlamalarımıza göre yaptığımız uygulama aşağıdaki gibidir

Slide up örneğimiz:resmimiz yukardan sabitlenerek yukarı doğru çıkmaktadır yani bir bayrak çekmek gibi düşüne biliriz
Behaviors Effects Menüsü Behaviors Effects Menüsü
Slide down örneğimiz:resmimiz yukarda sabitlenip aşağı doğru kaymaktadır yani bir bayrağı yukarıya bağlayıp aşağıya salmak gibi süşüne biliriz
Behaviors Effects Menüsü Behaviors Effects Menüsü

Squish efekti:nesnemizi sol üst köşeye doğru hareket ettirip kaybetme efektidir
yine sayfamıza bir "DIV" eklemek zorundayız

Behaviors Effects Menüsü

ve daha sonra eklediğimiz bu "DIV"in içine bir resim ekleyelim

Behaviors Effects Menüsü

bu işlemimizde yaptıktan sonra sıra uygulamamızın efekt bölümündedir "Desing" sayfamızın sağ tarafında bulunan "Behaviors" menümüzden "Slide" efektimizi seçelim

Behaviors Effects Menüsü

yukarıda görüldüğü gibi sadece olayı uygulayacağımız nesneyi seçmemiz yetmektedir

şimdi yaptığımız örneğimizin uygulamasını görelim

görüldüğü gibi resmimiz sol üst köşeye sabitleenerek yukarı doğru çekilmektedir

Behaviors Effects MenüsüBehaviors Effects Menüsü

Hazırlayan: Tolga GÜLBAKAN
Yorumunuzu Ekleyin


Yükleniyor...
Yükleniyor...