Dördüncü kişi seninle olsun!


24

Yıldız Savaşları günün onuruna , Yıldız Savaşları açılış taraması gibi kayan aşağıdaki metni görüntülemek için bir program yazın :

It  is  a  period  of  civil war.  Rebel
spaceships,   striking  from   a  hidden
base,  have   won  their  first  victory
against the evil Galactic Empire.

During  the battle,  Rebel spies managed
to  steal  secret  plans to the Empire's
ultimate   weapon,  the  Death Star,  an
armored   space  station   with   enough
power to destroy an entire planet.

Pursued by the Empire's sinister agents,
Princess  Leia  races  home  aboard  her
starship,  custodian of the stolen plans
that  can save  her people  and  restore
freedom to the galaxy...

Animasyonlu bir GIF çıkarabilir veya programınızın göstermesini sağlayabilirsiniz. Çıktı aşağıdakileri göstermelidir:

  • Metin görüntünün / ekranın altından başlamalıdır.
  • Zirveye ulaşana kadar yukarı kaydırmalıdır. Bir 30metnin en üstüne ulaşması en az saniye almalıdır . Animasyon, tüm metinler üste gelene kadar devam etmelidir.
  • Bu mesafede, metin 1/3boyuttan daha küçük olana kadar küçülmelidir (uzunluk ve yazı tipi)
  • Bu açıyı takip etmek için metin eğimli olmalıdır.
  • Metin sol ve sağa yaslanmış olmalıdır. Verilen metin tek boşluklu fontlar için zaten haklı, ancak fazladan boşlukları kaldırabilir (yeni satırları değil) ve kendiniz haklı çıkarabilirsiniz.
  • Metin sarı olmalı
  • Arka plan siyah olmalı

Bu video açılış taramasını gösterir.

İyi şanslar ve Dördüncü sizinle olsun !


5
Peki ya dördüncü kişi seninle olsun?
Doktor,

@Doktor Öyleydi, ama yazım hatasını düzelttim. Cidden, çift vuruş için gitmem gerektiğini mi düşünüyorsun?
Justin,

3
Bunu yapmak daha zor olurdu.
Doktor

4
@Doctor "İleride yapmak, bu zor olurdu" - Sizin için bunu yaptım.
MikeTheLiar,

Bu soru hakkında eğlenceli bir şey: göndermeden önce, sistem bunun "çok öznel" olarak kapatılabileceği konusunda beni uyardı.
Justin,

Yanıtlar:


8

HTML, 762

<div><pre>It  is  a  period  of  civil war.  Rebel
spaceships,   striking  from   a  hidden
base,  have   won  their  first  victory
against   the   evil   Galactic  Empire.

During  the battle,  Rebel spies managed
to  steal  secret  plans to the Empire's
ultimate   weapon,  the  Death Star,  an
armored   space  station   with   enough
power   to  destroy  an  entire  planet.

Pursued by the Empire's sinister agents,
Princess  Leia  races  home  aboard  her
starship,  custodian of the stolen plans
that  can save  her people  and  restore
freedom to the galaxy...</pre></div><style>pre{transform:perspective(300px)rotateX(25deg);position:absolute;left:99px;color:yellow;animation:a 30s linear}@keyframes a{100%{font-size:0px}}body{background:black}</style>

Biraz dalgalı (okuma: çok dalgalı: P).

İşte bir JSFiddle ( -webkit-satıcı önekleri eklenmiş olarak Chrome'da çalışması için).


Sadece gerekçemde çok kıskandığımı fark ettim. İlk iki paragrafta son satırda fazladan boşluk olması gerekmez.
Justin,

1
Ayrıca, bunu bilmiyorum; tarama sadece yukarı değil, sola doğru kayar. Bunu kabul etmiyorum. Kesiklik: tamam, ama kayar sadece yukarı değil: tamam değil.
Justin,

3
Senin için çok mu hafif? Bu bana çok açık. Muhtemelen, Chrome'da daha belirgindir. Benim için en soldaki kenar aynı küçüklükte kalıyor, hatta çok küçük bir metin bile olsa, en sağdaki kısım sola doğru çok belirgin bir şekilde hareket ediyor. Bu durumda, onunla iyiyim. Gerçekten neye benzediğini merak ediyorum ....
Justin,

1
Firefox'ta çalışması mı gerekiyor?
Pierre Arlaud

1
Firefox'ta çalışması için bir şansın var mı?
Rooby

37

HTML / CSS, 1047

-webkitÖnekleri vs. silerek bunu daha çok golf oynayabilirim , ancak bu şu an için geçerli olacak:

<html><head><style>body{font-family:sans-serif;background:#000;margin:0
auto;height:400px;width:800px;text-align:justify;position:relative;perspective:
150px;-webkit-perspective:150px;}div{font-size:63px;line-height:63px;color:#ee6;
position:absolute;-webkit-transform:rotateX(70deg);transform:rotateX(70deg);}p{
position:relative;-webkit-animation:s 90s linear forwards;animation:s 90s linear
forwards;}@-webkit-keyframes s{from{top:800px;}to{top:-2000px;}}@keyframes
s{from{top:800px;}to{top:-2000px;}}</style><body><div><p>It is a period of civil
war. Rebel spaceships, striking from a hidden base, have won their first victory
against the evil Galactic Empire.</p><p>During the battle, Rebel spies managed to
steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored
space station with enough power to destroy an entire planet.</p><p>Pursued by
the Empire's sinister agents, Princess Leia races home aboard her starship,
custodian of the stolen plans that can save her people and restore freedom to
the galaxy...</p></div>

Canlı demo


1
Bu, "ancak fazladan boşlukları kaldırabilirsin (yeni satırları değil) " kuralı ihlal etmiyor mu?
Doorknob

2
@PaulDraper benim için çalışıyor (Chrome'da)
Martin Ender

1
@ m.buettner, garip. Ubuntu 12.04'te Chrome 34 . Belki de bu yüzden bir Chrome hatası vereceğim ...
Paul Draper

6
Emin değilim neden ama çalışmıyor FireFox 29.0 üzerinde Ubuntu 13.10 . @ PaulDraper'ın sorunu ile ilgili değil (sadece ekranın ortasında bazı zamanlar titrek ve ince sarı çizgi ile tamamen siyah bir ekran görüyorum)
IQAndreas

1
-1 geçerli bir HTML dosyası değil. Bunu yalnızca belirli bir tarayıcı sürümüyle çalışmasını sağlamak istiyorsanız, tarayıcının adını ve sürümünü dil belirtiminde eklemelisiniz.
Bakuriu

20

HTML + CSS + SVG 1614 1625

Ben de görsel olarak doğru olmak istedim. Maskeleme ve animasyon için kullanılan SVG. Dönüşümler için kullanılan HTML + CSS. Metnin tam olarak 1/3 boyutuna gelip gelmediğini kontrol etmedim.

-webkit-Önek nedeniyle Chrome'da önerilen görüntüleme . Çalışmak için CSS 3D dönüşümleri gerektirir; chrome://flags'Yazılım oluşturma listesini geçersiz kıl' listesini açmanız ve seçmeniz gerekebilir .

Bayt sayısında yeni satırlar ve boşluklar bulunur.

Güncelleme 1: Firefox ve önek gerektirmeyen diğer tarayıcılar için destek ekleme. Daha fazla temizlikten sonra bile 11 bayt eklendi. Temizleme mümkündü, çünkü tarayıcılar SVG'yi XML-sıkıştırıcı ayrıştırıcıların aksine HTML-kırıcı ayrıştırıcılar kullanarak yorumluyorlardı.

Canlı

<div id=a>                                                                      
<div id=b>                                                                      
<svg width=760 height=1000>                                                     
<g mask=url(#m)>                                                                
<g transform=translate(0,0)>                                                    
<animateTransform attributeName=transform type=translate dur=50 fill=freeze from=0,700 to=0,-450 />
<foreignObject width=760 height=800>                                            
<div style=width:740; >                                                         
<p>It is a period of civil war. Rebel                                           
spaceships, striking from a hidden                                              
base, have won their first victory                                              
against the evil Galactic Empire.</p>                                           
<p>During the battle, Rebel spies managed                                       
to steal secret plans to the Empire's                                           
ultimate weapon, the DEATH STAR, an                                             
armored space station with enough                                               
power to destroy an entire planet.</p>                                          
</div>                                                                          
<p>Pursued by the Empire's sinister agents,                                     
Princess Leia races home aboard her                                             
starship, custodian of the stolen plans                                         
that can save her people and restore                                            
freedom to the galaxy...</p>                                                    
</foreignObject>                                                                
</g>                                                                            
</g>                                                                            
<defs>                                                                          
<linearGradient id=g x1=0 y1=0% x2=0 y2=100%>                                   
<stop offset=0% />                                                              
<stop offset=25% />                                                             
<stop offset=35% stop-color=#fff />                                             
<stop offset=100% stop-color=#fff />                                            
</linearGradient>                                                               
<mask id=m>                                                                     
<rect width=100% height=100% fill=url(#g) />                                    
</mask>                                                                         
</defs>                                                                         
</svg>                                                                          
</div>                                                                          
</div>                                                                          
<style>                                                                         
body {                                                                          
margin: 0;                                                                      
width: 100%; height: 100%;                                                      
perspective: 700px;                                                             
-webkit-perspective: 700px;                                                     
background: url(http://vucica.net/s.php);                                       
}                                                                               
#a {                                                                            
position: absolute;                                                             
width: 100%;                                                                    
height: 700px;                                                                  
bottom: 0;                                                                      
transform-style: preserve-3d;                                                   
}                                                                               
#b {                                                                            
margin: auto auto auto auto;                                                    
width: 760px; height: 100%;                                                     
font-family: Courier; font-weight: bold; text-align: justify; font-size: 24pt;  
color: yellow;                                                                  
overflow: hidden;                                                               
transform: rotateX(45deg);                                                      
-webkit-transform: rotateX(45deg);                                              
}                                                                               
svg {                                                                           
position: absolute;                                                             
width: 760px;                                                                   
height: 100%;                                                                   
}                                                                               

1
Firefox'ta çalışması için bir şansın var mı?
Rooby

/ -Webkit / -moz / 'in yapacağı gibi (ve birkaç karakter daha!) Diyebilirim ama bakacağım.
Ivan Vučica

Bitti. (Ve ben özellikle Yıldız Savaşları'nın büyük bir hayranı değilim ...)
Ivan Vučica

4

PerlMagick, 661 program + 547 metin dosyası = 1208

Yıldönümü için çok geç, ama OP 'animasyonlu GIF' dedi, yani ...

TL; DR: animasyonlu GIF'e bağlantı (5 Mb, 480 * 240, 1360 kare) (bu bağlantıyı şimdi her denediğimde yanlış bir başlangıç ​​var - bu dosyada değil, belki önce indirmeyi deneyin. ... belki daha sonra açıklayacağım, - bir parça kek değil, tüm IM ve GIF fikri;)).

Okunabilirlik için yeni satırlara ve girintiye sahip:

use Image::Magick;
$i=Image::Magick->new(
    depth=>8,
    page=>'480x440+20+0',
    background=>'#000',
    fill=>'#ff0',
    font=>'UbuntuMono-R.ttf',
    pointsize=>22
);
$i->Read('text:-');
$j=$i->Clone;
$i->Extent(y=>-440);
for(1..680){
    ($i->[2*$_]=$j->Clone)->Extent(y=>$_-440);
    ($i->[2*$_-1]=$i->[2*$_]->Clone)
        ->Composite(image=>$i->[2*$_-2],compose=>'Blend',blend=>50)
}
$i->Distort(method=>'Perspective','virtual-pixel'=>'Background',
    points=>[0,0,180,180,480,0,300,180,0,420,0,420,480,420,480,420]);
$i->Extent(geometry=>'480x240+0+200');
$g=Image::Magick->new(size=>'480x150');
$g->Read('gradient:#000-#fff');
$i->Composite(image=>$g,compose=>'Multiply');
$i->Set(delay=>10,loop=>0);
$i->Animate()

STDIN'den metin okur, ancak geometri kodlanmıştır, bu nedenle muhtemelen başka herhangi bir metin iyi bir fikir olmaz. Daha kısa olabilir, ancak metne en üste geldiğinde solma ekledim ve tek bir pikselle yukarı doğru hareket etmek dalgalı bir animasyonla sonuçlandı, bu yüzden bazı enterpolasyonlar yaptım. 2,2 Gb RAM tüketir ve 8 yo masaüstünde 2-3 dakika sürer (ve muhtemelen Windows millet için işe yaramaz), işte GIF nasıl elde edilir: son satırı değiştir (veya ekle) (işte 200 + Mb dosya):

$i->Write('out.miff')

Ve sonra koş

convert -size 8x1 gradient:black-yellow palette8.png
convert +dither out.miff -remap palette8.png out+.gif
convert +dither out+.gif -layers optimize out++.gif

Kalite (palet boyutu vb.) Ve nihai GIF boyutu arasındaki değişimler açıktır. $i->RemapPerlMagick'ten doğrudan arama yapmak işe yaramıyor, muhtemelen bir hata var, (sanırım) +remapönce denemesi saatler sürüyor . Aslında, küresel palet olmadan makul (sadece biraz daha büyük) GIF boyutuna ulaşılabilir, ancak $i->Quantizebu, her bir çerçeve yerel paletini gereken boyuta indirgeyen bir kullanımla elde edilebilir . Oh, ve herhangi bir palet optimizasyonu olmadan yani GIF'i yukarıdaki betişten kaydetmek 'olduğu gibi' yaklaşık 9 Mb GIF dosyası üretir.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.