Menu
i'm trying to create a website with video content and i want to have a horizontal selection of cover pictures on the main page, like netflix does.
Which means lots of pictures which spread over the screen size and will scroll via mouseover arrows on the right / left side of the screen.
Screenshot:
http://cdn3-i.hitc-s.com/180/netflix_redesign_70590.jpg
Does anyone know how to create that? I'm using Dreamweaver and Muse, got some basic html and css skills, used a bit of jquery code, but i'm not quite firm with it yet.
Bye, Robert
873
Start with some basic CSS styling:
This will cover the basic look and feel of Netflix:
body {
background: #141414;
}
#hold_images {
display: inline-block;
white-space: nowrap;
}
#icon_right {
right: 20;
cursor: pointer;
margin-top: -200px;
position: fixed;
}
#icon_left {
left: 20;
cursor: pointer;
margin-top: -200px;
position: fixed;
}
.transition {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
img {
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
cursor: pointer;
}
Add a div to your body to hold the images:
<body>
<div id='hold_images'></div>
</body>
Use jQuery to handle the image and icon appending, image hovering, and smooth scrolling:
The images are captured screenshots saved to an img folder, and a library was used for adding the chevron icons but you can use whatever.
images = {
"1" : "img/1.png",
"2" : "img/2.png",
"3" : "img/3.png",
"4" : "img/4.png",
"5" : "img/5.png",
"6" : "img/6.png",
"7" : "img/7.png",
"8" : "img/8.png",
"9" : "img/9.png",
"10" : "img/10.png"
}
Object.keys(images).forEach(function(path) {
$('#hold_images').append("<img class='my_img' width=200 height=400 src=" + images[path] + ">");
});
$('body').append("<i id='icon_right'></i>");
$('body').append("<i id='icon_left'></i>");
add_icon('#icon_right', 'fa fa-chevron-right', '40px', 'white');
add_icon('#icon_left', 'fa fa-chevron-left', '40px', 'white');
$(document).ready(function(){
$('.my_img').hover(function() {
$(this).addClass('transition');
}, function() {
$(this).removeClass('transition');
});
});
$(document).on('click', '#icon_right, #icon_left', function() {
if($(this).attr('id') == 'icon_right') {
$('body').animate({scrollLeft: 1000}, 800);
} else {
$('body').animate({scrollLeft: -1000}, 800);
}
});
Result:
NOTE: You don’t need the ‘add_icon’ function above. You can simply add your own buttons or icons for the left and right events.
116
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
