CSS3 का उपयोग करके पेज ट्रांज़िशन बनाएं

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

HTML मार्कअप

HTML में पांच मुख्य खंड शामिल होंगे: शीर्षक और चार खंडों की सामग्री। सामग्री के प्रत्येक अनुभाग की अपनी आईडी और क्लास पैनल होगी। इसके अलावा, हम एक और खंड जोड़ेंगे, जो मुख्य चार खंडों के अंदर होगा, और इसमें एक वर्ग सामग्री होगी। ID #home वाले पहले खंड में केवल सामग्री वर्ग होगा, और इसमें अतिरिक्त ब्लॉक नहीं होगा:

<!-- Home --> <div id="home" class="content"> <h2>Home</h2> <p>Some content</p> <!-- ... --> </div> <!-- /Home --> <!-- Portfolio --> <div id="portfolio" class="panel"> <div class="content"> <h2>Portfolio</h2> <p>Some content</p> <!-- ... --> </div> </div> <!-- /Portfolio --> <!-- About --> <div id="about" class="panel"> <div class="content"> <h2>About</h2> <p>Some content</p> <!-- ... --> </div> </div> <!-- /About --> <!-- Contact --> <div id="contact" class="panel"> <div class="content"> <h2>Contact</h2> <p>Some content</p> <!-- ... --> </div> </div> <!-- /Contact --> 

#Header अनुभाग में, हमारे पास मुख्य शीर्षक और नेविगेशन होगा:

 <!-- Header with Navigation --> <div id="header"> <h1>Page Transitions with CSS3</h1> <ul id="navigation"> <li><a id="link-home" href="#home">Home</a></li> <li><a id="link-portfolio" href="#portfolio">Portfolio</a></li> <li><a id="link-about" href="#about">About Me</a></li> <li><a id="link-contact" href="#contact">Contact</a></li> </ul> </div> 

अब, वर्तमान विचार का उपयोग करना है: वर्तमान खंड में संक्रमण जोड़ने के लिए छद्म वर्ग को लक्षित करें। इस उदाहरण में, हम अपने पृष्ठों को पहले "फ्लिप" करेंगे और फिर नीचे (पहला डेमो देखें)।

सीएसएस

सबसे पहले, हम अपनी हेडिंग और नेविगेशन को स्टाइल करेंगे। हम चाहते हैं कि वे किसी भी समय एक ही स्थान पर रहें, भले ही सब कुछ चल रहा हो।

 #header{ position: absolute; z-index: 2000; width: 235px; top: 50px; } #header h1{ font-size: 30px; font-weight: 400; text-transform: uppercase; color: rgba(255,255,255,0.9); text-shadow: 0px 1px 1px rgba(0,0,0,0.3); padding: 20px; background: #000; } #navigation { margin-top: 20px; width: 235px; display:block; list-style:none; z-index:3; } #navigation a{ color: #444; display: block; background: #fff; background: rgba(255,255,255,0.9); line-height: 50px; padding: 0px 20px; text-transform: uppercase; margin-bottom: 6px; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); font-size: 14px; } #navigation a:hover { background: #ddd; } 

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

 .panel{ min-width: 100%; height: 98%; overflow-y: auto; overflow-x: hidden; margin-top: -150%; position: absolute; background: #000; box-shadow: 0px 4px 7px rgba(0,0,0,0.6); z-index: 2; -webkit-transition: all .8s ease-in-out; -moz-transition: all .8s ease-in-out; -o-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .panel:target{ margin-top: 0%; background-color: #ffcb00; } 

अगला, हम सामग्री वर्ग के लिए शैलियों को निर्धारित करेंगे, जो हमारे सभी वर्गों में है:

 .content{ right: 40px; left: 280px; top: 0px; position: absolute; padding-bottom: 30px; } .content h2{ font-size: 110px; padding: 10px 0px 20px 0px; margin-top: 52px; color: #fff; color: rgba(255,255,255,0.9); text-shadow: 0px 1px 1px rgba(0,0,0,0.3); } .content p{ font-size: 18px; padding: 10px; line-height: 24px; color: #fff; display: inline-block; background: black; padding: 10px; margin: 3px 0px; } 

नेविगेशन में वर्तमान तत्व के रंग को बदलने के लिए, हम निम्न का उपयोग करेंगे: सामान्य सिबलिंग चयनकर्ता के साथ लक्ष्य छद्म-वर्ग को इसी नेविगेशन आइटम को "खोजने" के लिए:

 #home:target ~ #header #navigation #link-home, #portfolio:target ~ #header #navigation #link-portfolio, #about:target ~ #header #navigation #link-about, #contact:target ~ #header #navigation #link-contact{ background: #000; color: #fff; } 

बस आपको जरूरत है। हमें जो मिला उसे देखने के लिए डेमो देखें।
डेमो>
स्रोत