एचटीएमएल 5 बिंग

Question

में साफ सामग्री संक्रमण हाल ही में मैंने आईई 9 के लिए बिंग में और सफारी 5 के लिए भी एक अच्छा प्रभाव देखा है। जब आप खोज बॉक्स पर एंटर दबाते हैं, तो खोज बॉक्स पेज के शीर्ष की तरफ बढ़ता है और परिणाम नीचे से गुना है। आप इसे यहां कार्रवाई में देख सकते हैं ... http://www.youtube.com/watch?v=NYuLALX6aeI#at=69

मेरा सवाल है, यह कैसे किया जाता है और मैं यह कैसे कर सकता हूं? मुझे आशा है कि आप मेरे प्रश्न को समझ सकते हैं।

Answer 1

बुनियादी विचार:

JQuery:

$('#go').click(function() { 
    $('#form').animate({ 
     'height': '80px', 
     'text-indent': '50px', 
     'padding-top':'20px' 
    }, { 
     queue: false, 
     duration: 1500, 
     complete:function(){ 
      $('html,body').css('overflow-y','visible'); 
     } 
    }); 
    $('#results').show({ 
     type: 'slide', 
     direction: 'up' 
    }, { 
     queue: false, 
     duration: 1500 
    }); 
}); 

सीएसएस:

#form { 
    background-color:blue; 
    text-indent:300px; 
    width:100%; 
    height:100%; 
    padding-top:200px; 
} 

#results { 
    background-color:yellow; 
    display:none; 
    height:700px; 
} 
body, html { 
    width:100%; 
    height:100%; 
    overflow:hidden; 
} 

HTML:

<div id="form"> 
    <input type="text" /> 
    <input type="button" id="go" value="go" /> 
</div> 
<div id="results">Search results</div> 

डेमो: http://jsfiddle.net/AlienWebguy/hwAtU/

Answer 2

वे सभी CSS3 के एनीमेशन का उपयोग कर रहे हैं। मैंने एनीमेशन here के साथ एक बहुत ही सरल खोज बॉक्स को झुकाया कृपया क्रोम या सफारी का उपयोग करें। बस कुछ टाइप करें और एंटर दबाएं।

सीएसएस

body{text-align:center; padding: 200px 0;-webkit-transition: all 0.4s linear;} 
#search{-webkit-transition: all 0.2s linear;} 
#search:focus{-webkit-transform:scale(1.4);} 

एचटीएमएल

<input type="search" placeholder="Search..." id="search"/> 

जे एस:

document.getElementById('search').addEventListener('keydown', function(e){ 
    if(e.keyCode == 13){document.body.style.padding = "40px";} 
}, false); 

स्थिति और एनीमेशन के लिए जावास्क्रिप्ट का उपयोग करना एक अर्थ कोड नहीं है। सीएसएस एनीमेशन रास्ता तेज़ और चिकना है।