यहां तक कि अच्छी प्रस्तुतियाँ, जिनमें आठवीं पिन वाली बीस-बिंदु सूची शामिल नहीं है और "मीटिंग और पार्टनरशिप" या "ऑफिस लाइफ" के नि: शुल्क संग्रह से चित्रों के एक गैग रिफ्लेक्स का कारण बनता है "क्लिपआर्ट" लंबे समय से स्थापित मानक का पालन करते हैं, जो बिना बदलाव के पुराने स्लाइड प्रोजेक्टर की दुनिया से कार्यालय सुइट्स में स्थानांतरित किया गया था। प्रस्तुति हमेशा एक ही प्रारूप और आकार के आयताकार चित्रों का एक सेट है। कभी-कभी, उनके बीच संक्रमण और एनिमेशन जोड़ दिए जाते हैं, बहु-रंगीन शिलालेखों से कम नहीं परेशान करते हैं और निरर्थक अमूर्त कार्यालय कर्मियों को मुस्कुराते हैं। एक अच्छी प्रस्तुति के लिए वास्तविक मानक लंबे समय से झिलमिलाहट के बिना स्थिर स्लाइड का एक क्रम रहा है, जिसमें बड़े प्रिंट में बहुत कम पाठ और कुछ ध्यान से चयनित तस्वीरें या स्क्रीनशॉट हैं।
CSS3 के परिवर्तनों और बदलावों के आधार पर, प्रस्तुतियाँ बनाने के लिए
इंप्रेशन.जेएस जावास्क्रिप्ट फ्रेमवर्क "स्लाइड" की अवधारणा से परे जाता है और आपको एक खुले, असीमित तीन-आयामी स्थान में प्रस्तुतियों का निर्माण करने की अनुमति देता है। उनके लिए प्रेरणा का स्रोत सेवा
prezi.com था । Github पर इंप्रेशन.जेएस भंडार एक महीने पहले से कम दिखाई दिया, लेकिन पहले से ही सबसे लोकप्रिय में से एक बन गया है। अधीर व्यक्ति
यहां एक छोटा डेमो देख सकते
हैं , और बाकी अभी एक असामान्य प्रस्तुति का एक उदाहरण बना सकते हैं।
Impress.js वर्तमान में केवल क्रोम और सफारी के नवीनतम डेस्कटॉप संस्करणों का समर्थन करता है, अन्य ब्राउज़रों के साथ - जैसा कि किस्मत में होगा। चलिए एक नया पेज बनाते हैं और इसमें इंप्रेशन.जेएस स्क्रिप्ट को कनेक्ट करते हैं, इसे थोड़ा सा ट्रिम करते हैं और इसे शैलियों के साथ रंगते हैं और
id=”impress" साथ एक डिव रैपर जोड़ते हैं
id=”impress" विशेषता, जिसके अंदर हमारी प्रस्तुति होगी:
<!doctype html> <html> <head> <title>Impress.js</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> body { background-color: #ed7; color: #400; font-size: 2em; } .step { width: 1000px; } img { margin-left: 450px; } .no-support-message { display: none; } .impress-not-supported .no-support-message { display: block; color: red; font-size: 2em; } </style> </head> <body> <div id="impress"> <div class="no-support-message"> ! Impress.js Chrome Safari. </div> </div> <script type="text/javascript" src="js/impress.js"></script> </body> </html>
प्रत्येक स्लाइड, या बल्कि, एक एनीमेशन कदम, फॉर्म के एक ब्लॉक द्वारा प्रतिनिधित्व किया जाता है
<div class=”step” … > , जिसमें आप उन विशेषताओं को जोड़ सकते हैं जो स्थिति और पैमाने को निर्दिष्ट करते हैं। आप अंतरिक्ष बार या तीर का उपयोग करके स्लाइड के बीच स्विच कर सकते हैं। ढांचा अभी भी एक महीने से कम पुराना है, इसलिए उपलब्ध विशेषताओं का सेट अभी भी बहुत सीमित है:
- डेटा-x
- डेटा-y
- डेटा-z
- डेटा घुमाने-x
- डेटा घुमाने-y
- डेटा-रोटेट-जेड (या सिर्फ डेटा-रोटेट)
- डेटा पैमाने पर
तो, पहला कदम। सभी विशेषताएँ डिफ़ॉल्ट रूप से शून्य हैं:
<div class="step"> <h1> - :</h1> <div class="step"> </div>
दूसरा कदम। 1000 पिक्सेल को दाईं और नीचे ले जाएँ:
<div class="step" data-x="1000" data-y="1000"> <h1> - :</h1> <div class="step" data-x="1000" data-y="1000"> </div>
तीसरा कदम। हम पैमाने बदलना शुरू करते हैं:
<div class="step" data-x="3000" data-y="-1000" data-scale="4"> <h1> - :</h1> <div class="step" data-x="3000" data-y="-1000" data-scale="4"> </div>
चौथा चरण। हम एक आधा बैरल बनाते हैं:
<div class="step" data-x="-6100" data-y="-3800" data-rotate="180" data-scale="40"> <h1> - :</h1> <div class="step" data-x="-1700" data-y="-3000" data-rotate="180" data-scale="40"> </div>
पांचवां चरण। 3D CSS रूपांतरण:
<div class="step" data-x="8000" data-y="-8100" data-rotate-x="30" data-rotate-z="-29"> <h1> - 3D:</h1> <div class="step" data-x="8000" data-y="-8100" data-rotate-x="30" data-rotate-z="-29"> </div>
छठा चरण। मुख्य बात विवरण में है:
<div class="step" data-x="7963.7" data-y="-8106.3" data-scale="0.04"> <img src="img/small_nuance.png"> </div>
वह सब है। Github पर आने वाले उत्साह.जेएस को देखते हुए, कोई भी इसके तेजी से विकास की उम्मीद कर सकता है। प्रस्तुतियों को बनाने के लिए स्पष्ट आवेदन के अलावा, एक निश्चित आकार के फ्लैट पेज के बजाय असीमित तीन आयामी स्थान में सामग्री रखने की अवधारणा अच्छी तरह से मल्टीटच के साथ गोलियों में आवेदन पा सकती है, क्योंकि वे स्वाभाविक रूप से और आसानी से सभी दिशाओं में ज़ूमिंग और स्क्रॉलिंग का समर्थन करते हैं।
जेफ रस्किन ने सपना देखा कि
स्केलेबल इंटरफ़ेस को याद करता है।
UPD: टिप्पणियों में, smashercosmo
habraiser ने सुझाव दिया कि सामान्य रूप से वेब डिज़ाइन में क्रॉस-ब्राउज़र समर्थन और उपयोग पर जोर देने के साथ पहले से ही एक
jQuery पोर्ट है , और न केवल प्रस्तुतियों के लिए।