काश चौथा आप के साथ रहे!


24

स्टार वार्स दिवस के सम्मान में , निम्नलिखित पाठ प्रदर्शित करने के लिए एक कार्यक्रम लिखें, स्टार वार्स खोलने वाले क्रॉल की तरह स्क्रॉल करें :

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...

आप एक एनिमेटेड GIF का उत्पादन कर सकते हैं या अपने कार्यक्रम को प्रदर्शित कर सकते हैं। आउटपुट को निम्न दिखाना चाहिए:

  • पाठ को छवि / प्रदर्शन के नीचे से शुरू होना चाहिए
  • इसे ऊपर तक पहुंचने तक स्क्रॉल करना होगा। 30शीर्ष पर पहुंचने के लिए पाठ के टुकड़े के लिए कम से कम सेकंड लेना चाहिए । जब तक सभी पाठ शीर्ष पर नहीं पहुंच जाते, तब तक एनीमेशन जारी रहना चाहिए।
  • इस दूरी में, पाठ तब तक छोटा होना चाहिए जब तक वह 1/3आकार (लंबाई और फ़ॉन्ट) से कम न हो जाए
  • इस एंगल को फॉलो करने के लिए टेक्स्ट को स्लाइन किया जाना चाहिए।
  • पाठ को बाएँ और दाएँ उचित होना चाहिए। दिए गए पाठ को पहले से ही मोनोस्पेस किए गए फोंट के लिए उचित ठहराया गया है, हालांकि, आप अतिरिक्त रिक्त स्थान (नईलाइन्स नहीं) को हटा सकते हैं और इसे अपने आप को सही ठहरा सकते हैं।
  • पाठ पीला होना चाहिए
  • बैकग्राउंड काला होना चाहिए

यह वीडियो शुरुआती क्रॉल दिखाता है।

गुड लक, और चौथा आपके साथ हो सकता है !


5
क्या "आगे तुम्हारे साथ हो सकता है"?
TheDoctor

@ TheDoctor यही है, लेकिन मैंने टाइपो को ठीक कर दिया था। आप गंभीरता से सोचते हैं कि मुझे दोहरे दंड के लिए जाना चाहिए?
जस्टिन

3
फोर्थ में ऐसा करना मुश्किल होगा।
TheDoctor

4
@ Theoctor "फोर्थ में करने के लिए, यह मुश्किल होगा" - Yoda'd कि आप के लिए।
माइकइलियार

इस सवाल के बारे में एक मजेदार बात: पोस्ट करने से पहले, सिस्टम ने मुझे चेतावनी दी कि यह "बहुत व्यक्तिपरक" के रूप में बंद हो सकता है।
जस्टिन

जवाबों:


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>

तड़का हुआ (पढ़ें: अत्यंत तड़का हुआ: पी)।

यहां JSFiddle ( -webkit-विक्रेता उपसर्ग के साथ क्रोम में काम करता है)।


मुझे बस एहसास हुआ कि मैं अपने औचित्य पर भारी था। पहले दो पैराग्राफ को अंतिम पंक्ति पर अतिरिक्त स्थान की आवश्यकता नहीं है।
जस्टिन

1
इसके अलावा, मैं इस बारे में नहीं जानता; क्रॉल स्लाइड बाईं ओर है, न कि केवल ऊपर। मुझे यह स्वीकार नहीं है। तड़प: ठीक है, लेकिन फिसलने नहीं बस ऊपर: ठीक नहीं है।
जस्टिन

3
यह आपके लिए इतना मामूली है? यह मेरे लिए बहुत स्पष्ट है। संभवतः, यह क्रोम में अधिक दिखाई देता है। मेरे लिए, सबसे छोटा किनारा समान बाएँ-नेस पर रहता है, यहां तक ​​कि बहुत छोटे पाठ के साथ भी, इसलिए दाईं ओर बाईं ओर बहुत अधिक चलता है। उस मामले में, मैं इसके साथ ठीक हूं। मुझे आश्चर्य है कि यह वास्तव में कैसा दिखता है ....
जस्टिन

1
यह फ़ायरफ़ॉक्स पर काम करने वाला है?
पियरे अरलाउड

1
किसी भी मौका आप इसे फ़ायरफ़ॉक्स में काम करने के लिए प्राप्त कर सकते हैं?
रॉबी

37

HTML / CSS, 1047

मैं -webkitउपसर्ग आदि को हटाकर इसे बहुत अधिक गोल्फ कर सकता हूं , लेकिन यह इस समय के लिए करेगा:

<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>

लाइव डेमो


1
क्या यह नियम को नहीं तोड़ता "हालांकि, आप अतिरिक्त रिक्त स्थान ( न्यूलाइंस नहीं) " @Quincunx को निकाल सकते हैं?
दरवाज़े

2
@PaulDraper मेरे लिए काम करता है (क्रोम में)
मार्टिन

1
@ m.buettner, अजीब। उबंटू 12.04 पर क्रोम 34 । शायद मैं इस वजह से क्रोम बग फाइल करूंगा ...
पॉल ड्रेपर

6
यकीन नहीं क्यों, लेकिन यह Ubuntu 13.10 पर FireFox 29.0 में काम नहीं करता है । @ पॉलड्रैपर की समस्या से संबंधित नहीं (मैं पूरी तरह से काली स्क्रीन देख रहा हूं, स्क्रीन के बीच में कभी-कभार चमकती और पतली पीली लकीर के साथ)
IQAndreas

1
-1 जो ​​मान्य HTML फ़ाइल नहीं है। यदि आप उद्देश्यपूर्ण रूप से केवल एक विशिष्ट ब्राउज़र संस्करण के साथ काम करना चाहते हैं तो आपको भाषा विनिर्देश में ब्राउज़र का नाम और संस्करण शामिल करना चाहिए।
बाकुरी

20

HTML + CSS + SVG 1614 1625

मैं नेत्रहीन भी सही होना चाहता था। एसवीजी मास्किंग और एनीमेशन के लिए उपयोग किया जाता है। HTML + CSS का उपयोग रूपांतरों के लिए किया जाता है। अगर पाठ ठीक 1/3 आकार का हो जाता है तो मैंने जाँच नहीं की।

-webkit-उपसर्ग के कारण Chrome में देखने की अनुशंसा की गई है । काम करने के लिए CSS 3D परिवर्तनों की आवश्यकता है; आपको chrome://flags'ओवरराइड सॉफ़्टवेयर रेंडरिंग सूची' खोलने और लेने की आवश्यकता हो सकती है ।

Bytecount में शामिल newlines और blanks हैं।

अद्यतन 1: फ़ायरफ़ॉक्स और अन्य ब्राउज़रों के लिए समर्थन जोड़ना जो उपसर्गों की आवश्यकता नहीं है। आगे की सफाई के बाद भी 11 बाइट्स जोड़े गए। क्लीनअप संभव था क्योंकि ब्राउज़र सौभाग्य से एसवीजी को HTML- क्रंचिंग पार्सर का उपयोग करके एक्सएमएल-कंपाइलेंट पार्सर के विपरीत व्याख्या करते हैं।

जीना

<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
किसी भी मौका आप इसे फ़ायरफ़ॉक्स में काम करने के लिए प्राप्त कर सकते हैं?
रॉबी

मैं / -webkit / -moz के रूप में अनुमान लगाऊंगा (और कुछ और पात्रों को शेव करूंगा!), लेकिन मैं देखूंगा।
इवान वूइका

किया हुआ। (और मैं स्टार वार्स का बहुत बड़ा प्रशंसक भी नहीं हूं ...)
इवान वुइका

4

पर्लमैजिक, 661 प्रोग्राम + 547 टेक्स्ट फाइल = 1208

सालगिरह के लिए बहुत देर हो गई, लेकिन ओपी ने कहा 'एनिमेटेड जीआईएफ', इसलिए ...

TL; DR: एनिमेटेड GIF (5 एमबी, 480 * 240, 1360 फ्रेम) की एक कड़ी (हर बार जब मैं इस लिंक को आज़माता हूं तो एक झूठी शुरुआत होती है - यह फ़ाइल में नहीं है, हो सकता है कि पहले इसे डाउनलोड करने की कोशिश करें। और कुछ मामूली झिलमिलाहट। ... शायद मैं इसे बाद में समझाऊंगा, - केक का एक टुकड़ा नहीं, पूरे आईएम और जीआईएफ विचार;))।

पठनीयता के लिए नई सूचियों और मांगपत्र के साथ:

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()

यह एसटीडीआईएन से पाठ पढ़ता है, लेकिन ज्यामिति कठिन-कोडित है, इसलिए शायद कोई भी अन्य पाठ एक अच्छा विचार नहीं होगा। यह कम हो सकता है, लेकिन मैंने पाठ को लुप्त होती जोड़ दिया क्योंकि यह शीर्ष पर पहुंच जाता है, और, एकल पिक्सेल द्वारा ऊपर जाने से एक तड़का हुआ एनीमेशन होता है, इसलिए मैंने कुछ प्रक्षेप किया। यह 2.2 gb की रैम खाता है और 8 yo डेस्कटॉप पर 2-3 मिनट का समय लेता है (और शायद विंडोज वालों के लिए काम नहीं करेगा), इसलिए यहाँ GIF प्राप्त करने का तरीका बताया गया है: अंतिम पंक्ति को बदलें (या जोड़ें) (200+ बनाता है) एमबी फ़ाइल):

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

और फिर चला

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

गुणवत्ता (पैलेट आकार आदि) और अंतिम जीआईएफ आकार के बीच व्यापार बंद स्पष्ट हैं। $i->RemapPerlMagick से कॉल करना सीधे काम नहीं करता है, शायद एक बग है, इसमें घंटों का समय लगता है क्योंकि (मुझे लगता है) +remapपहले कोशिश करता है । वास्तव में, उचित (केवल थोड़ा बड़ा) जीआईएफ आकार वैश्विक पैलेट के बिना प्राप्त किया जा सकता है, लेकिन $i->Quantizeजिसके उपयोग से प्रत्येक फ्रेम स्थानीय पैलेट को आवश्यक आकार तक कम कर देता है। ओह, और बिना किसी पैलेट ऑप्टिमाइज़ेशन के यानी कि स्क्रिप्ट को उपरोक्त स्क्रिप्ट से सहेजना 'जैसा कि' लगभग 9 एमबी जीआईएफ फ़ाइल का उत्पादन करता है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.