एनिमेटेड css3 टैग क्लाउड

मेरा आधा लाइवजर्नल में एक एनिमेटेड टैग क्लाउड चाहता था। ऐसा लगता है कि नेटवर्क इस विषय पर विविधताओं से भरा है: कताई, इंटरैक्टिव, कोई भी चुनें। लेकिन यह सारा धन या तो जावास्क्रिप्ट या फ्लैश में है। और आप इसे पत्रिका में नहीं भेज सकते हैं (मानक खाता, भुगतान नहीं किए गए लोगों के बारे में)।

हमें शुद्ध css3 में लिखे एक घूर्णन टैग क्लाउड की आवश्यकता थी। मैं तुरंत आरक्षण कर दूंगा, मैं केवल समस्या को आंशिक रूप से हल करने में कामयाब रहा। कुछ बेहतर खोजने के प्रयास असफल रहे, एक समय में हैबे पर एक प्रश्न भी प्रकाशित किया।


वास्तव में, यहाँ मुझे क्या मिला है:
github.com/paratrooper5730/css3AnimatedTagcloud (कोड)
3611.livejournal.com (एक उदाहरण के साथ पत्रिका)।

एक एनीमेशन बनाने के लिए, @keyframes नियम बनाया गया है, जो प्रारंभिक, अंतिम और, वैकल्पिक रूप से, ऑब्जेक्ट के मध्यवर्ती गुणों को इंगित करता है। और ऑब्जेक्ट के लिए ही, गुण एनीमेशन-नाम, एनीमेशन-अवधि, एनीमेशन-टाइमिंग-फ़ंक्शन, एनीमेशन-देरी, एनीमेशन-पुनरावृत्ति-गणना, एनीमेशन-दिशा निर्दिष्ट हैं। इस प्रकार, यह निर्धारित किया जाता है कि वस्तु के साथ क्या परिवर्तन होते हैं, किस गति और किस दिशा में होते हैं। इस विषय पर कई प्रशिक्षण संसाधन हैं, मैंने w3schools.com का उपयोग किया।

तुरंत उन प्रतिबंधों पर आगे बढ़ें, जिन पर मैंने ठोकर खाई थी।
किसी एकल ऑब्जेक्ट के लिए एनीमेशन-नाम गुण में, आप कई @keyframes निर्दिष्ट कर सकते हैं, लेकिन उन्हें एक साथ निष्पादित किया जाएगा - आप 10 सेकंड की अवधि के साथ एक परिवर्तन को लूप नहीं कर सकते हैं और साथ ही 5 की अवधि के साथ एक और।
एनिमेशन-टाइमिंग-फंक्शन फीचर्स बहुत सीमित हैं। सैद्धांतिक रूप से, आप @keyframes में बड़ी संख्या में मध्यवर्ती राज्यों का उपयोग करके वस्तुओं के किसी भी व्यवहार को पंजीकृत कर सकते हैं। लेकिन व्यवहार में, एनीमेशन सादा था, झटके के साथ।

मुझे अपने कार्य को सरल बनाना था: बादल का "दूर" भाग दिखाई नहीं देता है, तत्व बिना किसी अस्तित्व के दिखाई देते हैं, और वहां भी जाते हैं।

इसके लिए, मैं 2 रूपांतरणों का उपयोग करता हूं।
यह आंदोलन के लिए ऊपर से नीचे तक जिम्मेदार है:
@keyframes tagmove{
from { top:-80px; }
to { top:80px; }
}


और यहाँ यह है - पृष्ठभूमि से आगे और पीछे के लिए "बाहर चल" टैग के लिए
@keyframes coloring {

from { opacity: 0; }
50% { opacity: 1; }
to { opacity: 0; }
}


बादल को और भी सुंदर बनाने के लिए, आपको विभिन्न तत्वों के लिए एनीमेशन-अवधि और एनीमेशन-देरी के मापदंडों को समायोजित करने की आवश्यकता हो सकती है। जो मान लिखे गए हैं वे मानव निर्मित यादृच्छिक हैं। आप भ्रमित भी हो सकते हैं और पूर्ण स्थिति का उपयोग कर सकते हैं, जो मैंने नहीं किया। क्लाउड में टैग का प्रारंभिक स्थान वांछित छद्म आयामी क्षैतिज और लंबवत बिखराव देता है।

शायद यही सब है। मुझे बेहतर करने के लिए सलाह देने में खुशी होगी