Mause üzerine gelince görsel sağa sola kaysın

10-07-2014, 07:49:55

Merhaba arkadaşlar, az önce sitemin ana sayfasına manşet yaptım, arkaplana da kendim çektiğim bir fotoğrafı ekledim ancak daha güzel görünmesi için mausenin görselin üzerine geldiğinde sağa ve sola hareket etmesini istiyorum, nasıl yaparım ?

Site: http://www.muratdinc.com/

10-07-2014, 11:04:24

#2

Haktan

SkyGhostAir adlı üyeden alıntı: mesajı görüntüle

Merhaba arkadaşlar, az önce sitemin ana sayfasına manşet yaptım, arkaplana da kendim çektiğim bir fotoğrafı ekledim ancak daha güzel görünmesi için mausenin görselin üzerine geldiğinde sağa ve sola hareket etmesini istiyorum, nasıl yaparım ?

Site: http://www.muratdinc.com/

Şöyle bişey mi hocam http://www.batman-3d.de/

10-07-2014, 14:30:39

#3

buyukbeyaz

Hocam orada 2 resim var. Birincisi sabit olan background, ikincisi ise hareketli olan arkası şeffaf batman resimi. Teknik olarak biraz uzun. Fakat google'a parallax scrolling diye aratırsan yardımcı olacak bir çok dataya ulaşırsın. Hazır kodları fln var alıp sadece editlediğinde istediğini elde edebilirsin. Kolay gelsin...

10-07-2014, 19:46:09

#4

SkyGhostAir

Haktan adlı üyeden alıntı: mesajı görüntüle

Şöyle bişey mi hocam http://www.batman-3d.de/

evt onun tek görselli hali lazım bana sağa ve sola haraket edeceği üzerine geldiğimde.

Mause göresin en sağında olduğunda en sağı göreceğim solda odluğunda ise en soru standart olarak ortalanmış bir şekilde görünecek.

buyukbeyaz adlı üyeden alıntı: mesajı görüntüle

Hocam orada 2 resim var. Birincisi sabit olan background, ikincisi ise hareketli olan arkası şeffaf batman resimi. Teknik olarak biraz uzun. Fakat google'a parallax scrolling diye aratırsan yardımcı olacak bir çok dataya ulaşırsın. Hazır kodları fln var alıp sadece editlediğinde istediğini elde edebilirsin. Kolay gelsin...

Baktımda hiç bir sonuç elde edemedim.

10-07-2014, 19:49:54

#5

~~Noventa~~

Üyeliği durduruldu

Şu an sitenize inerken konular sol ve sağdan geliyor, sizin istediğiniz ne tam anlayamadım

11-07-2014, 01:29:37

#6

Hapsher

SkyGhostAir adlı üyeden alıntı: mesajı görüntüle

Merhaba arkadaşlar, az önce sitemin ana sayfasına manşet yaptım, arkaplana da kendim çektiğim bir fotoğrafı ekledim ancak daha güzel görünmesi için mausenin görselin üzerine geldiğinde sağa ve sola hareket etmesini istiyorum, nasıl yaparım ?

Site: http://www.muratdinc.com/

<div id="main-content">

BURAYA

<div id="menu-ust-kisim">

Aşağıdaki kodu ekleyeniz;

<div id="to_left"></div>
<div id="to_right"></div>

Daha sonra CSS dosyanıza;

#to_left, #to_right {width: 50%; position:absolute;height: 330px}
#to_right {right: 0;}
.menu-ust-kisim {transition: .5s;}
#to_left:hover + .menu-ust-kisim {background-position: 0 !important;}
#to_right:hover + .menu-ust-kisim{background-position: -820px !important;}

Kodları ekleyin "transition" değerini değiştirerek hızını ayarlayabilirsiniz.

11-07-2014, 04:01:24

#7

SkyGhostAir

Noventa adlı üyeden alıntı: mesajı görüntüle

Şu an sitenize inerken konular sol ve sağdan geliyor, sizin istediğiniz ne tam anlayamadım

Yok o değiş manşetin arkaplanı: http://prntscr.com/41gcjt

Hapsher adlı üyeden alıntı: mesajı görüntüle

<div id="main-content">

BURAYA

<div id="menu-ust-kisim">

Aşağıdaki kodu ekleyeniz;

<div id="to_left"></div>
<div id="to_right"></div>

Daha sonra CSS dosyanıza;

#to_left, #to_right {width: 50%; position:absolute;height: 330px}
#to_right {right: 0;}
.menu-ust-kisim {transition: .5s;}
#to_left:hover + .menu-ust-kisim {background-position: 0 !important;}
#to_right:hover + .menu-ust-kisim{background-position: -820px !important;}

Kodları ekleyin "transition" değerini değiştirerek hızını ayarlayabilirsiniz.

Dediğinizi yaptım da bu manşet arkaplanı nasıl sağa sola hareket ettirecek onu anlamadım bir bakın olmadı sanırım ?

11-07-2014, 20:57:38

#8

Hapsher

SkyGhostAir adlı üyeden alıntı: mesajı görüntüle

Yok o değiş manşetin arkaplanı: http://prntscr.com/41gcjt

Dediğinizi yaptım da bu manşet arkaplanı nasıl sağa sola hareket ettirecek onu anlamadım bir bakın olmadı sanırım ?

#to_left:hover + .menu-ust-kisim {background-position: 0 !important;}

Yukarıdakini Aşağıdaki ile değiştirin;

#to_left:hover ~ .menu-ust-kisim {background-position: 0 !important;}

Mouse resimin solkısmına gelirse sola sağkısmına gelirse sağa kayar.

11-07-2014, 21:23:47

#9

SkyGhostAir

Hapsher adlı üyeden alıntı: mesajı görüntüle

#to_left:hover + .menu-ust-kisim {background-position: 0 !important;}

Yukarıdakini Aşağıdaki ile değiştirin;

#to_left:hover ~ .menu-ust-kisim {background-position: 0 !important;}

Mouse resimin solkısmına gelirse sola sağkısmına gelirse sağa kayar.

Ekledim oldu hocam teşekkürler yalnız bunu yavaşlatmanın bir yolu var mı yani sadece sağ yada sol değilde mause gittikçe gelsin ?

birde sol oldu ama sağ tarafa gidemiyorum şöyle bir 350px de sola gitse süper olacak görselin bir kısmı ekran dışında kalıyor gelmiyor.