जेव्हा तुम्ही कर्सर फिरवता तेव्हा घटक पारदर्शक होतो. पारदर्शक पार्श्वभूमी. पार्श्वभूमी म्हणून PNG

अनेक अभ्यागतांना सराव मध्ये Animate.css लायब्ररी कशी वापरायची याबद्दल प्रश्न असतो. प्रत्यक्षात, सर्वकाही अगदी सोप्या पद्धतीने घडते, आपल्याला फक्त एकदाच सर्व टप्प्यांतून जाण्याची आवश्यकता आहे आणि नंतर, सादृश्यतेने, काही क्रिया पुन्हा करा.

1. प्रथम तुम्हाला लायब्ररी डाउनलोड करून कनेक्ट करण्याची आवश्यकता आहे. तीन पर्याय आहेत.

• पूर्ण आवृत्ती. सुमारे 60 kB च्या व्हॉल्यूमसह कोडच्या तीन हजारांहून अधिक ओळींचा समावेश आहे. सर्वसाधारणपणे ॲनिमेशनशी परिचित होण्याच्या पहिल्या टप्प्यावर हे योग्य आहे, कारण ते तुम्हाला हे सर्व कसे कार्य करते हे पाहण्याची परवानगी देते.
• पॅकेज केलेली आवृत्ती (अस्पष्ट, व्यावसायिक दृष्टीने). सीएसएस फाइलमध्ये कोणतेही टॅब, स्पेस किंवा लाइन ब्रेक नाहीत. यामुळे फाईलचा आकार दीडपट कमी झाला असला तरी कोड वाचणे कठीण होते.
• निवडक प्रभाव. बऱ्याच कार्यांसाठी सर्वात योग्य, कारण ते आपल्याला फक्त आपल्या आवडीचे प्रभाव निर्दिष्ट करण्याची परवानगी देते, अनावश्यक काढून टाकते.

2. इच्छित घटकावर ॲनिमेशन प्रभाव लागू करण्यासाठी, त्यात दोन वर्ग जोडा - ॲनिमेटेड आणि प्रभावाच्या नावासह एक वर्ग, उदाहरणार्थ fadeInDown (सर्व प्रभावांची सूची आणि त्यांची नावे पहा). उदाहरणार्थ, आपण पृष्ठावरील सर्व प्रतिमांमध्ये फ्लिकर जोडू इच्छिता असे समजा. HTML मध्ये आम्ही खालील गोष्टी लिहितो:

साइट jQuery वापरत असल्यास, वर्ग जोडणे सोपे केले जाते आणि JavaScript द्वारे केले जाते.

$(दस्तऐवज).तयार(फंक्शन() ( $("img").addClass("ॲनिमेटेड फ्लॅश"); ))

3. पेज लोड झाल्यावर ॲनिमेशन आपोआप चालू होते. हे वापरकर्त्याचे लक्ष वेधण्यासाठी डिझाइन केलेल्या पॉप-अप संदेशांसाठी उपयुक्त आहे (उदाहरण 1).

उदाहरण 1: पॉप-अप संदेश

चेतावणी .चेतावणी (पार्श्वभूमी: #fc0; पॅडिंग: 10px; सीमा: 1px घन #000; ) झेनिथ तास संख्या विषुववृत्त सेक्सटंटचा अंदाज लावते!

माउस कर्सरच्या सहाय्याने घटकावर फिरवताना प्रभाव कार्य करण्यासाठी, तुम्हाला JavaScript वापरावे लागेल. उदाहरण म्हणून, तुम्ही माउस कर्सर फिरवल्यावर हलणाऱ्या चित्रांचा विचार करा. टॅग वर जा ॲनिमेटेड क्लास जोडा आणि jQuery कनेक्ट करा (उदाहरण 2).

उदाहरण 2. गॅलरी

गॅलरी $(document).ready(function() ( $("img.animated").hover(function() ( $(this).addClass("bounce"); // बाउंस क्लास जोडा), फंक्शन() ( $(this).removeClass("bounce"); // वर्ग काढा ))))

IN या उदाहरणातजेव्हा तुम्ही ॲनिमेटेड क्लाससह इमेजवर फिरता, तेव्हा दुसरा बाऊन्स क्लास जोडला जातो; कर्सर काढून टाकल्यास, बाऊन्स क्लास देखील काढला जाईल.

4. शेवटी, तुम्ही ॲनिमेशन गती बदलून आणि CSS द्वारे विलंब वेळ सेट करून तुमच्या आवडीनुसार ॲनिमेशन सानुकूलित करू शकता. दोन्ही पर्यायी आहेत आणि आवश्यक असल्यास वापरले जाऊ शकतात.

ॲनिमेटेड ( -वेबकिट-ॲनिमेशन-कालावधी: .6s; -o-ॲनिमेशन-कालावधी: .6s; -moz-ॲनिमेशन-कालावधी: .6s; ॲनिमेशन-कालावधी: .6s; -webkit-ॲनिमेशन-विलंब: 1s; -o -ॲनिमेशन-विलंब: 1s; -moz-ऍनिमेशन-विलंब: 1s;

CSS3 ॲनिमेशन मोठ्या प्रमाणावर वापरले जाते. CSS ॲनिमेशन म्हणजे काय आणि ते कसे तयार करायचे हे अगदी नवशिक्या वेबसाइट बिल्डर्सनाही समजण्याची वेळ आली आहे. तुम्हाला वाटेल की CSS3 ॲनिमेशन हे ब्लॉक्स हलवण्याबद्दल आहे आणि ते कार्टूनसारखे दिसते. परंतु CSS ॲनिमेशन हे केवळ घटक एका बिंदूपासून दुस-या बिंदूकडे हलवण्याबद्दलच नाही तर विकृती आणि इतर परिवर्तनांबद्दल देखील आहे. अगदी नवशिक्यांसाठी हे स्पष्ट करण्यासाठी, मी सर्व काही चरण-दर-चरण लिहिले आहे.

1. CSS3 ॲनिमेशनचे मूलभूत गुणधर्म

एक छोटा सैद्धांतिक ब्लॉक ज्यामधून तुम्हाला समजेल की कोणते CSS3 गुणधर्म ॲनिमेशनसाठी जबाबदार आहेत, तसेच ते कोणती मूल्ये घेऊ शकतात.

• ॲनिमेशन-नाव अद्वितीय नावॲनिमेशन (मुख्य फ्रेम्स, आम्ही त्यांच्याबद्दल थोड्या वेळाने बोलू).
• ॲनिमेशन-कालावधी — सेकंदांमध्ये ॲनिमेशन कालावधी.
• ॲनिमेशन-टाइमिंग-फंक्शन - ॲनिमेशन गती वक्र. पहिल्या दृष्टीक्षेपात ते खूप अस्पष्ट आहे. उदाहरणासह दर्शविणे नेहमीच सोपे असते आणि आपण ते खाली पहाल. घेऊ शकतो खालील मूल्ये: रेखीय | सहज | सहजतेने | सहज बाहेर | क्यूबिक-बेझियर(n,n,n,n) .
• ॲनिमेशन-विलंब - ॲनिमेशन सुरू होण्यापूर्वी काही सेकंदात विलंब.
• ॲनिमेशन-पुनरावृत्ती-गणना — ॲनिमेशन पुनरावृत्तीची संख्या. हे एकतर फक्त संख्या म्हणून निर्दिष्ट केले जाऊ शकते किंवा आपण अनंत निर्दिष्ट करू शकता आणि ॲनिमेशन अविरतपणे चालेल.

येथे फक्त मूलभूत गुणधर्म आहेत, जे तुमचे पहिले CSS3 ॲनिमेशन तयार करण्यासाठी पुरेसे आहेत.

शेवटची गोष्ट जी आपल्याला सिद्धांतातून जाणून घेणे आणि समजून घेणे आवश्यक आहे ती म्हणजे की फ्रेम्स कशी तयार करायची. हे करणे देखील सोपे आहे आणि @keyframes नियम वापरून केले जाते, ज्यामध्ये की फ्रेम्स निर्दिष्ट केल्या आहेत. या नियमासाठी वाक्यरचना खालीलप्रमाणे आहे:

वर आम्ही पहिली आणि शेवटची फ्रेम सेट करतो. सर्व मध्यवर्ती राज्यांची गणना स्वयंचलितपणे केली जाईल!

2. CSS3 ॲनिमेशनचे वास्तविक उदाहरण

सिद्धांत, नेहमीप्रमाणे, कंटाळवाणा आहे आणि नेहमी स्पष्ट नाही. सर्व काही पाहणे खूप सोपे आहे वास्तविक उदाहरण, परंतु काही चाचणी HTML पृष्ठावर ते स्वतः करणे सर्वोत्तम आहे.

प्रोग्रामिंग भाषा शिकताना, तुम्ही सहसा “हॅलो, वर्ल्ड!” प्रोग्राम लिहा, ज्यावरून तुम्ही या भाषेचे वाक्यरचना आणि इतर काही मूलभूत गोष्टी समजू शकता. परंतु आम्ही प्रोग्रामिंग भाषेचा अभ्यास करत नाही, तर वर्णन भाषेचा अभ्यास करत आहोत देखावादस्तऐवज. म्हणून, आपले स्वतःचे "हॅलो, जग!"

उदाहरण म्हणून आपण काय करू ते येथे आहे: सुरुवातीला 800px रुंदीचा काही ब्लॉक घेऊ आणि 5 सेकंदात तो 100px पर्यंत कमी केला जाईल.

असे दिसते की सर्व काही स्पष्ट आहे - आपल्याला फक्त ब्लॉक कॉम्प्रेस करण्याची आवश्यकता आहे आणि तेच! प्रत्यक्षात ते कसे दिसते ते पाहूया.

सुरुवातीला HTML मार्कअप. हे अगदी सोपे आहे कारण आम्ही प्रति पृष्ठ फक्त एका घटकासह कार्य करत आहोत.

1

आणि स्टाईल फाइलमध्ये काय आहे ते येथे आहे:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.toSmallWidth ( समास : 20px स्वयं ; /* समास 20px वर आणि खाली आणि मध्य संरेखन*/ पार्श्वभूमी : लाल ; /*ब्लॉकची लाल पार्श्वभूमी*/ उंची : 100px ;/*ब्लॉक उंची 100px*/ रुंदी : 800px ;

/*प्रारंभिक रुंदी 800px*/ -webkit-animation-name : animWidthSitehere;

-वेबकिट-ॲनिमेशन-कालावधी : 5s; /* साठी उपसर्ग असलेली मालमत्ता Chrome ब्राउझर , Safari, Opera */ animation-name : animWidthSitehere;/* मुख्य फ्रेम्सचे नाव सूचित करा (खाली स्थित) */ ॲनिमेशन-कालावधी : 5s; /*ॲनिमेशन कालावधी सेट करा*/ ) /* Chrome, Safari, Opera ब्राउझरसाठी उपसर्ग असलेले कीफ्रेम */ @-webkit-keyframes animWidthSitehere ( ( ( रुंदी : 800px ; ) पासून ( रुंदी : 100px ; ) ) @keyframes animitethrew (रुंदी : 800px; ) /*प्रथम कीफ्रेम, जिथे ब्लॉकची रुंदी 800px*/ ते (रुंदी : 100px; ) /*शेवटची कीफ्रेम आहे, जिथे ब्लॉकची रुंदी 100px*/ )तुम्ही बघू शकता, आम्ही फक्त पहिली आणि शेवटची की फ्रेम निर्दिष्ट केली आहे आणि सर्व इंटरमीडिएट आपोआप "बिल्ट" झाले आहेत.

तुमचे पहिले CSS3 ॲनिमेशन तयार आहे. प्राप्त ज्ञान एकत्रित करण्यासाठी, तयार करा

HTML दस्तऐवज आणि CSS फाइल

, आणि तेथे घाला (a

आपल्या हातांनी चांगले मुद्रित करा) उदाहरणातील कोड. मग तुम्हाला नक्कीच सर्व काही समजेल. नंतर सामग्री सुरक्षित करण्यासाठी ब्लॉकच्या उंचीसह (त्याची उंची कमी झाली पाहिजे) असाच प्रयत्न करा.आणखी चांगले. मुख्य गोष्ट म्हणजे आपण धड्यांमध्ये जे पाहता ते पुनरावृत्ती करण्याचा प्रयत्न करणे. किंवा किमान मालमत्ता मूल्ये बदलण्याचा प्रयत्न करा आणि काय होते ते पहा, मग तुम्हाला CSS ची भीती कमी होईल.

या पाठात आपण खालील CSS गुणधर्म पाहू - अपारदर्शकता आणि RGBA. अस्पष्टता गुणधर्म केवळ घटकांच्या पारदर्शकतेसाठी जबाबदार आहे आणि तुम्ही अल्फा चॅनेल पारदर्शकता मूल्य निर्दिष्ट केल्यास RGBA फंक्शन रंग आणि पारदर्शकतेसाठी जबाबदार आहे.

CSS पारदर्शकताअपारदर्शकता

अस्पष्टतेसाठी डिजिटल मूल्य 0.0 ते 1.0 या श्रेणीमध्ये सेट केले आहे, जेथे शून्य संपूर्ण पारदर्शकता आहे आणि एक, त्याउलट, परिपूर्ण अपारदर्शकता आहे. उदाहरणार्थ, 50% पारदर्शकता पाहण्यासाठी, तुम्हाला मूल्य 0.5 वर सेट करणे आवश्यक आहे. हे लक्षात ठेवले पाहिजे की अपारदर्शकता पालकांच्या सर्व बाल घटकांना लागू होते. याचा अर्थ असा की अर्धपारदर्शक पार्श्वभूमीवरील मजकूर देखील पारदर्शक असेल. आणि हे आधीच खूप आहे लक्षणीय कमतरता, मजकूर देखील बाहेर उभा नाही.

CSS अपारदर्शकता द्वारे पारदर्शकता

स्क्रीनशॉट स्पष्टपणे दर्शवितो की काळा मजकूर निळ्या पार्श्वभूमीप्रमाणे पारदर्शक झाला आहे.

Div (
पार्श्वभूमी: url(images/yourimage.jpg); /* पार्श्वभूमी प्रतिमा */
रुंदी: 750px;
उंची: 100px;
समास: स्वयं;
}
.निळा (
पार्श्वभूमी: #027av4; /* पारदर्शक पार्श्वभूमी रंग */
अस्पष्टता: 0.3; /* पार्श्वभूमी पारदर्शकता मूल्य */
उंची: 70px;
}
h1 (
पॅडिंग: 6px;
फॉन्ट-फॅमिली: एरियल ब्लॅक;
फॉन्ट-वजन: ठळक;
फॉन्ट-आकार: 50px;
}

RGBA फॉरमॅटमध्ये CSS पारदर्शकता

रेकॉर्डिंग स्वरूप RGBA रंग, अधिक आहे आधुनिक पर्यायसाठी अस्पष्टता गुणधर्म. आर (लाल), जी (हिरवा), बी (निळा) - म्हणजे: लाल, हिरवा, निळा. शेवटचे पत्र A - म्हणजे अल्फा चॅनल, जे पारदर्शकता सेट करते. RGBA, अपारदर्शकतेच्या विपरीत, बाल घटकांवर परिणाम करत नाही.

आता RGBA वापरून आमचे उदाहरण पाहू. चला या ओळी शैलींमध्ये बदलूया.

पार्श्वभूमी: ##027av4; /* पार्श्वभूमी रंग */
अस्पष्टता: 0.3; /* पार्श्वभूमी पारदर्शकता मूल्य */

पुढील एका ओळीत

पार्श्वभूमी: rgba(2, 127, 212, 0.3);

तुम्ही बघू शकता, 0.3 चे पारदर्शकता मूल्य दोन्ही पद्धतींसाठी समान आहे.

RGBA उदाहरणाचा परिणाम:

दुसरा स्क्रीनशॉट पहिल्यापेक्षा खूपच चांगला दिसत आहे.

ब्लॉक्सच्या पार्श्वभूमीच्या पारदर्शकतेसह खेळून, आपण साइटवर साध्य करू शकता मनोरंजक प्रभाव. हे अर्धपारदर्शक ब्लॉक्स छायाचित्रासारख्या रंगीबेरंगी डिझाइनच्या वर जाणे महत्त्वाचे आहे. केवळ या प्रकरणात प्रभाव लक्षात येईल. हे तंत्र बर्याच काळापासून डिझाइनमध्ये वापरले गेले आहे, अगदी कोणत्याही CSS3 च्या आगमनापूर्वी, ते पूर्णपणे ग्राफिक्स प्रोग्राममध्ये लागू केले गेले होते.

ग्राहकाला ब्राउझरच्या जुन्या आवृत्त्यांमध्ये लेआउट चांगले दिसण्याची आवश्यकता असल्यास इंटरनेट एक्सप्लोरर, नंतर फिल्टर गुणधर्म जोडा आणि त्यावर टिप्पणी करण्यास विसरू नका जेणेकरून कोडच्या वैधतेला त्रास होणार नाही.

.निळा (
पार्श्वभूमी: rgba(0, 120, 201, 0.3);
फिल्टर: अल्फा(अपारदर्शकता=30); /* IE मध्ये पारदर्शकता */
}

निष्कर्ष

RGBA फॉरमॅट सर्वांद्वारे समर्थित आहे आधुनिक ब्राउझर, साठी इंटरनेटचा अपवाद वगळताएक्सप्लोरर. हे देखील खूप महत्वाचे आहे की आरजीबीए लवचिक आहे, ते केवळ विशिष्ट गोष्टींवर कार्य करते दिलेला घटकत्याच्या सहाय्यकांना प्रभावित न करता. हे स्पष्ट आहे की लेआउट डिझाइनरसाठी हे अधिक सोयीस्कर आहे. माझी निवड निश्चितच अनुकूल आहे RGBA स्वरूप CSS मध्ये पारदर्शकता येण्यासाठी.

सामग्रीचे अधिक चांगले एकत्रीकरण आणि अधिक स्पष्टतेसाठी, मी तुम्हाला पुढे जाण्याचा सल्ला देतो.

/* 06.07.2006 */

CSS पारदर्शकता (सीएसएस अस्पष्टता, जावास्क्रिप्ट अपारदर्शकता)

पारदर्शकता प्रभाव हा या लेखाचा विषय आहे. CSS किंवा Javascript वापरून HTML पृष्ठ घटक पारदर्शक कसे बनवायचे आणि क्रॉस-ब्राउझर सुसंगतता (वेगवेगळ्या ब्राउझरमध्ये समान कार्य करणे) कशी मिळवायची हे शिकण्यात तुम्हाला स्वारस्य असल्यास फायरफॉक्स ब्राउझर, Internet Explorer, Opera, Safari, Konqueror, तर तुमचे स्वागत आहे. याव्यतिरिक्त, विचारात घ्या तयार समाधानजावास्क्रिप्ट वापरून हळूहळू पारदर्शकता बदलत आहे.

CSS अपारदर्शकता (CSS पारदर्शकता) CSS अपारदर्शकता सहजीवन

सहजीवन म्हणजे एकीकरण विविध शैलीसाठी भिन्न ब्राउझरएक मध्ये CSS नियमइच्छित प्रभाव प्राप्त करण्यासाठी, उदा. क्रॉस-ब्राउझर सुसंगतता लागू करण्यासाठी.

Filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ -moz-अपारदर्शकता: 0.5; /* Mozilla 1.6 आणि खाली */ -khtml-अपारदर्शकता: 0.5; /* Konqueror 3.1, Safari 1.1 */ /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */

खरं तर, IE5.5+ आणि CSS3 अपारदर्शकता समजणाऱ्या ब्राउझरसाठी पहिले आणि शेवटचे नियम आवश्यक आहेत आणि मधले दोन नियम स्पष्टपणे फरक करत नाहीत, परंतु ते एकतर हस्तक्षेप करत नाहीत (स्वतःसाठी निर्णय घ्या. तुम्हाला त्यांची गरज आहे का).

जावास्क्रिप्ट अपारदर्शकता सहजीवन

आता वर वर्णन केलेल्या विविध ब्राउझरची वैशिष्ट्ये लक्षात घेऊन स्क्रिप्टद्वारे पारदर्शकता सेट करण्याचा प्रयत्न करूया.

फंक्शन सेटElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); जर (!elem || !opacityProp) रिटर्न; // निर्दिष्ट केलेल्या ब्राउझरसह कोणतेही घटक नसल्यास दोन्हीपैकी एकाला समर्थन देत नाही ज्ञात कार्येपारदर्शकता नियंत्रित करण्याचे मार्ग जर (opacityProp=="filter") // Internet Exploder 5.5+ ( nOpacity *= 100; // जर पारदर्शकता आधीच सेट केली असेल, तर ती फिल्टर संग्रहाद्वारे बदला, अन्यथा style.filter var oAlpha द्वारे पारदर्शकता जोडा = elem. "+nOpacity+")"; // इतर फिल्टर ओव्हरराईट न करण्यासाठी, "+=" ) इतर // इतर ब्राउझर elem.style = nOpacity वापरा; ) फंक्शन getOpacityProperty() ( जर (typeof document.body.style.opacity == "string") // CSS3 compliant (Moz 1.7+, Safari 1.2+, Opera 9) "opacity" परत करते; अन्यथा (typeof document.body) असल्यास .style.MozOpacity == "स्ट्रिंग") // Mozilla 1.6 आणि पूर्वीचे, Firefox 0.8 परत "MozOpacity"; अन्यथा (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 रिटर्न " KhtmlOpacity"; अन्यथा जर (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ परत "filter"; रिटर्न असत्य; / /पारदर्शकता नाही)

फंक्शन दोन वितर्क घेते: sElemId - घटक id, nOpacity - वास्तविक संख्या 0.0 ते 1.0 पर्यंत CSS3 शैलीतील अपारदर्शकता सेटिंग पारदर्शकता.

मला असे वाटते की setElementOpacity फंक्शन कोडचा IE भाग समजावून सांगणे योग्य आहे.

Var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+"");

elem.style.filter = "..." मालमत्तेला (=) नियुक्त करून पारदर्शकता का सेट केली नाही, असा प्रश्न कुणाला वाटेल; ? स्ट्रिंगच्या शेवटी फिल्टर गुणधर्म जोडण्यासाठी "+=" का वापरले जाते? उत्तर सोपे आहे, इतर फिल्टर "ओव्हरराईट" न करण्यासाठी. परंतु त्याच वेळी, आपण अशा प्रकारे दुसऱ्यांदा फिल्टर जोडल्यास, ते पूर्वीचे बदलणार नाही मूल्ये सेट कराया फिल्टरचे, परंतु फक्त प्रॉपर्टी लाइनच्या शेवटी जोडले जाईल, जे योग्य नाही. म्हणून, जर एखादे फिल्टर आधीपासून स्थापित केले असेल, तर तुम्हाला ते घटकावर लागू केलेल्या फिल्टरच्या संकलनाद्वारे हाताळणे आवश्यक आहे: elem.filters (परंतु लक्षात ठेवा की जर फिल्टर अद्याप घटकास नियुक्त केले गेले नसेल तर ते याद्वारे व्यवस्थापित करा. हा संग्रहअशक्य). संकलन घटकांना फिल्टर नावाने किंवा अनुक्रमणिकेद्वारे प्रवेश करता येतो. तथापि, फिल्टर दोन शैलींमध्ये निर्दिष्ट केले जाऊ शकते, IE4 शॉर्ट शैली किंवा IE5.5+ शैली, जी कोडमध्ये विचारात घेतली जाते.

घटकाची पारदर्शकता सहजतेने बदला

तयार उपाय. आम्ही opacity.js लायब्ररी वापरतो

img ( फिल्टर:अल्फा(अपारदर्शकता=30); -moz-अपारदर्शकता: 0.3; -khtml-अपारदर्शकता: 0.3; अपारदर्शकता: 0.3; ) // पारदर्शकता बदलण्यासाठी नियम तयार करा: नियमाचे नाव सेट करा, पारदर्शकता सुरू करा आणि समाप्त करा. तसेच पारदर्शकता बदलाच्या गतीवर परिणाम करणारा पर्यायी पॅरामीटर विलंब fadeOpacity.addRule("oR1", .3, 1, 30); fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/strawberry.jpg" width="100" height="80" /> fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/tomato.jpg" width="82" height="100" /> fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/sweet_cherry.jpg" width="98" height="97" />

मूलभूत पायऱ्या:

आम्ही फंक्शन्सची लायब्ररी कनेक्ट करतो;

आम्ही fadeOpacity.addRule() पद्धत वापरून नियम परिभाषित करतो;

आम्ही पारदर्शकता प्रारंभिक मूल्यापासून अंतिम मूल्यापर्यंत बदलण्यासाठी fadeOpacity() पद्धतीला किंवा पारदर्शकतेच्या पातळीच्या प्रारंभिक मूल्यावर परत येण्यासाठी fadeOpacity.back() म्हणतो.

चला चघळू

लायब्ररी कशी जोडायची, मला वाटते, वरील उदाहरणावरून स्पष्ट आहे. आता नियमांची व्याख्या स्पष्ट करणे योग्य आहे. पद्धती कॉल करण्यापूर्वी गुळगुळीत बदलपारदर्शकता, आपल्याला नियम परिभाषित करणे आवश्यक आहे ज्याद्वारे प्रक्रिया पार पाडली जाईल: आपल्याला प्रारंभिक आणि अंतिम पारदर्शकता परिभाषित करणे आवश्यक आहे आणि इच्छित असल्यास, पारदर्शकता बदलण्याच्या प्रक्रियेच्या गतीवर परिणाम करणारे विलंब पॅरामीटर निर्दिष्ट करणे आवश्यक आहे.

fadeOpacity.addRule पद्धत वापरून नियम परिभाषित केले आहेत

वाक्यरचना: fadeOpacity.addRule(sRuleName, nStartOpacity, nFinishOpacity, nDalay)

युक्तिवाद:

• sRuleName - नियमाचे नाव, अनियंत्रितपणे सेट करा;
• nStartOpacity आणि nFinishOpacity - प्रारंभ आणि समाप्ती पारदर्शकता, 0.0 ते 1.0 च्या श्रेणीतील संख्या;
• nविलंब - मिलिसेकंदांमध्ये विलंब (पर्यायी युक्तिवाद, डीफॉल्ट 30 आहे).

पारदर्शकता कमी होण्यासाठी कॉल fadeOpacity(sElemId, sRuleName) या पद्धतींद्वारे केला जातो, जेथे sElemId हा घटकाचा आयडी आहे आणि sRuleName हे नियमाचे नाव आहे. कडे पारदर्शकता परत करणे प्रारंभिक अवस्था fadeOpacity.back(sElemId) पद्धत वापरली जाते.

: सहज पारदर्शकता बदलण्यासाठी फिरवा

मी हे देखील लक्षात घेईन की पारदर्शकतेच्या एका साध्या बदलासाठी (परंतु हळूहळू बदल नाही), :hover स्यूडो-सिलेक्टर अगदी योग्य आहे, जे तुम्हाला एखाद्या घटकावर माउस फिरवल्यावर शैली परिभाषित करण्यास अनुमती देते.

a:hover img ( फिल्टर:progid:DXImageTransform.Microsoft.Alpha(opacity=30); -moz-अपारदर्शकता: 0.3; -khtml-अपारदर्शकता: 0.3; अपारदर्शकता: 0.3; )

कृपया लक्षात घ्या की प्रतिमा घटक A मध्ये ठेवली आहे. वस्तुस्थिती अशी आहे की आवृत्ती 6 पर्यंत इंटरनेट एक्सप्लोररला स्यूडो-सिलेक्टर:होव्हर समजते, फक्त लिंक्सच्या संबंधात, आणि कोणत्याही घटकांशी नाही, जसे ती CSS मध्ये असावी (परिस्थिती IE7 मध्ये दुरुस्त केले गेले आहे).

IE मध्ये पारदर्शकता आणि दातेरी मजकूर

सह विंडोज रिलीझ XP ने अँटी-अलायझिंग जोडले स्क्रीन फॉन्टक्लिअरटाइप पद्धत, आणि या अँटी-अलायझिंग पद्धतीचा वापर करताना IE मधील दुष्परिणाम. आमच्या बाबतीत, क्लियरटाइप अँटी-अलियासिंग पद्धत सक्षम असताना मजकूरासह घटकावर पारदर्शकता लागू केली असल्यास, मजकूर सामान्यपणे प्रदर्शित करणे थांबवते (उदाहरणार्थ, ठळक मजकूर, दुहेरी, विविध कलाकृती देखील दिसू शकतात, उदाहरणार्थ, मध्ये डॅशचे स्वरूप, दातेरी मजकूर). परिस्थिती दुरुस्त करण्यासाठी, IE साठी तुम्हाला सेट करणे आवश्यक आहे पार्श्वभूमी रंग, CSS गुणधर्मपार्श्वभूमी-रंग, ज्या घटकावर पारदर्शकता लागू केली जाते. सुदैवाने, IE7 मध्ये बग निश्चित केला गेला आहे.