Using fade, slide, and zoom effects in Hindi
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में वेब डेवलपर को कई बिल्ट-इन रेडीमेड ट्रांजीशन और एनीमेशन क्लासेज मिलते है, इन W3.CSS क्लासेज का यूज़ किसी यूजर डिफाइन वेबपेज या वेबसाइट एलिमेंट्स पर फ़ेड, स्लाइड, और ज़ूम, जैसे एनिमेशन इफ़ेक्ट ऐट्रिब्यूट्स अप्लाई करने में किया जा सकता है। ये एनीमेशन इफ़ेक्ट एक सिंपल बोरिंग वेबपेज एलिमेंट ऑब्जेक्ट इंटरैक्शन को ज़्यादा डायनैमिक और विज़ुअली एंगेजिंग क्रिएट कर इंटरनेट वेब यूज़र के एक्सपीरियंस इंटरफ़ेस को इम्प्रूव कर सकते हैं।
यहाँ नीचे आपको W3.CSS वेब डेवलपमेंट स्क्रिप्ट में एनिमेशन ट्रांजीशन को अप्लाई करके फ़ेड, स्लाइड, और ज़ूम एनीमेशन इफ़ेक्ट को कैसे अप्लाई करें। इसके बारे में डिटेल इनफार्मेशन यहाँ दी गई है।
Fade Effect w3-animate-opacity in W3.CSS.
फ़ेड इफ़ेक्ट मौजूदा एचटीएमएल बेस्ड वबपेज को आसानी से धीरे धीरे किसी वेबपेज ऑब्जेक्ट एलिमेंट की डिफ़ॉल्ट ओपेसिटी को 0 (ट्रांसपेरेंट ओपेसिटी) से 1 ओपेसिटी (कम्प्लीटली डिस्प्ले होने वाले) फेड इफ़ेक्ट में चेंज कर देता है। वेबपेज में फेड इफ़ेक्ट स्पेशली रूप से वेब एलिमेंट्स के प्रीव्यू या हाईड होने पर स्मूद ट्रांज़िशन को अप्लाई करने के लिए यूज़फुल है।
Example of the fade-in effect web element in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Fade Effect Attributes in W3.CSS</title>
<!– here we connect W3.CSS cdn network –>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container w3-margin-top w3-yellow”>
<!– here we implement fade-in effect on heading text–>
<h1 class=”w3-animate-opacity w3-text-red” >
Let’s Try Fade Animated Effect In Webpage
</h1>
<p class=”w3-animate-opacity w3-text-blue”>
Here you can see fade effect, when the current webpage loads in web browser.
</p>
<p class=”w3-animate-opacity w3-text-black”>
A simple webpage text with fade effect.
</p>
<button type=”button” class=”w3-button w3-blue w3-animate-opacity w3-margin-top”>
Hit Me
</button>
</div>
</body>
</html>
Explanation of the fade-in effect web element in W3.CSS.
- w3-animate-opacity – यहाँ इस एक्साम्प्ल में यह क्लास मौजूदा वेबपेज में फ़ेड इफ़ेक्ट को अप्लाई करता है। वेब ब्राउज़र में वेबपेज लोड होने पर वेब एलिमेंट धीरे-धीरे फ़ेड इन प्रीव्यू होगा।
- जैसे ही वेब ब्राउज़र में वेबपेज कंटेंट लोड होता है, तो टेक्स्ट हैडिंग टैग में अप्लाई फ़ेड एनिमेशन अपने आप अप्लाई हो जाएगा, जिससे फ़ेड वेब एलिमेंट धीरे-धीरे डिस्प्ले होगा।
Slide animation effects in W3.CSS, w3-animate-left, w3-animate-right, w3-animate-top, and w3-animate-bottom.
W3.CSS बेस्ड डिज़ाइन वेबपेज में स्लाइड एनीमेशन इफ़ेक्ट एक वेबपेज ऑब्जेक्ट एलिमेंट को स्क्रीन के एक तरफ़ से दूसरी तरफ़ मूव या एनिमेट करता है. जिसमे यह एलिमेंट को (लेफ्ट, राइट, टॉप, या बॉटम) डायरेक्शन में मूव करता है। यह वेबपेज इफ़ेक्ट वेब एलिमेंट के लिए एक डायनामिक आर्डर में विज़ुअल टेक्स्ट ऑब्जेक्ट एंट्री और एग्ज़िट क्रिएट करने के लिए एक बेस्ट चॉइस है।
Example of the slide from left animation effect in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Slide animation effects in W3.CSS </title>
<!– here we connect W3.CSS cdn network –>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container w3-margin-top w3-gray”>
<h1 class=”w3-center w3-text-white”>Here We See All W3.CSS Animation Effects</h1>
<!– here it animates webpage text from Left direction –>
<div class=”w3-panel w3-indigo w3-animate-left”>
<h2>Animation from Left</h2>
<p>Here this text block slides from the left direction. </p>
</div>
<!– here it animates webpage text from right direction –>
<div class=”w3-panel w3-lime w3-animate-right”>
<h2>Animation from Right</h2>
<p>Here this text block slides from the right direction. </p>
</div>
<!– here it animates webpage text from top direction –>
<div class=”w3-panel w3-orange w3-animate-top”>
<h2>Animation from Top</h2>
<p>Here this text block slides from the top direction. </p>
</div>
<!– here it animates webpage text from bottom direction –>
<div class=”w3-panel w3-pink w3-animate-bottom”>
<h2>Animation from Bottom</h2>
<p>Here this text block slides from the bottom direction. </p>
</div>
</div>
</body>
</html>
Explanation of the slide from left animation effect in W3.CSS.
- w3-animate-left – यहाँ इस एक्साम्प्ल में वेबपेज एलिमेंट लेफ्ट डायरेक्शन से अपनी अंतिम लोकेशन पर स्लाइड कर मूव करता है।
- इसी तरह, अन्य सभी एनीमेशन इफ़ेक्ट अन्य डायरेक्शन में जैसे राइट, टॉप, और बॉटम, डायरेक्शन से स्लाइड या एनिमेट करने के लिए w3-animate-right, w3-animate-top, और w3-animate-bottom आदि, क्लासेज का यूज़ कर सकते हैं।
Zoom Effect w3-animate-zoom in W3.CSS.
ज़ूम इफ़ेक्ट मौजूदा एचटीएमएल बेस्ड वबपेज एलिमेंट ऑब्जेक्ट को इजीली आर्डर में लार्ज या स्माल साइज में कन्वर्ट करता है। ज़ूम इफ़ेक्ट वेबपेज एलिमेंट ऑब्जेक्ट के साइज़ में बढ़ने (ज़ूम इन होने पर) या एलिमेंट वेब ऑब्जेक्ट के सिकुड़ने (ज़ूम आउट होने) के इफ़ेक्ट को क्रिएट करता है। ज़ूम इफ़ेक्ट का यूज़ ज्यादातर वेबपेज में किसी बटन, इमेज, और अन्य वेब एलिमेंट पर ज़ूम इन इफ़ेक्ट प्रोवाइड करने या विज़ुअल वेब ऑब्जेक्ट एलिमेंट को इंट्रेस्टिंग क्रिएट करने में किया जाता है।
Example of the zoom-in effect on a button in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Zoom In Effect in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container w3-black w3-margin-top”>
<!– here we add zoom-in Effect –>
<h1 class=”w3-animate-zoom w3-text-green “>Let’s Try Zoom-In Effect On Active Heading Tag</h1>
<p class=”w3-animate-zoom w3-text-pink”>Here This paragraph text will display with zoom in effect in W3.CSS webpage. </p>
<button class=”w3-button w3-yellow w3-text-red w3-animate-zoom w3-large”>Zoom In Effect</button>
</div>
</body>
</html>
Explanation of the zoom-in effect on a button in W3.CSS.
- w3-animate-zoom – यहाँ इस एक्साम्प्ल में यह क्लास वेबपेज एलिमेंट ऑब्जेक्ट पर ज़ूम इन इफ़ेक्ट को अप्लाई करता है. इस वजह से वेबपेज ब्राउज़र में लोड होने पर वेब एलिमेंट टेक्स्ट का साइज़ अपने आप बढ़ जाएगा।
- ज़ूम इन इफ़ेक्ट किसी भी वेब एलिमेंट, जिसमे टेक्स्ट, बटन, या इमेज, पर अप्लाई किया जा सकता है. जिससे की ये एलिमेंट ऑब्जेक्ट वेबपेज में अलग से डिस्प्ले हो।
Combining fade, slide, and zoom effects in W3.CSS.
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में वेब डेवलपर अधिक कॉम्प्लेक्स और डायनामिक वेबपेज एलिमेंट ऑब्जेक्ट एनिमेशन क्रिएट करने के लिए कई एनिमेशन क्लासेज को आपस में मर्ज कर सकते हैं। जैसे, वेब डेवलपर किसी वेबपेज एलिमेंट को फ़ेड इन और लेफ्ट से स्लाइड, या एक ही समय में फ़ेड और ज़ूम इन दोनों तरह के एनीमेशन इफ़ेक्ट ऐट्रिब्यूट्स को अप्लाई कर सकते हैं।
Example of the Fade, Slide, and Zoom in effect group in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Group Fade, Slide, and Zoom Animations Effect In W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container w3-blue w3-text-white w3-margin-top”>
<!– here we implement fade with slide from the left direction–>
<h1 class=”w3-animate-opacity w3-animate-left”>Here This Webpage Title Text Display with Fades And Slides Text From The Left Direction</h1>
<!– here we implement zoom with Slide from the top direction –>
<p class=”w3-animate-zoom w3-animate-top w3-large”>Here This Webpage paragraph text will zoom in and slide down from the top direction. </p>
<!– here we implement zoom with fade in button –>
<button class=”w3-button w3-teal w3-animate-zoom w3-animate-opacity w3-large”>Zoom And Fade Effect</button>
</div>
</body>
</html>
Explanation of the Fade, Slide, and Zoom in effect group in W3.CSS.
- w3-animate-opacity w3-animate-left – यहाँ इस एक्साम्प्ल में वेबपेज टेक्स्ट हेडिंग लेफ्ट डायरेक्शन से स्लाइड होते हुए फ़ेड इन डिस्प्ले होती है।
- w3-animate-zoom w3-animate-top – इस क्लासेज में वेबपेज टेक्स्ट ऑब्जेक्ट पैराग्राफ़ ज़ूम इन डिस्प्ले होता है, और यह मौजूदा वेबपेज में टॉप टू बॉटम स्लाइड होता है।
- w3-animate-zoom w3-animate-opacity – यहाँ इस क्लास में वेबपेज बटन एक साथ ज़ूम इन और फ़ेड इन डिस्प्ले होता है।
