I am in the process of designing a website that has a sleek and dynamic layout, rather than just a static homepage.
Let me explain further: Here is my current setup so you can understand what I am trying to achieve.
By dynamic, I mean that when the page loads, I want the images to slide in (perhaps including the banner, although I haven't finalized all the design details yet). Once the image slides in, I would like it to smoothly expand and contract, as if it's always in motion. When hovered over, it should expand slightly more and pause its movements while being hovered.
These are the key features I am looking for, and I'm a bit lost on how to implement them. I thought JavaScript was the obvious choice, but I've struggled with any guides I've come across and now feel I need some direct assistance.
Your help is greatly appreciated, thank you!
I have attempted to create a fading effect for the image using jQuery, but it doesn't seem to be working. Here is the code snippet:
<!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>
<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>
<!-- Add your site or application content here -->
<title>Electronic Future Copenhagen - Choose your 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>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
$( document ).ready(function() {
$("#logo").animate({
left: "300"
}, {
duration: 2000
});
$( "#logo" ).hover(function() {
$( this ).fadeOut( 100 );
$( this ).fadeIn( 500 );
});
});
</script>
</body>
</html>