HTML + CSS + JS एनिमेशन - जापानी निसान नोट प्रोमोशनल साइट

आपने निसान नोट प्रोमो साइट को पहले ही देखा होगा, लेकिन मेरी राय में वेब डिजाइनरों के लिए इस पर ध्यान देने लायक है।

बहुत सरल, लेकिन सुरुचिपूर्ण और मूल चाल: चित्रों के साथ एक बड़ी शीट एक एनिमेटेड प्रस्तुति में बदल जाती है जब आप जल्दी से पृष्ठ के माध्यम से स्क्रॉल करते हैं।

मोबाइल इंटरनेट पर लिंक न खोलें! पृष्ठ का आकार 20 एमबी से अधिक है।
प्रचार वेबसाइट निसान नोट

प्रभाव उत्कृष्ट है - आगंतुकों को निश्चित रूप से साइट पसंद आएगी, खासकर जापानी नेटवर्क की गुणवत्ता के साथ।

कुछ तकनीकी आँकड़े

Google Chrome की जानकारी के अनुसार:

• अनुरोधों की कुल संख्या: 289;
• आकार: 25.98 एमबी;
• मेरे लैपटॉप पर लोडिंग समय: 1.3 मिनट;
• "उपयोगी" चित्रों की संख्या: 46 (मैंने बहुत गिना);

कार्य सिद्धांत

हमारे पास 100% ऊंचाई और पूर्ण स्थिति के साथ एक div (#container) है, एक निश्चित चौड़ाई के साथ एक div (#frames) इसमें अंतर्निहित है। बदले में, # वर्क में डिस्प्ले के साथ "स्किट" के साथ divs होते हैं: छिपी हुई संपत्ति।

प्रत्येक दृश्य में बैकग्राउंड फोटो (s) (.frameBG) और कई फिक्स्ड-हाइट डिव () एक विशेष फोटो के पूरे क्षेत्र को कवर करता है। कवरिंग डिव की ऊँचाई हमेशा छवि की ऊँचाई का एक गुणक होती है।
स्क्रॉल करने के दौरान, #container की शीर्ष संपत्ति बदल जाती है। नीचे स्क्रॉल करते समय, #container ऊपर जाता है।

जैसा कि आप स्क्रॉल करते हैं, "स्केच" के साथ divs के दृश्य भाग को डिस्प्ले मिलता है: ब्लॉक, बाकी कोई भी छिपा हुआ नहीं मिलता है;
किसी विशेष दृश्य के लिए प्रदर्शन संपत्ति के मूल्य को निर्धारित करने की आवश्यकता के कारण फोटोग्राफ-कवरिंग डिव की उपस्थिति ठीक है। लेकिन यह तंत्र कैसे काम करता है, अंत तक मुझे अभी भी समझ में नहीं आया है।

किसी भी मामले में, यह तकनीक मेरे लिए बहुत उत्सुक थी और अगर समय है, तो आप इस विषय पर बदलाव ला सकते हैं।