पृष्ठ लोड पर फीका-प्रभाव के लिए CSS का उपयोग करना

Question

क्या सीएसएस संक्रमण का उपयोग किसी पाठ पैराग्राफ को पृष्ठ लोड पर फीका करने की अनुमति देने के लिए किया जा सकता है?

मुझे वास्तव में पसंद है कि यह http://dotmailapp.com/ पर कैसे दिखता है और सीएसएस का उपयोग करके समान प्रभाव का उपयोग करना पसंद करेगा। तब से डोमेन खरीदा जा चुका है और अब उस प्रभाव का उल्लेख नहीं किया गया है। एक संग्रहीत प्रतिलिपि को Wayback मशीन पर देखा जा सकता है ।

चित्रण

इस मार्कअप के बाद:

<div id="test">
    <p>​This is a test</p>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

निम्नलिखित सीएसएस नियम के साथ:

#test p {
    opacity: 0;
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    -webkit-transition: opacity 2s ease-in;
    -moz-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
}​

संक्रमण को लोड पर कैसे ट्रिगर किया जा सकता है?

Comments

आप इसे पढ़ना चाह सकते हैं: bavotasan.com/2011/a-simple-fade-with-css3

— एडविन

या यह: css-tricks.com/snippets/css/...

— raksheetbhat

Answer 1

विधि 1:

यदि आप एक आत्म-संक्रमण संक्रमण की तलाश में हैं तो आपको CSS 3 एनिमेशन का उपयोग करना चाहिए । वे या तो समर्थित नहीं हैं, लेकिन यह बिल्कुल उसी तरह की चीज है जिसके लिए वे बने थे।

सीएसएस

#test p {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

डेमो

• http://jsfiddle.net/SO_AMK/VV2ek/

ब्राउज़र का समर्थन

सभी आधुनिक ब्राउज़र और इंटरनेट एक्सप्लोरर 10 (और बाद में): http://caniuse.com/#feat=css-animation

विधि 2:

वैकल्पिक रूप से, आप लोड पर कक्षा बदलने के लिए jQuery (या सादे जावास्क्रिप्ट; तीसरा कोड ब्लॉक देखें) का उपयोग कर सकते हैं:

jQuery

$("#test p").addClass("load");​

सीएसएस

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;

    -webkit-transition: opacity 2s ease-in;
       -moz-transition: opacity 2s ease-in;
        -ms-transition: opacity 2s ease-in;
         -o-transition: opacity 2s ease-in;
            transition: opacity 2s ease-in;
}

#test p.load {
    opacity: 1;
}

सादा जावास्क्रिप्ट (डेमो में नहीं)

document.getElementById("test").children[0].className += " load";

डेमो

• http://jsfiddle.net/SO_AMK/a9dnW/

ब्राउज़र का समर्थन

सभी आधुनिक ब्राउज़र और इंटरनेट एक्सप्लोरर 10 (और बाद में): http://caniuse.com/#feat=css-transitions

विधि 3:

या, आप उस विधि का उपयोग कर सकते हैं जो .Mail उपयोग करता है:

jQuery

$("#test p").delay(1000).animate({ opacity: 1 }, 700);​

सीएसएस

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;
}

डेमो

• http://jsfiddle.net/SO_AMK/a9dnW/3/

ब्राउज़र का समर्थन

jQuery 1.x : सभी आधुनिक ब्राउज़र और इंटरनेट एक्सप्लोरर 6 (और बाद में): http://jquery.com/browser-support/
jQuery 2.x : सभी आधुनिक ब्राउज़र और इंटरनेट एक्सप्लोरर 9 (और बाद में): http: // jquery.com/browser-support/

यह विधि सबसे अधिक क्रॉस-संगत है क्योंकि लक्ष्य ब्राउज़र को सीएसएस 3 संक्रमण या एनिमेशन का समर्थन करने की आवश्यकता नहीं है ।

Comments

CSS3 के एनीमेशन का समर्थन हर आधुनिक ब्राउज़र द्वारा ठीक किया जाता है। बेशक, IE एक आधुनिक ब्राउज़र नहीं है।

— रोब

हां, लेकिन क्या होगा यदि आप IE6 के लिए पीछे की ओर संगत होना चाहते हैं? उस स्थिति में मुझे लगता है कि jQuery सबसे अच्छा विकल्प है। लेकिन, पूछने वाला इसे सीएसएस में चाहता है इसलिए मैंने इसे एक विकल्प के रूप में पोस्ट किया है।

— AMK

क्या जावास्क्रिप्ट में प्रारंभिक अस्पष्टता को 0 पर सेट करना सबसे अच्छा नहीं है? इस तरह अगर उपयोगकर्ता ने जावास्क्रिप्ट को निष्क्रिय कर दिया है तो तत्व कभी न दिखने के बजाय बस वहां है।

— जोनाथन।

@AMK मैंने "फिक्स" करने की कोशिश की, जो कि सिर्फ जावास्क्रिप्ट में थी, लेकिन मैनेज नहीं हुई, इसलिए अंत में मैंने एक अलग सीएसएस फ़ाइल बनाई opacity: 1 !important;और एक <noscript>तत्व में डाल दी ।

— जोनाथन।

शानदार जवाब! एनीमेशन को $("#test p").addClass("load");​कई बार लागू करना कितना कठिन है ? करना $("#test p").removeClass('load').addClass("load");​काम नहीं करता है क्योंकि एनीमेशन पहले ही बंद हो गया है। क्या मैं जावास्क्रिप्ट से पुनः आरंभ कर सकता हूं?

— रबन घीया

Answer 2

आप onload=""अपने तत्व की अस्पष्टता शैली को समायोजित करने के लिए HTML विशेषता का उपयोग कर सकते हैं और जावास्क्रिप्ट का उपयोग कर सकते हैं ।

जैसा आपने प्रस्तावित किया था अपने सीएसएस को छोड़ दें। अपना HTML कोड संपादित करें:

<body onload="document.getElementById(test).style.opacity='1'">
    <div id="test">
        <p>​This is a test</p>
    </div>
</body>

पूर्ण लोड होने पर यह पूर्ण पृष्ठ में फीका हो जाता है:

HTML:

<body onload="document.body.style.opacity='1'">
</body>

सीएसएस:

body{ 
    opacity: 0;
    transition: opacity 2s;
    -webkit-transition: opacity 2s; /* Safari */
}

W3Schools वेबसाइट की जाँच करें: बदलाव और जावास्क्रिप्ट के साथ शैलियों को बदलने के लिए एक लेख ।

Comments

बहुत बढ़िया जवाब। वैकल्पिक रूप से मुझे लगता है कि आप सीधे तत्व पर ऑनलोड सेट कर सकते हैं। की तरह <div id="test" onload="this.style.opacity='1'">। यह सुनिश्चित नहीं है कि इसका मतलब है कि पूरे शरीर को लोड करने से पहले घटना शुरू हो रही है।

— जेपी

Answer 3

JQuery के बिना संक्रमण कैसे करें, इसके बारे में @ AMK के सवाल के जवाब में। एक बहुत ही सरल उदाहरण मैं एक साथ फेंक दिया। यदि मेरे पास कुछ और के माध्यम से यह सोचने का समय है, तो मैं जावास्क्रिप्ट कोड को पूरी तरह से समाप्त करने में सक्षम हो सकता हूं:

<style>
    body {
        background-color: red;
        transition: background-color 2s ease-in;
    }
</style>

<script>
    window.onload = function() {
        document.body.style.backgroundColor = '#00f';
    }
</script>

<body>
    <p>test</p>
</body>