30 2009 मार्च
कैसे एक सुंदर पोर्टफोलियो गैलरी चेतन jQuery के का उपयोग करने के लिए!
द्वारा प्रकाशित किया गया था: महबूब: विविध
अपनी वेबसाइट पर फ्लैश के साथ एक पोर्टफोलियो पृष्ठ करना अप्रचलित की तरह बन गया है. तेज़ मशीनों और नई पीढ़ी के ब्राउज़र के साथ इन दिनों वास्तव में जावास्क्रिप्ट और सीएसएस के साथ कुछ गधा किक कर सकते हैं. JQuery के कुछ प्रभाव से निपटने के लिए बहुत साफ रास्ता है. सभी एनिमेशन आधार "चेतन" नामक विधि से स्टेम. यह उत्साहित, डोम तत्वों का गुण tweens. लंबी कहानी कम इस पर एक नज़र रखना.
तो, तुम पहले से ही क्लिक किया है और सही देखा है? ठीक है, अगर आप कोड को देखो, यह काफी सरल है.
$ (दस्तावेज़) तैयार है. (Function () { var hover_in_easing = "easeOutExpo"; var hover_out_easing = "easeOutBounce"; . $ (". Info_container") (दिखाने); हॉवर $ ("div.portfolio_div"). (Function () { $ (यह) (". Info_container) चेतन (की {शीर्ष: 0px"}, {अवधि: 400, सहजता: hover_in_easing}); } Function () { $ (यह) (". Info_container) चेतन (की {शीर्ष:" 100px "}, {अवधि: 500, सहजता: hover_out_easing}); }); / / 100 पिक्सल नकाब के आकार है });
यह चेतन समारोह का उपयोग करता छवि रखा है जो अपेक्षाकृत स्थिति से छिपा मुखौटा चेतन. और प्लगइन सहजता के साथ, हम उछल जब आप छवि से बाहर मंडराना के कुछ शांत प्रभाव प्राप्त करने के लिए. आप किसी भी html info_container DIV तत्व के अंदर डाल के रूप में लंबे समय के रूप में यह सीमाओं से परे नहीं जा सकता है. स्टाइलशीट को देखो और आप यह बहुत gramatical से मिल जाएगा. आप div वर्गों को संशोधित करने के द्वारा आकार को अनुकूलित कर सकते हैं.
प्रेरणा: http://dibusoft.com/portfolio
हाल की टिप्पणियाँ