পৃষ্ঠা লোডের ফিড-ইন এফেক্টের জন্য সিএসএস ব্যবহার করা

442

পৃষ্ঠার লোডে কোনও পাঠ্য অনুচ্ছেদে ফেড-ইন করার জন্য সিএসএস রূপান্তরগুলি ব্যবহার করা যেতে পারে?

আমি http://dotmailapp.com/ এ কীভাবে দেখেছি তা সত্যিই পছন্দ করি এবং CSS ব্যবহার করে অনুরূপ প্রভাব ব্যবহার করতে পছন্দ করব। ডোমেনটি তখন থেকে কেনা হয়েছে এবং এর প্রভাবটির আর উল্লেখ নেই। একটি সংরক্ষণাগারযুক্ত অনুলিপিটি ওয়েব্যাক মেশিনে দেখা যাবে ।

চিত্রণ

এই মার্কআপটি থাকা:

<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;
}

লোডে ট্রানজিশনটি কীভাবে হতে পারে?

css css-transitions opacity

— user1556266
সূত্র

আপনি এটি পড়তে চাইতে পারেন: bavotasan.com/2011/a-smple-fade-with-css3

— এডউইন বাউটিস্তা

বা এটি: সিএসএস- ট্রিক্সস

— স্নিপেটস

উত্তর:

914

পদ্ধতি 1:

আপনি যদি স্ব-চালিত স্থানান্তরের সন্ধান করছেন তবে আপনার সিএসএস 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- ট্রান্সশিশন

পদ্ধতি 3:

অথবা, আপনি সেই পদ্ধতিটি ব্যবহার করতে পারেন যা মেল ব্যবহার করে:

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 ট্রানজিশন বা অ্যানিমেশন সমর্থন করার প্রয়োজন না হওয়ায় এই পদ্ধতিটি সবচেয়ে ক্রস-সামঞ্জস্যপূর্ণ ।

— AMK
সূত্র

149

CSS3 অ্যানিমেশন প্রায় প্রতিটি আধুনিক ব্রাউজার দ্বারা সূক্ষ্মভাবে সমর্থিত। অবশ্যই, আইই কোনও আধুনিক ব্রাউজার নয়।

— রব

হ্যাঁ, তবে আপনি যদি আইই 6 এর সাথে সামঞ্জস্যপূর্ণ হতে চান / চান? সেক্ষেত্রে আমি মনে করি যে jQuery সেরা বিকল্প best তবে, প্রশ্নকারী সিএসএসে এটি চায় তাই আমি এটি বিকল্প হিসাবে পোস্ট করেছি।

— এএমকে

প্রাথমিক অস্বচ্ছতাটি জাভাস্ক্রিপ্টে 0 এ সেট করা ভাল না? যদি ব্যবহারকারী জাভাস্ক্রিপ্ট অক্ষম করে থাকে তবে উপাদানটি উপস্থিত না হওয়ার পরিবর্তে কেবল সেখানে উপস্থিত রয়েছে।

— জোনাথন

@ এ্যামকে আমি "ফিক্স" করার চেষ্টা করেছি যা ঠিক জাভাস্ক্রিপ্টে কিন্তু পরিচালনা করতে পারেনি, তাই শেষ পর্যন্ত আমি একটি পৃথক সিএসএস ফাইল তৈরি opacity: 1 !important;করে একটি <noscript>উপাদান রেখেছি ।

— জোনাথন

জমকালো উত্তর! $("#test p").addClass("load");একাধিকবারের মাধ্যমে অ্যানিমেশনটি প্রয়োগ করা কতটা কঠিন ? $("#test p").removeClass('load').addClass("load");অ্যানিমেশন ইতিমধ্যে বন্ধ হয়ে গেছে তাই কাজ করা কাজটি করে না। আমি কি জাভাস্ক্রিপ্ট থেকে পুনঃসূচনা ট্রিগার করতে পারি?

— banেরবান গিয়

আপনি onload=""এইচটিএমএল বৈশিষ্ট্যটি ব্যবহার করতে পারেন এবং জাভাস্ক্রিপ্ট আপনার উপাদানটির অস্বচ্ছতা শৈলীটি সামঞ্জস্য করতে ব্যবহার করতে পারেন ।

আপনার প্রস্তাব অনুসারে আপনার সিএসএস ছেড়ে দিন। আপনার এইচটিএমএল কোড এতে সম্পাদনা করুন:

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

লোডিং শেষ হয়ে গেলে এটি সম্পূর্ণ পৃষ্ঠাটি বিবর্ণ করতে কাজ করে:

এইচটিএমএল:

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

সিএসএস:

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

ডাব্লু 3 স্কুলগুলি দেখুন : ট্রানজিশন এবং জাভাস্ক্রিপ্ট সহ স্টাইল পরিবর্তন করার জন্য একটি নিবন্ধ ।

— নেদ
সূত্র

দুর্দান্ত উত্তর। বিকল্পভাবে আমি অনুমান করি যে আপনি উপাদানটির উপর সরাসরি লোড সেট করতে পারেন। লাইক <div id="test" onload="this.style.opacity='1'">। নিশ্চিত না যে এর অর্থ পুরো শরীরটি লোড হওয়ার আগে ইভেন্টটি ট্রিগার হয়েছে কিনা।

— জেপ্প

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>

— হরণ করা
সূত্র