फ्री एलिमेंटर पेज बिल्डर का उपयोग करके मूविंग बैकग्राउंड इमेज एनीमेशन बनाएं

फ्री एलिमेंटर पेज बिल्डर का उपयोग करके एक चलती पृष्ठभूमि छवि एनीमेशन बनाना अब मुझे बहुत आसान लगता है यहां आपको पृष्ठ के भीतर कुछ सीएसएस कोड जोड़ने की आवश्यकता है सीएसएस कोड मुक्त एलिमेंटर भी जोड़ने का एक तरीका है।

मैं पृष्ठभूमि छवि के साथ कुछ अद्भुत साझा करने जा रहा हूं कुछ भयानक बनाने के लिए वास्तव में मजेदार था जो आंख को पकड़ने लगता है यहां विभिन्न प्रकार के दो स्रोत हैं एलिमेंटर पेज पृष्ठभूमि और एलिमेंटर तिरछी पृष्ठभूमि यदि आप अपने एलिमेंटर पेज या सेक्शन बैकग्राउंड को रचनात्मक तरीके से व्यवस्थित करना चाहते हैं तो इसकी जांच करना सुनिश्चित करें। 

मूविंग बैकग्राउंड इमेज एनिमेशन क्या है?

एक पृष्ठभूमि छवि एनीमेशन चलती एक लूपिंग सीएसएस एनीमेशन है जो धीरे-धीरे आपके पृष्ठ सामग्री के पीछे एक विस्तृत पृष्ठभूमि छवि को स्लाइड करता है, इसलिए वीडियो फ़ाइल लोड किए बिना अनुभाग जीवित महसूस करता है एलिमेंटर में आप इसे पूर्ण-ऊंचाई अनुभाग के साथ बनाते हैं, सीएसएस आईडी ले जाने वाले दो स्पेसर बीजी और ओवरलेका एक छोटा सा ब्लॉक है, और सीएसएस @कीफ़्रेम HTML विजेट में चिपकाया गया कोड, कोई एलिमेंटर प्रो लाइसेंस नहीं और किसी जावास्क्रिप्ट की आवश्यकता नहीं। यह सबसे हल्के में से एक है एलिमेंटर एनीमेशन प्रभाव आप जोड़ सकते हैं, क्योंकि ब्राउज़र मीडिया चलाने के बजाय एकल परिवर्तन को एनिमेट करता है।

पहले देखते हैं कि यह निम्नलिखित वीडियो में वास्तव में कैसा दिखता है।

यह अनुभाग में उपलब्ध है मास्टर ऐडऑन टेम्पलेट लाइब्रेरी मुफ्त मेंयदि आप हैं तो आप इसे अपने वेबपेज पर आसानी से आयात कर सकते हैं मास्टर ऐडऑन [+] एलिमेंटर पेज बिल्डर ऐडऑन प्लगइन उपयोगकर्ता। 

        <a href="https://downloads.wordpress.org/plugin/master-addons.zip" target="_blank" data-text="Master Addons Plugin" rel="noopener">
                Master Addons Plugin
        </a>
    <h2>Moving Background Image animation in one click</h2><p>If you have installed and activated Master Addons Plugin in your Website then follow me. 

चेक कैसे स्थापित करें और सक्रिय मास्टर एडॉन्स प्लगइन

एक पेज या पोस्ट बनाएं और एलिमेंटर का उपयोग करके इसे संपादित करें आपको मास्टर एडॉन्स टेम्पलेट लाइब्रेरी आइकन दिखाई देगा। 

एमए टेम्पल्टे लाइब्रेरी पर क्लिक करें और डेटा लोड करने के लिए कुछ सेकंड प्रतीक्षा करें आप देखेंगे “रेडी पेज” और “सेक्शनएस” सेक्शन टैब पर क्लिक करें और कुछ सेकंड प्रतीक्षा करें अब आपको “मूविंग बैकग्राउंड इमेज एनीमेशन” दिखाई देगा। 

अब इसका पूर्वावलोकन करने के लिए ज़ूम आइकन पर क्लिक करें फिर आपको एक सम्मिलित बटन दिखाई देगा इस टेम्पलेट को एक क्लिक में प्राप्त करने के लिए इस “insert” बटन पर क्लिक करें उसके बाद आप सामग्री को संपादित करने के लिए स्वतंत्र हैं।

यह आपका अनुभाग कैसा दिखेगा मैं अपने लोकलहोस्ट में वर्डप्रेस डिफ़ॉल्ट थीम का उपयोग कर रहा हूं सामग्री को संपादित करने के लिए बस शीर्षक या पैराग्राफ या सामाजिक पर क्लिक करें। 

यदि आप अपनी स्वयं की छवि और ओवरले प्रभाव जोड़ना चाहते हैं तो आपको आगे बढ़ना चाहिए बीजी और ओवरले छवि अनुभाग बदलना अब।

पृष्ठभूमि छवि एनीमेशन ट्यूटोरियल चलती

संक्षिप्त उत्तर: स्क्रीन” के लिए “Fit पर सेट एक-कॉलम एलिमेंटर अनुभाग बनाएं, सीएसएस आईडी के साथ एक स्पेसर जोड़ें बीजी आपकी सामग्री के ऊपर और आईडी के साथ दूसरा स्पेसर ओवरले इसके नीचे, फिर नीचे सीएसएस एनीमेशन कोड को एक एचटीएमएल विजेट में पेस्ट करें और अपनी खुद की छवि यूआरएल में स्वैप करें आपको तीन परिसंपत्तियों की आवश्यकता है एक विस्तृत पृष्ठभूमि छवि, एक पीएनजी ओवरले और एक एसवीजी ओवरले थ और पूरे निर्माण में मुफ्त एलिमेंटर पेज बिल्डर पर लगभग दस मिनट लगते हैं।

आपको जिन संपत्तियों की आवश्यकता हैः 

1. 1500 गुणा 500 पिक्सेल आयाम वाली एक छवि
2. एक पीएनजी ओवरले छवि
3. एक एसवीजी ओवरले छवि

अब एक कॉलम संरचना जोड़ें और इसकी ऊंचाई “Fit से स्क्रीन” बनाएं। 

बस अब अपनी सामग्री जोड़ें मैं यहां डेमो सामग्री टाइपोग्राफी जानकारी साझा करने जा रहा हूं। 

शीर्षक (प्रयुक्त एलिमेंट डिफ़ॉल्ट शीर्षक तत्व): फ़ॉन्ट परिवार: स्रोत सैन्स प्रो, फ़ॉन्ट आकार: 120पीएक्स, फ़ॉन्ट वजन: 900, लाइन ऊंचाई: 140, अक्षर रिक्ति: -5, रंग: काला

पाठ (प्रयुक्त तत्व डिफ़ॉल्ट पाठ संपादक तत्व): फ़ॉन्ट परिवार: स्रोत सैन्स प्रो, फ़ॉन्ट आकार: 30पीएक्स, फ़ॉन्ट वजन: 400, लाइन ऊंचाई: 40, रंग: काला

सामाजिक (प्रयुक्त तत्व डिफ़ॉल्ट सामाजिक तत्व): आकार: वृत्त, संरेखण: केंद्र, रंग: कस्टम, प्राथमिक काला: आरजीबीए(175,175,175,0), द्वितीयक रंग: काला, आकार: 40, स्थान: 30, सीमा प्रकार: ठोस, सीमा चौड़ाई: 2, सीमा रंग: काला

निम्नलिखित GIF एनीमेशन पर एक नज़र डालें और आप समझ जाएंगे कि इन सभी संपत्तियों को अपने एलिमेंटर एलिमेंट के भीतर कैसे लागू किया जाए। 

उन्नत टैब का उपयोग करके प्रत्येक तत्व के लिए जेड-इंडेक्स = १ रखो बस प्रत्येक तत्व पर क्लिक करें और उन्नत टैब पर नेविगेट करें निम्न छवि की जांच करें। 

(यदि आप इसे याद करते हैं तो आपको चलती पृष्ठभूमि छवि सीएसएस कोड जोड़ने के बाद तत्वों की सामग्री को संपादित करने में समस्या का सामना करना पड़ेगा यदि आप यहां जेड-इंडेक्स नहीं डालते हैं तो आपको सामग्री को संपादित करने के लिए एलिमेंटर नेविगेटर सिस्टम का उपयोग करना होगा)

अब दो स्पेसर जोड़ें एक शीर्षक के ऊपर है और दूसरा सोशल मीडिया आइकन के नीचे है। 

शीर्ष स्पेसर में आईडी के रूप में “BG” डालें। और निचले स्पेसर में आईडी के रूप में “overlay” डालें। 

शीर्ष स्पेसर में बीजी आईडी जोड़ना

बॉटम स्पेसर में ओवरले आईडी जोड़ना

“ जोड़ेंएचटीएमएलसोशल मीडिया आइकन के नीचे या दूसरे स्पेसर के शीर्ष पर ” तत्व। 

बीजी छवि और ओवरले छवि लिंक बदलना

क्या आपको हमारी चलती बीजी छवि एनीमेशन संपत्ति के बारे में याद है अब उन्हें अपनी वेबसाइट में अपलोड करने का समय है पृष्ठभूमि छवि, पीएनजी ओवरले और एसवीजी ओवरले छवि अपलोड करें फिर इन ३ लिंक को कॉपी करें और अपने कोड संपादक या नोटपैड में नीचे सूचीबद्ध करें। 

अपने कोड संपादक में निम्न कोड की प्रतिलिपि बनाएँ और पृष्ठभूमि छवि लिंक, पीएनजी और एसवीजी छवि ओवरले लिंक बदलें मैंने दो स्क्रीनशॉट जोड़े हैं जहां आप आसानी से पा सकते हैं कि आपको कौन से लिंक बदलना चाहिए। 

उच्च रिज़ॉल्यूशन संस्करण देखने के लिए प्रत्येक छवि पर क्लिक करें। 

पृष्ठभूमि छवि यूआरएल बदलें

ओवरले छवियाँ यूआरएल बदलें

<style>

#bg {
-moz-animation: bg 60s linear infinite;
-webkit-animation: bg 60s linear infinite;
-ms-animation: bg 60s linear infinite;
animation: bg 60s linear infinite;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
/* Set your background with this /
background: #348cb2 url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/bg.jpg") bottom left;
background-repeat: repeat-x;
height: 100%;
left: 0;
opacity: 1;
position: fixed;
top: 0;
}

@-moz-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@-webkit-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@-ms-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

#bg {
background-size: 2250px auto;
width: 6750px;
}

/ Overlay */

@-moz-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-webkit-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-ms-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

#overlay {
-moz-animation: overlay 1.5s 1.5s forwards;
-webkit-animation: overlay 1.5s 1.5s forwards;
-ms-animation: overlay 1.5s 1.5s forwards;
animation: overlay 1.5s 1.5s forwards;
background-attachment: fixed, fixed;
background-image: url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/overlay-pattern.png"), url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/overlay.svg");
background-position: top left, center center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
height: 100%;
left: 0;
opacity: 0;
position: fixed;
top: 0;
width: 100%;
}
</style>

अब अपने एडिट किए गए कोड को बीजी और ओवरले इमेज के साथ कॉपी करें फिर इसे एचटीएमएल एलिमेंट में पेस्ट करें आपको रिजल्ट तुरंत दिखाई देगा अगर आप सीएसएस के साथ काम करना जानते हैं तो आप एनिमेशन को भी कस्टमाइज कर सकते हैं।

आइए टेक्स्ट रंग और सोशल मीडिया रंग को सफेद रंग में बदलें ताकि सटीक रूप देख सकें जैसा मैंने आपको दिखाया है।

यह सब एलिमेंटर पेज बिल्डर प्लगइन का उपयोग करके मूविंग बैकग्राउंड इमेज एनीमेशन बनाने के बारे में है आप हमारे उपयोग से अपनी सामग्री को स्टाइल कर सकते हैं मास्टर एडॉन का प्लगइन भी यह आपके पृष्ठ के लिए निश्चित पृष्ठभूमि होगी यदि आप किसी अनुभाग के लिए चलती पृष्ठभूमि सेट करना चाहते हैं तो बस स्थिति को “ में बदलेंनिरपेक्ष“. 

यदि आपको कोई समस्या आती है तो यहां टिप्पणी करने के लिए स्वतंत्र महसूस करें मैं आपको अपने चलती बीजी छवि एनीमेशन को अनुकूलित करने के लिए मार्गदर्शन करूंगा।

अक्सर पूछे जाने वाले प्रश्न