Onedio Manşet

22.06.2014 21:42

tiwaly NodeJS / PHP / NoSQL Kullanıcı

Üyelik 10.10.2013
Yaş/Cinsiyet 34 / E
Meslek Yazılımcı
Konum İzmir

Ad Soyad i** A**
Mesajlar 363
Beğeniler 135 / 104
Ticaret 7, (%100)

div yüksekliği ile yapabilirsin. Normalde mesela:
.manset{height:30px;}
.manset:hover{height:200px;}
böyle oluncada geri kalan 170px lik bölüm görünür.
En basit şekli bu.

Bu kodlar doğru yanlızca kaydırma efekti için .manset{height:30px;} olan kod
.manset{height:30px;transition: height 0.2s;} olarak değiştirmeniz yeterli.

veya

.manset{height:30px;transition: 0.2s linear all;} da kullanabilirsiniz.

ilk verdiğim kod sadece kaydırma efektini içerirken ikinci kodda opacity efektide zamanla kararma olarak yapılabiliyor.

22.06.2014 21:46

#12

MehmetARIK Üyeliği Durdurulmuş Banlı Kullanıcı

Üyelik 26.01.2014
Yaş/Cinsiyet 41 / E
Meslek Öğretmen
Konum İstanbul Anadolu

Ad Soyad M** A**
Mesajlar 626
Beğeniler 13 / 260
Ticaret 2, (%100)

tiwaly adlı üyeden alıntı

Bu kodlar doğru yanlızca kaydırma efekti için .manset{height:30px;} olan kod
.manset{height:30px;transition: height 0.2s;} olarak değiştirmeniz yeterli.

veya

.manset{height:30px;transition: 0.2s linear all;} da kullanabilirsiniz.

Yazdığım en basiti zaten. ease-out ease-in de belirlersin.
Arkadaşın yazdığından javscripte girmek istediğini anladım. Böyle şeyler için hiç javascripte girmeye gerek yok yani . Basit olsun temiz olsun

1 kişi bu mesajı beğendi.

22.06.2014 22:06

#13

srhtycl IBM Ambassador Kullanıcı

Üyelik 13.04.2013
Yaş/Cinsiyet 28 / E
Meslek Software Engineer
Konum İstanbul Anadolu

Ad Soyad S** Y**
Mesajlar 501
Beğeniler 86 / 124
Ticaret 12, (%100)

Mehmet ARIK adlı üyeden alıntı

Yazdığım en basiti zaten. ease-out ease-in de belirlersin.
Arkadaşın yazdığından javscripte girmek istediğini anladım. Böyle şeyler için hiç javascripte girmeye gerek yok yani . Basit olsun temiz olsun

Hocan dediğinizi burada malesef olmuyor.

http://jsfiddle.net/cgrclk/y3aPC/1/

şurada bir deneyebilir misiniz?

22.06.2014 22:09

#14

tiwaly NodeJS / PHP / NoSQL Kullanıcı

Üyelik 10.10.2013
Yaş/Cinsiyet 34 / E
Meslek Yazılımcı
Konum İzmir

Ad Soyad i** A**
Mesajlar 363
Beğeniler 135 / 104
Ticaret 7, (%100)

srhtycl adlı üyeden alıntı

Hocan dediğinizi burada malesef olmuyor.

http://jsfiddle.net/cgrclk/y3aPC/1/

şurada bir deneyebilir misiniz?

Hocam siz direk resim üzerine çalışmışsınız o yüzden olmuyor. Onedio dakinde resim ve içerik üst üste ve resim arkada. Hover efekti de içeriğe verilmiş durumda.

22.06.2014 22:21

#15

emre7 emreguney.info Kullanıcı

Üyelik 08.03.2014
Yaş/Cinsiyet 28 / E
Meslek Öğrenci
Konum İstanbul Anadolu

Ad Soyad E** G**
Mesajlar 1066
Beğeniler 192 / 189
Ticaret 26, (%100)

Mehmet ARIK adlı üyeden alıntı

div yüksekliği ile yapabilirsin. Normalde mesela:
.manset{height:30px;}
.manset:hover{height:200px;}
böyle oluncada geri kalan 170px lik bölüm görünür.
En basit şekli bu.

Ufak bir efekti transition:all 1s; ile verirsin yavaşça yukarı çıkar, ayrıca bunu script ile de yaparsın.

InfiniTheme Profesyonel Magazin - Teknoloji Wordpress Teması Çıktı (Konularımdan ulaşabilirsiniz.)

22.06.2014 22:29

#16

MehmetARIK Üyeliği Durdurulmuş Banlı Kullanıcı

Üyelik 26.01.2014
Yaş/Cinsiyet 41 / E
Meslek Öğretmen
Konum İstanbul Anadolu

Ad Soyad M** A**
Mesajlar 626
Beğeniler 13 / 260
Ticaret 2, (%100)

srhtycl adlı üyeden alıntı

Hocan dediğinizi burada malesef olmuyor.

http://jsfiddle.net/cgrclk/y3aPC/1/

şurada bir deneyebilir misiniz?

http://jsfiddle.net/y3aPC/5/

güncelledim ama güncellemişmi bir bakman lazım.

17.07.2014 19:11

#17

sigma WM Aracı Kullanıcı

Üyelik 01.09.2013
Yaş/Cinsiyet 32 / E
Meslek mühendis
Konum Çanakkale

Ad Soyad M** İ**
Mesajlar 148
Beğeniler 19 / 19
Ticaret 2, (%100)

bulan varmı :)

17.07.2014 19:38

#18

ismail03 WM Aracı Kullanıcı

Üyelik 28.11.2013
Yaş/Cinsiyet 30 / E
Meslek Ameliyathane Hemşiresi
Konum Afyon

Ad Soyad I** Ç**
Mesajlar 2633
Beğeniler 344 / 487
Ticaret 12, (%100)



			
				
                    EA, Battlefield 4’ten Memnun

                buraya metin gelecek :D

body {margin:0;font-size:11px; font-family: Helvetica; line-height:1;}

#manset {

position: relative;
margin: 0 auto 20px;
width: 350px;
height: 350px;
z-index: 11;
background-color: #e74c3c;
}

.ana-haber {
float: left;
overflow: hidden;
position: relative;
width: 330px;
height: 350px;
border-left: 0px solid #fff;
box-shadow: 0 1px 0 #fff;
}


.buyuk-yazi {
color: #fff;
   background:#000;
   

position:absolute;
    bottom:5px;


width: 350px;
display:block;
    height:120px;

}
.buyuk-yazi:hover{height:240px;transition: height 2.2s;}
.buyuk-yazi h1 {
    height:120px;
color: #fff;
float: left;
font-size: 35px;
font-weight: 350;
line-height: 120%;
margin: 0 4% 5px;
text-align: center;
text-decoration: none;
word-wrap: break-word;
-moz-text-shadow: 1px 1px 2px #000;
-ms-text-shadow: 1px 1px 2px #000;
-o-text-shadow: 1px 1px 2px #000;
-webkit-text-shadow: 1px 1px 2px #000;
text-shadow: 1px 1px 2px #000;
text-transform: uppercase;
width:92%;
}

yaptığınızla biraz oynadım böyle oldu deneyin :D

17.06.2015 23:43

#19

Valkyrie Interface Designer / IT Kullanıcı

Üyelik 03.07.2011
Yaş/Cinsiyet 35 / E
Meslek Interface Designer / IT
Konum İzmir

Ad Soyad S** E**
Mesajlar 1365
Beğeniler 20 / 195
Ticaret 2, (%100)

Yeni konu açmak yerine hortlatmayı tercih ediyorum.
Başarıya ulaşan var mı ?

the World shall know Pain
Interface Designer / IT

18.06.2015 01:52

#20

Ecancan Paylaşmak Güzeldir Kullanıcı

Üyelik 30.03.2014
Yaş/Cinsiyet 28 / E
Meslek Öğrenci
Konum Balıkesir

Ad Soyad A** C**
Mesajlar 932
Beğeniler 359 / 215
Ticaret 30, (%100)

Hocam başlığın altına özet kısmını çekin zaten bu balşığı resim üstüne almak için absolute kullanacaksınız. Ardından başlığı en alta yazlayın onun altındaki yazıyıda en alta gelcek şekilde olacak. O rsmin divine overflow hidden verin ve yazı blogunu bottom -px değeriyle aşağıya indirin. Hover efektiyle beraber transition kullanrak bottom değerini oynayarak bu kaydırma olayını yapabilirsiniz. Js ile uğraşılacak bir şey yok şuan burada. Eğer display none ile yaparsanız evet vardı fakat onu gerektirmiyor bu :)

Onedio Manşet

EA, Battlefield 4’ten Memnun

Üye Girişi Yap