एचटीएमएल 5/CSS3 - "अंतहीन" घूर्णन पृष्ठभूमि कैसे बनाएं - 360 डिग्री पैनोरामा

Question

मेरे पास शहर के 360 डिग्री दृश्य (9 000 पीएक्स द्वारा 1000 पीएक्स) के साथ एक जेपीजी छवि है। मुझे अंतहीन रूप से घूर्णन पृष्ठभूमि के साथ एक पृष्ठ बनाने की आवश्यकता है - उदाहरण के लिए उपयोगकर्ता को वेबकैम घूर्णन का एक प्रभाव प्रदान करना।

पहला भाग - छवि के बाईं ओर से दाएं से स्क्रॉल करना बहुत आसान है - बस jQuery.animate (...) का उपयोग करें। लेकिन मैं छवि की शुरुआत के लिए निर्बाध रूप से कैसे लौट सकता हूं (इसके बाद 35 9 डिग्री की बारी पूरी हो गई है), तो उपयोगकर्ता को "कूद" या ऐसा कुछ नहीं दिखाई देगा?

क्या वेब पर शायद कोई उदाहरण है?

मैं केवल HTML5/CSS3 (वेबकिट) ब्राउज़र को लक्षित कर रहा हूं, और मैं नवीनतम jQuery का उपयोग कर सकता हूं।

धन्यवाद।

Answer 1

घूर्णन पृष्ठभूमि के पीछे मुख्य विचार यह है कि आप दो छवियों आकर्षित है। आप समय के साथ x बढ़ा सकते हैं, और जैसे ही x === w आप x = 0 रीसेट कर सकते हैं। आप इस रीसेट को दृष्टि से नहीं देख पाएंगे क्योंकि दूसरी छवि को पहले की स्थिति में सटीक स्थिति में रखा गया है। रीसेट करने के बाद, आप फिर से शुरू कर सकते हैं, ताकि घूर्णन अंतहीन दिखता है।

(मैं दो छवियों width of container <= width of image संभालने उपयोग कर रहा हूँ।)

आप इस्तेमाल कर सकते हैं जैसे: .:

• कैनवस: http://jsfiddle.net/yQMAG/। यह एनीमेशन मेरी मशीन पर थोड़ा झटकेदार है।
• CSS3 एनिमेशन: http://jsfiddle.net/k5Bug/।

Answer 2

यदि आप केवल वेबकिट-ब्राउज़र को लक्षित कर रहे हैं, तो आप इसे केवल CSS3 के साथ पूरा कर सकते हैं। CSS3 ने एनिमेशन के लिए अंतर्निहित समर्थन किया है। यात्रा गिनती संपत्ति के साथ 'अनंत' निर्दिष्ट करके, अपने एनीमेशन हमेशा के लिए और कभी पर जाना होगा और ... आप बिंदु ;-)

@-webkit-keyframes rotateEndlessly 
{ 
    from 
    { 
     -webkit-transform: rotate(0deg); 
     transform: rotate(0deg); 
    } 
    to 
    { 
     -webkit-transform: rotate(360deg); 
     transform: rotate(360deg); 
    } 
} 

img 
{ 
    -webkit-animation-name: rotateEndlessly; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 

} 

और निश्चित रूप से, अपने HTML में छवि प्राप्त:

w छवि की चौड़ाई होने के साथ (x - w, 0) पर (x, 0) पर और दूसरा:

<img src="image.jpg" alt="image" /> 

Answer 3

वहां समाधान हैं कि वे "छवि-सिलाई" कहते हैं जिन्हें लोगों ने प्लगइन बनाया है।

http://www.jquery4u.com/plugins/jquery-360-degrees-image-display-plugins/

यह एक भी मोबाइल के लिए महान काम करता है। http://spritespin.ginie.eu/examples.html

Answer 4

आप पृष्ठभूमि स्थिति और jQuery चेतन समारोह के साथ खेल सकते हैं, उदाहरण देखें:

http://jsfiddle.net/DG8PA/3/

एक अंतहीन पृष्ठभूमि ले लो और पूरा घटना सेट में पृष्ठभूमि की चौड़ाई के 0 से चेतन 0 की पृष्ठभूमि स्थिति और एनीमेशन के लिए एक और बार आग।

Answer 5

आप इस तरह के "चारों ओर देखो" प्रभाव प्राप्त करने के लिए CSS animations का उपयोग कर सकते हैं - लंबन के लिए बढ़िया!

इसके बजाय कई छवियों को जोड़ने और एनिमेट की

उनके left आदि, तो आप सिर्फ एक पृष्ठभूमि सेट और चेतन सकता है इसके background-position:

#bgscroll { 
    background:url(/*some nice seamless texture*/); 
    -moz-animation-duration: 13s; 
    -moz-animation-name: bgscroll; 
    -moz-animation-iteration-count: infinite; 
} 
@-moz-keyframes bgscroll{ 
    from {background-position: 0 0;} 
    to {background-position: 100% 0;} 
} 

इस नए छिपकली/क्रोमियम ब्राउज़रों (w/विक्रेता उपसर्ग समायोजित) के साथ काम करेगा; fiddled

Answer 6

आप CSS3 एनीमेशन का उपयोग कर jquery के बिना ऐसा कर सकते हैं। मुझे लगता है कि शहर की पृष्ठभूमि छवि को कंटेनर पर निर्बाध रूप से दोहराने के लिए सेट किया गया है।

आप पृष्ठभूमि छवि को दोहराने योग्य छवि की चौड़ाई को एनिमेट करने के लिए अपने कीफ्रेम सेट अप करते हैं और बिना किसी देरी के असीमित रूप से लूप को बताते हैं। उदाहरण के लिए, मेरी बहने बादलों छवि है 1456 पिक्सल चौड़ा और दोहराता एक्स:

@keyframes DriftingClouds { 
    0%  { background-position: 0 0; } 
    100% { background-position: -1456px 0; } 
} 

#wrapper { 
    background: url(/images/clouds.png) repeat-x 0 0; 
    animation: DriftingClouds 165s linear infinite; 
} 

आप सेट सुनिश्चित करें @ -webkit-मुख्य-फ़्रेम, @ -moz-मुख्य-फ़्रेम, @ -ओ-मुख्य-फ़्रेम और -webkit-एनीमेशन, - एमओएस-एनीमेशन, -ओ-एनीमेशन एफएफ, सफारी और क्रोम को कवर करने के लिए समान है।

http://jsfiddle.net/JQjGZ/