Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
   
Konu: İzm Scrolling Prefixes (Html)
D4RKG1RL
*
avatar
Albay
Durum: Çevrimdışı
Seviye Puanı: 23
Yaşam Puanı: 191 / 563
Deneyim: 53 / 100
Rep Sayısı: 308
Mesaj Sayısı: 668
Üyelik Tarihi: 14.08.2013
     
Yorum: #1
İzm Scrolling Prefixes (Html)
25.07.2015 14:20
Ufak bir html5 çalışması sizinleden paylaşmak istedim, belki birinizin işine yarar :P



HTML:
PHP Kod:
<span id="main">
  <
span id="scroll">
    <
span class="item">Cyber</span>
    <
span class="item">Sanal</span>
    <
span class="item">Digital</span>
    <
span class="item">Security</span>
    <
span class="item">Cyber</span>
    <
span class="item">Code</span>
    <
span class="item">Alkol</span>
  </
span>
  
izm
</span

CSS:
PHP Kod:
@import url(http://fonts.googleapis.com/css?family=Roboto:500,300,700,100,400);

body {
  
background#222222;
}

#scroll, #main {
  
font-size48px;
  
font-family'Roboto Light'sans-serif;
  
colorwhite;
}

#main {
  
positionabsolute;
  
bottom50%;
  
right50%;
  
transformtranslate(50%, 50%);
}
#main:after {
  
clearboth;
}

#scroll {
  
floatleft;
  
transformtranslate(-100%, 0);
  
margin-right: -100%;
  
height0;
}

#scroll .item {
  
displayblock;
  
text-shadow0 0 8px white-4px 12px white0 4px 12px white-8px 16px white0 8px 16px white;
  
text-alignright;
  
positionrelative;
  
margin0;
}

@
keyframes scrollanim {
  
0% {opacity0top: -128px;}
  
25% {colorrgba(2552552550);}
  
40% {colorrgba(3434341); opacity1;}
  
60% {colorrgba(3434341); opacity1;}
  
75% {colorrgba(2552552550);}
  
100% {opacity0top128px;}


JScript:
PHP Kod:
//alternatively for a non-JS approach: Set the animation and offset for each child manually.

delay 0.1;
duration = $("#scroll .item").length delay;

$(
"#scroll .item").each(function(n) {
  $(
this).css("transform""translateY(-"+(n*100)+"%)");
  $(
this).css("animation""scrollanim "+duration+"s linear -"+(delay*n)+"s infinite");
}); 
Alinti
Rep Verenler: #Ayar , #H4CK4L
DaRKNeSS
*
avatar
Binbaşı
Durum: Çevrimdışı
Seviye Puanı: 53
Yaşam Puanı: 1,315 / 1,315
Deneyim: 60 / 100
Rep Sayısı: 124
Mesaj Sayısı: 5584
Üyelik Tarihi: 11.08.2013
     
Yorum: #2
Cvp: İzm Scrolling Prefixes (Html)
25.07.2015 15:57
baya iyimiş bu Exciting


Alinti
#Ayar
*
avatar
Tabutçu
Durum: Çevrimiçi
Seviye Puanı: 35
Yaşam Puanı: 793 / 862
Deneyim: 51 / 100
Rep Sayısı: 1518
Mesaj Sayısı: 1802
Üyelik Tarihi: 13.08.2013
      
Yorum: #3
Cvp: İzm Scrolling Prefixes (Html)
25.07.2015 19:31
Guzelmis,alkolizm ne oluyor Exciting Exciting

Başka forumlarda üyeliğim bulunmamaktadır.
ayar
Alinti
D4RKG1RL
*
avatar
Albay
Durum: Çevrimdışı
Seviye Puanı: 23
Yaşam Puanı: 191 / 563
Deneyim: 53 / 100
Rep Sayısı:
Mesaj Sayısı: 668
Üyelik Tarihi: 14.08.2013
     
Yorum: #4
Cvp: İzm Scrolling Prefixes (Html)
25.07.2015 22:07
(25.07.2015 19:31)Ayar Nickli Kullanıcıdan Alıntı:  Guzelmis,alkolizm ne oluyor Exciting Exciting

aklıma başka bişey gelmedi Prettiness
Alinti
efzatr35
*
avatar
Teğmen
Durum: Çevrimdışı
Seviye Puanı: 11
Yaşam Puanı: 35 / 273
Deneyim: 94 / 100
Rep Sayısı: 5
Mesaj Sayısı: 166
Üyelik Tarihi: 16.06.2015
     
Yorum: #5
Cvp: İzm Scrolling Prefixes (Html)
25.07.2015 22:21
eline sağlık Smile
Alinti



1 Ziyaretçi