vendredi 24 mai 2013

HTML/CSS for fixed background image and a nice scrolling effect

As I was looking some news about the next XBox on http://www.wired.com/gadgetlab/2013/05/xbox-one/ I found the web page design and scrolling effect really nice. And I'm wondering if that kind of effect required JS or if it only use CSS. Note that I'm not a web developer, but just as usual curious of "how it works ?" ...

In fact after inspecting the page (thank you to the Firefox Inspector ! a nice functionality) I found that a small piece of CSS is enough and than the main trick is in the size of the image !!!!

Look at the following image they use http://www.wired.com/images_blogs/gadgetlab/2013/05/0521-tall-controller-v1.jpg. It's a 1050x2000 pixels image.

Below I tested the insertion on their image (Thank you Microsoft ...) to do the same in the middle of a fake text ....


#container div.fixedbackgroundimg {
position: relative;
overflow: visible;
}
.fixedbackgroundimg.example {
background: url("http://www.wired.com/images_blogs/gadgetlab/2013/05/0521-tall-controller-v1.jpg") repeat-y fixed 50% center transparent !important;
}

<div class="fixedbackgroundimg example" data-type="background" data-speed="5">
<h2 class=""> test </h2>
<img src="http://www.wired.com/images_blogs/gadgetlab/2013/05/0521-tall-controller-v1.jpg" style="visibility: hidden; height: 500px" data-lazy-loaded="true"></img>
</div>


The trick is to create a div containing an hidden image, or with a fixed width and height, and in the style of that div, you specify a background image bigger than the div and centered inside !

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus




Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Aucun commentaire :

Enregistrer un commentaire