javascript - Making a smooth, dynamic website -
i seeking create website smooth layout, dynamic , not blam, heres website.
let me elaborate: got setup now, can figure trying working. 
what mean dynamic is, want when page have been loaded image come sliding in (maybe banner too, haven't decided design yet, throwing suggestions.). when image have slided in expanding , despanding slowly, it's in movement. when hovered on should expand more , stop it's movements while hovered.
this main needs searching for, , little clueless on how done. thinking javascript obvious, i've failed guides i've found , therefore belive need direct help.
highly appreciated, thanks!
i've tried making image fade in , out jquery, doesn't seem work, heres code:
<!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { background: url("images/bg.png") repeat; } .logo { width: 640px; height: 360px; position: absolute; top: 0; left: 0; right: 0; bottom: 40%; margin: auto; text-align: center; } .middlebanner { width: 100%; height: 60%; position: absolute; top: 0; left: 0; right: 0; bottom: 100%; margin: auto; text-align: center; } </style> <!-- place favicon.ico , apple-touch-icon(s) in root directory --> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <script src="js/vendor/modernizr-2.7.1.min.js"></script> </head> <body> <!--[if lt ie 8]> <p class="browsehappy">you using <strong>outdated</strong> browser. please <a href="http://browsehappy.com/">upgrade browser</a> improve experience.</p> <![endif]--> <!-- add site or application content here --> <title>electronic future copenhagen - choose game</title> <img src="images/middlebanner.png" class="middlebanner" /> <img src="images/logo5.png" class="logo" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script>window.jquery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script> <script src="js/plugins.js"></script> <script src="js/main.js"></script> <a href="http://jquery.com">jquery</a> <script src="jquery.js"></script>" <!-- google analytics: change ua-xxxxx-x site's id. --> <script> $( document ).ready(function() { $("#logo").animate({ left: "300" }, { duration: 2000 }); $( "#logo" ).hover(function() { $( ).fadeout( 100 ); $( ).fadein( 500 ); }); }); </script> </body> </html>
here little fiddle on way...
just animate divs , images etc desired effect.
$(document).ready(function () { $("#efclogo").animate({ left: "300" }, { duration: 2000 }); }); added hover on function can see how works too.
$( "#efclogo" ).hover(function() { $( ).fadeout( 100 ); $( ).fadein( 500 ); }); updated fiddle
Comments
Post a Comment