Discovershadow.com by Raffael Stüken has been awarded site of the day by the prestigious AWWWARDS on the 19th May 2013.
Discovershadow.com is a one page website promoting a new iPhone app which will help you to remember your dreams. And with this innovative app comes also an innovative website full of little details.
Even though this is only a one page website, the amount of details and clever effects is enormous.
Take this and my other deconstructions as an inspiration for your next project and a simple way to learn new coding techniques.
1. Zoom in background image on scroll
First thing which probably wows you is the zoom-in effect on the main cloud image. Very nice effect achieved with a clever use of CSS and jQuery.
<div class="sectionWrapper"> <div id="splashImages" style="opacity: 1;"> <div class="backImg"> <img src="img/shadow_back_1.jpg" alt="shadow" id="img1" style="width: 1241px; height: 1242px; left: 0px; top: -210px;"> </div> </div> </div>
.sectionWrapper {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.backImg, .backImg img {
position: absolute;
top: 0;
left: 0;
}
While you are scrolling, jQuery does resize the img#img1 and changes the top and left offset to give the impression that you are zooming into the middle of the img#img1. Opacity of the div#splashImages is also reduced to achieve a fade out while scrolling effect.
2. Page Frame
Most designers these days are trying to use large displays and full-screen layouts, but this website does the opposite and puts the main content in an elegant page border.
Doing the opposite than the current trends might be a bit risky, but in this case it definitely paid off.
<body> <div id="wrapper"> <section class="startFull">First Section</section> <section class="full">Second Section</section> </div> <div id="nav">...</div> <div id="borderTop">...</div> <div id="borderBottom">...</div> </body>
#wrapper {
margin: 50px;
}
#borderTop, #borderBottom {
width: 100%;
height: 50px;
background: #fff;
position: fixed;
top: 0;
}
#nav {
position: fixed;
right: 2.5%;
top: 50%;
margin: -100px -4px 0 0;
}
#wrapper has margin 50px applied to it and #borderTop,#borderBottom and #nav are positioned on top of it.
To push it even further the developers decided to adjust the thickness of the border based on the window size. This is achieved with the following jQuery code.
var border = 0.05; // 5%
var f1 = 1.4;
var winH, winW;
var borderW;
$(document).ready(function(){
// Cache objects
$wrapper = $('#wrapper');
$bT = $('#borderTop');
$bB = $('#borderBottom');
// get window dimensions
adjustWindow();
$window.resize(function() {
//adjust width page border on window resize
adjustWindow();
});
});
// set image and window dimensions
function adjustWindow(){
// get window size
winW = $(window).width();
winH = $(window).height();
if(winH <= 440) {
winH = 440;
}
// set margin
borderW = Math.floor(winW * border);
if(borderW <= 20) {
borderW = 20;
}
// set fullscreen sizes
$('section.full').height(winH);
$('section.startFull').height((winH * f1));
// set frame
$bT.css({height: borderW+'px'});
if(borderW <= 40) {
$bB.css({height: '40px'});
} else {
$bB.css({height: borderW+'px'});
}
$wrapper.css({margin: borderW+'px'});
}
3. Fixed overlapping images
To showcase the design and functionality of the iPhone app, the designer decided to use a creative fixed positioning.
Each section div.secAppfunc has a background image applied to it through css background property with a value of “center center fixed“. This locks the image in the centre of the window and reveals a background image of the next section when you scroll to it.
<section id="secAppfunc1" class="secAppfunc full sec6 inView" style="height: 526px;"> <div class="sectionWrapper"> <div class="appImg rightApp"></div> </div> </section> <section id="secAppfunc2" class="secAppfunc full sec6 inView" style="height: 526px;"> <div class="sectionWrapper"> <div class="appImg leftApp"></div> </div> </section>
#secAppfunc1 .appImg {
background: #222 url(img/shadow_iphone5_01-big.png) center center no-repeat fixed;
}
#secAppfunc2 .appImg {
background: url(img/shadow_iphone5_02-big.png) center center no-repeat fixed;
}
.appImg, .appIcon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Position fixed works little bit different on touch devices and in most cases it is wiser decision to turn it off for these devices.
Discovershadow.com uses Modernizer to detect touch devices and adjusts the style accordingly.
body.touch .appImg {
background-attachment: scroll !important;
}
Conclusion
Discovershadow.com is full of other CSS3 and jQuery goodness so let me know if would like to deconstruct another cool stuff from this website.
If you enjoyed reading this, you might also like a similar deconstruction of harrys.com, another website awarded “Site of the Day” on Awwwards.com.
Like What You're Reading?
Sign up to receive my future tutorials and demos straight to your inbox.
No spam, Unsubscribe at any time.