☕️ 🧘 👋 क्रॉस-ब्राउज़र रिवर्स CSS3 पृष्ठभूमि एनीमेशन 🤦🏿 👨🏼‍🔬 🚧

हेबर के अच्छे दिन पाठकों। अद्भुत सीएसएस गुण हैं जिनके साथ आप एनीमेशन के रिवर्स आंदोलन को सेट कर सकते हैं - एनीमेशन-दिशा: वैकल्पिक और एनीमेशन-दिशा: वैकल्पिक-रिवर्स (एनीमेशन-दिशा के साथ भ्रमित नहीं होना चाहिए: रिवर्स संपत्ति, जो रिवर्स दिशा सेट करता है ), लेकिन वर्तमान में उनका समर्थन नहीं करता है सबसे आधुनिक ब्राउज़र। मैं क्रॉस-ब्राउज़र रिवर्स बैकग्राउंड एनीमेशन बनाने के बारे में बात करना चाहता हूं।

Jsfiddle उदाहरण

एचटीएमएल

<html> <head></head> <body id="body"><body> </html>

सीएसएस

पृष्ठभूमि का रंग सेट करें (pattern.png - इस उदाहरण में बनावट) और ब्राउज़र विंडो की ऊंचाई के बराबर पृष्ठ की ऊंचाई:

 html{ height: 100%; min-height: 100%; } body{ background:url('http://www.netcribe.com/images/pattern.png') repeat fixed left center #0296BA; overflow:hidden; }

पृष्ठभूमि का एनिमेटेड हिस्सा आइकन है, जिसकी छवि .icons वर्ग के साथ तत्वों की पृष्ठभूमि होगी। चौड़ाई पृष्ठभूमि छवि की चौड़ाई के बराबर है।

leadicons.png (4898px * 32px)

 .icons{ background-image:url('http://www.netcribe.com/images/leadicons.png'); background-repeat:repeat-x; height:60px; width:4898px; clear:both; /*animation-duration*/ -webkit-animation-duration:200s; -moz-animation-duration:200s; -ms-animation-duration:200s; -o-animation-duration:200s; animation-duration:200s; /*animation-iteration-count*/ -webkit-animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; -ms-animation-iteration-count:infinite; -o-animation-iteration-count:infinite; animation-iteration-count:infinite; }

CSS में, दो वर्गों को निर्दिष्ट आंदोलन-बाईं ओर दिया जाता है, जिसे बाएं और आंदोलन-दाएं के आंदोलन के साथ एक एनीमेशन सौंपा जाता है, जिसे दाईं ओर एक आंदोलन के साथ एक एनीमेशन सौंपा गया है:

 .move-left{ /*animation-name*/ -webkit-animation-name:movement-left; -moz-animation-name:movement-left; -ms-animation-name:movement-left; -o-animation-name:movement-left; animation-name:movement-left; } .move-right{ /*animation-name*/ -webkit-animation-name:movement-right; -moz-animation-name:movement-right; -ms-animation-name:movement-right; -o-animation-name:movement-right; animation-name:movement-right; }

जावास्क्रिप्ट

यह महत्वपूर्ण है कि .icons वर्ग के साथ तत्वों की गति अलग-अलग स्थितियों से शुरू होती है, इसलिए सभी तत्वों में अलग-अलग पृष्ठभूमि की स्थिति वाले गुण होने चाहिए, और मार्जिन गुणों को एनीमेशन कार्यों में स्वयं बदलना होगा।

एनीमेशन-दिशा का उपयोग कर सीएसएस शैलियों:

 .icons{ background-image:url('http://www.netcribe.com/images/leadicons.png'); background-repeat:repeat-x; height:60px; width:4898px; clear:both; /*animation-duration*/ -webkit-animation-duration:200s; -moz-animation-duration:200s; -ms-animation-duration:200s; -o-animation-duration:200s; animation-duration:200s; /*animation-iteration-count*/ -webkit-animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; -ms-animation-iteration-count:infinite; -o-animation-iteration-count:infinite; animation-iteration-count:infinite; /*animation-name*/ -webkit-animation-name:movement; -moz-animation-name:movement; -ms-animation-name:movement; -o-animation-name:movement; animation-name:movement; } .move-left{ /*animation-direction*/ -webkit-animation-direction:alternate; -moz-animation-direction:alternate; -ms-animation-direction:alternate; -o-animation-direction:alternate; animation-direction:alternate; } .move-right{ /*animation-direction*/ -webkit-animation-direction:alternate-reverse; -moz-animation-direction:alternate-reverse; -ms-animation-direction:alternate-reverse; -o-animation-direction:alternate-reverse; animation-direction:aalternate-reverse; }       javascipt

 <script src="http://yandex.st/jquery/1.8.2/jquery.min.js"></script>

 $(document).ready(function(){ var clientWidth, clientHeight, x, y, z; clientWidth = $("html").width(); clientHeight = $("html").height(); margin = 4898 - parseInt(clientWidth); x=Math.ceil(clientHeight/60); //      .icons       y=0; //    background-position z=Math.ceil(4898/(2*x)); //    background-position $("#body").css({'width':clientWidth,'height':clientHeight});

हम एनीमेशन फ़ंक्शन उत्पन्न करते हैं:

  $("#body").append('<style>@keyframes movement-left {from {} to {margin-left: '+ -margin +'px;}} @keyframes movement-right {from {} to {margin-left: 0px;} @-moz-keyframes movement-left {from {} to {margin-left: '+-margin+'px;}} @-moz-keyframes movement-right {from {} to {margin-left:0px;} @-ms-keyframes movement-left {from {} to {margin-left: '+ -margin +'px;}} @-ms-keyframes movement-right {from {} to {margin-left: 0px;}} @-o-keyframes movement-left {from {} to {margin-left: '+ -margin +'px;}} @-o-keyframes movement-right {from {} to {margin-left: 0px;}} @-webkit-keyframes movement-left {from {} to {margin-left: '+ -margin +'px;}} @-webkit-keyframes movement-right {from {} to {margin-left: 0px;}} </style>');

.Icons वर्ग के साथ तत्व बनाएँ:

 for(var i=0;i<x;i++){ if(i%2==0){ $("#body").append('<div style="background-position:'+y+'px 0;" class="icons move-left">'); } else{ $("#body").append('<div style="background-position:'+y+'px 0; margin-left: '+ -margin +'px" class="icons move-right">');}y+=z;} });

जब केवल पृष्ठभूमि-स्थिति बदली जा सकती है तो मार्जिन क्यों बदलें:

इस मामले में, पृष्ठभूमि-स्थिति में इंगित अंतिम स्थिति की दूरी सभी तत्वों के लिए अलग-अलग होगी, साथ ही साथ आंदोलन की गति भी। क्या एनीमेशन भयानक लग रहा है

सिकाडा का सिद्धांत

एक एनीमेशन का उपयोग करके इस उदाहरण को लागू करना संभव है, जिसमें केवल पृष्ठभूमि-स्थिति बदल जाएगी। इस मामले में, आपको सिकाडा के अद्भुत सिद्धांत का उपयोग करने की आवश्यकता है (इस पर अधिक लिखा गया है )। फिर एनीमेशन के रिवर्स आंदोलन को निर्दिष्ट करें।

ध्यान देने के लिए आप सभी का धन्यवाद।

क्रॉस-ब्राउज़र रिवर्स CSS3 पृष्ठभूमि एनीमेशन

Jsfiddle उदाहरण

एचटीएमएल

सीएसएस

जावास्क्रिप्ट

सिकाडा का सिद्धांत

More articles: