wow - লোড উপর css3 সংক্রমণ অ্যানিমেশন?




wow js (6)

@ রোলফের সমাধানের মতো, তবে বহিরাগত ফাংশনের রেফারেন্স বা ক্লাসের সাথে বাজানো। একবার লোড হওয়া অবস্থায় অস্বচ্ছতা স্থির থাকে তবে স্টাইলের মাধ্যমে সরাসরি অস্পষ্টতা পরিবর্তন করতে ইনলাইন স্ক্রিপ্টটি ব্যবহার করুন। উদাহরণ স্বরূপ

<body class="fadein" onload="this.style.opacity=1">

যেখানে সিএসএস সিটেল "ফেডিন" প্রতি @ রোলফ দ্বারা সংজ্ঞায়িত করা হয়, রূপান্তর সংজ্ঞায়িত করা এবং অস্বাভাবিকতা সেটিংটি প্রাথমিক অবস্থায় (অর্থাৎ 0)

একমাত্র ধরা এটি SPAN বা DIV উপাদানের সাথে কাজ করে না, যেহেতু তাদের কার্য-সম্পাদনার কাজ নেই

জাভাস্ক্রিপ্ট ব্যবহার না করে পেজ লোডে CSS3 রূপান্তর অ্যানিমেশন ব্যবহার করা কি সম্ভব?

এই ধরনের আমি চাই, কিন্তু পৃষ্ঠা লোড:

http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html

কি আমি এতদূর পাওয়া

  • CSS3 পরিবর্তন-বিলম্ব , উপাদানের প্রভাবগুলি বিলম্বিত করার একটি উপায়। শুধু হোভার কাজ করে।
  • CSS3 কীফ্রেম , লোড কাজ কিন্তু চরমভাবে ধীর। যে কারণে দরকারী না।
  • CSS3 রূপান্তর দ্রুত যথেষ্ট কিন্তু পৃষ্ঠা লোড অ্যানিমেশন না।

আচ্ছা, এটি একটি চতুর।

উত্তর "সত্যিই না" হয়।

সিএসএস একটি কার্যকরী স্তর নয়। এটা কি ঘটবে বা কখন কোন সচেতনতা নেই। এটি কেবল "ফ্ল্যাগ" (ক্লাস, আইডস, যুক্তরাষ্ট্র) থেকে একটি উপস্থাপক স্তর যোগ করার জন্য ব্যবহার করা হয়।

ডিফল্টরূপে, সিএসএস / ডম ব্যবহার করার জন্য সিএসএসের কোনও "অন লোড" রাষ্ট্র প্রদান করে না। যদি আপনি চান / জাভাস্ক্রিপ্ট ব্যবহার করতে সক্ষম হন, আপনি body একটি শ্রেণী বা কিছু সিএসএস সক্রিয় করার জন্য কিছু বরাদ্দ করতে চান।

যে বলা হচ্ছে, আপনি যে জন্য একটি হ্যাক তৈরি করতে পারেন। আমি এখানে একটি উদাহরণ দেব, কিন্তু এটি আপনার পরিস্থিতি প্রযোজ্য হতে পারে বা হতে পারে।

আমরা অনুমান করছি যে "বন্ধ" হল "যথেষ্ট ভাল":

<html>
<head>
<!-- Reference your CSS here... -->
</head>
<body>
    <!-- A whole bunch of HTML here... -->
    <div class="onLoad">OMG, I've loaded !</div>
</body>
</html>

এখানে আমাদের সিএসএস স্টাইলশীট একটি উদ্ধৃতাংশ:

.onLoad
{
    -webkit-animation:bounceIn 2s;
}

আমরা ধারণা করি যে আধুনিক ব্রাউজারগুলি ক্রমাগতভাবে রেন্ডার করে, তাই আমাদের শেষ উপাদানটি শেষ পর্যন্ত রেন্ডার করবে এবং তাই এই CSSটি শেষ হয়ে যাবে।


আমি মনে করি OP সম্পর্কিত প্রশ্নের জন্য আমি প্রায় এক ধরণের কাজ খুঁজে পেয়েছি - পৃষ্ঠাটির 'on.load' শুরুর পরিবর্তে পরিবর্তনের পরিবর্তে - আমি দেখেছি যে অপ্রাসঙ্গিক বিবরণের জন্য একটি অ্যানিমেশন ব্যবহার করে একই প্রভাব ছিল, (আমি খুঁজছিলাম OP হিসাবে একই জিনিস)।

তাই আমি পৃষ্ঠা লোডের উপর সাদা পাঠ্য (সাইট পটভূমির মতো) থেকে কালো পাঠ্য রঙে ফেইড করতে চাইতাম - এবং আমি শুধুমাত্র সোমবার থেকে কোডিং করেছি তাই আমি একটি 'on.load' স্টাইল জিনিস কোড খুঁজছিলাম, কিন্তু এখনও জেএস জানি না - তাই এখানে আমার কোড যে আমার জন্য ভাল কাজ করে।

#main p {
  animation: fadein 2s;
}
@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

এবং যাই হোক না কেন, এটি জন্য কাজ করে না। .class শুধুমাত্র # ডি (অন্তত আমার নয়)

এই সাহায্য করে আশা করি - আমি জানি যে এই সাইটটি আমাকে অনেক সাহায্য করে!


খুব সামান্য জাভাস্ক্রিপ্ট প্রয়োজন:

window.onload = function() {
    document.body.className += " loaded";
}

এখন সিএসএস:

.fadein {
    opacity: 0;
    -moz-transition: opacity 1.5s;
    -webkit-transition: opacity 1.5s;
    -o-transition: opacity 1.5s;
    transition: opacity 1.5s;
}

#body.loaded .fadein {
    opacity: 1;
}

আমি জানি জাভাস্ক্রিপ্ট ছাড়া "জাভাস্ক্রিপ্ট ছাড়া", কিন্তু আমি মনে করি এটি জাভাস্ক্রিপ্টের এক লাইন জড়িত একটি সহজ সমাধান নির্দেশ করে মূল্যবান।

এটা এমনকি ইনলাইন জাভাস্ক্রিপ্ট হতে পারে, যে মত কিছু:

<body onload="document.body.className += ' loaded';">

যে সমস্ত জাভাস্ক্রিপ্ট প্রয়োজন হয়।


প্রকৃতপক্ষে, যত তাড়াতাড়ি সম্ভব সিএসএস প্রয়োগ করা হয়, তবে উপাদানগুলি এখনও আঁকতে পারে না। আপনি 1 বা 2 সেকেন্ডের বিলম্বের অনুমান করতে পারেন তবে এটি ইন্টারনেটের গতির উপর নির্ভর করে বেশিরভাগ মানুষের পক্ষে সঠিক না।

এছাড়াও, আপনি যদি উদাহরণস্বরূপ কিছু বিবর্ণ করতে চান তবে এটি এমন CSS প্রয়োজন হবে যা সামগ্রী বিতরণ করা গোপন করে। যদি ব্যবহারকারীর CSS3 ক্রিয়াটি থাকে না তবে তারা এটি দেখতে পাবে না।

আমি jQuery ব্যবহার করে সুপারিশ করব (ব্যবহারের জন্য সহজেই + আপনি অন্যান্য ইউএইর জন্য অ্যানিমেশন যুক্ত করতে চাইতে পারেন) এবং কিছু JS:

$(document).ready(function() {
    $('#id_to_fade_in')
        .css({"opacity":0})   // Set to 0 as soon as possible – may result in flicker, but it's not hidden for users with no JS (Googlebot for instance!)
        .delay(200)           // Wait for a bit so the user notices it fade in
        .css({"opacity":1});  // Fade it back in. Swap css for animate in legacy browsers if required.
});

সিএসএস সংযোজন সংযোজনের পাশাপাশি। যদি প্রয়োজন হয় তবে লেগ্যাসি ব্রাউজারে দ্বিতীয় সিএসএসের পরিবর্তে অ্যানিমেশনের ব্যবহারটিকে সহজে ব্যবহারের সুবিধা রয়েছে।


শরীরের হভারের সাথে এটি শুরু করুন এটি শুরু হবে যখন মাউস প্রথম পর্দায় চলে যাবে, যা বেশিরভাগই আগমনের পরে দ্বিতীয়টির মধ্যে থাকবে, সমস্যাটি হল পর্দার বাইরে যখন এটি বিপরীত হবে।

html:hover #animateelementid, body:hover #animateelementid {rotate ....}

আমি মনে করতে পারেন সেরা জিনিস যে: http://jsfiddle.net/faVLX/

পূর্ণস্ক্রীন: http://jsfiddle.net/faVLX/embedded/result/

নীচের মন্তব্য দেখুন সম্পাদনা করুন:
এটি কোনও টাচস্ক্রীন ডিভাইসে কাজ করবে না কারণ এটি কোনও হোভার নেই, তাই ব্যবহারকারীরা সামগ্রীটি দেখতে না পাওয়ায় তারা এটি ট্যাপ না করে। - ধনী ব্র্যাডশ্যা





css-animations