From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
Today we’d like to share an experimental responsive layout with you. Initially, the layout shows four flexible boxes. When clicking on a box, it will expand to fullscreen and the others will scale down and fade out. When closing the current view, it will move back to the intial position while the other boxes come back up again. Another type of page transition can be seen on the works section where we will show a portfolio item by sliding in a panel from the bottom. The current view gets scaled down and disappears in the back.
All effects are done with CSS transitions and controled by applying classes with JavaScript. The whole layout is flexible and some media queries are added to size down things for smaller screens.
The beautiful illustrations used in the works section of the demo are by talented Isaac Montemayor.
Let’s take a look at some screenshots:
The initial screen has the four flexible boxes. Resize the browser window to see them adapting fluidly.
When clicking on a box, it get’s expanded to fullscreen.
The view of a box that is expanded. A content are is revealed and we add a scroll to it when needed.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
In the works section, we add a thumbnail grid which will reveal a details panel once we click on an item. The page transition here is the new item sliding in from the bottom and the old view scaling down and disappearing in the back.
The navigation through the items has the same page transition. When we close the item view, it will transition back down and the works view will scale back up again.
We hope you like this little experiment and find it inspiring!
Really nice job!
Hi Mary,
it’s a great page. thanks for inspiration. hopefully you will submit next great idea. thanks.
GOEDZO! thanks for sharing your awesome work 😉
I like it. It’s simple yet beautiful. I love the color harmony.
IE ‘question mark’? Why do people still hate on it? If you’re compliant IE 10 will work just fine, and IE 9 may if you’re not using anything too outrageous… Disclaimer: haven’t looked at the source yet.
Works on my WP8 version of IE10.
At least treat the browser like a first class citizen; as of 10 it can hold it’s own reasonably well..
AWSM! Thanks.
in regards to your browser support, this actually works in ie10, and has an error in the latest firefox.
What version of firefox are you using? It works great in firefox 21.
how do i change the icons?
I want to use some .png files instead.
H i _ ! ! !
. . . what to say . . .
. . . inspiring . . . “As Always” . . . @Mary Lou
After so much [ S t e a l i n g ]_ my first written “silly” & “easy” contribution
To avoid Standard scrollbars, use this (just webkit browsers).
Ty , Ichtyo
::-webkit-scrollbar { width: 12px; } /* Track */ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; /*background: rgba(255,0,0,0.8); */ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }Thanks ichtyo – that makes it look much better.
. . . you_R_welcome
P.S.
. . . 4_the_Rookies: tht code goes into the css
^__^
In reply to this awesome solution for the scrollbar (kudos, ichtyo!), I tweaked it a little to fit the style of “X” buttons perfectly:
::-webkit-scrollbar { width: 10px; } /* Track */ ::-webkit-scrollbar-track { background-color: rgba(255, 255, 255, 0.2); -webkit-border-radius: 10px; border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: #FFF; } ::-webkit-scrollbar-thumb:window-inactive { background: #DDD; }Hi Mary,
I love Your fantasy and I would like to use this demo for my portfolio site. Please help me, because it does not work in ie 8, 9. And it is problem for me, because a lot of people use older browsers in my site. I use Analytics and it show me browsers versions.
Thanks, for Your answer.
Marion
how do i add an esc key function? and where would i add it? thanks!
In response to your reply on my earlier comment – you can add the keydown function just about wherever you want to be honest. I’d advise putting it just before the closing body tag in the html – so the html would look like:
$(document).on(‘keydown’, function(e){
if (e.keyCode === 27){
$(‘span.bl-icon-close’).click(); }
});
It won’t just send you back one page – it’ll take you back to the home page bit each time because it will act as though you are clicking on every one of the closing tags at once (because they all have the same class). If you want it to just send you back one step then you’ll have to play about with some if functions.
Sorry – my other comment didn’t put the html tags in (I forgot that they weren’t allowed). I always put my jquery just before the closing body tag:
*script*
$(document).on(‘keydown’, function(e){
if (e.keyCode === 27){
$(‘span.bl-icon-close’).click(); }
});
*/script*
*/body*
(in place of * use the arrow keys where you normally would)
I have created a fork of this project on github where I have integrated the escape button funcionality. Hopefully it will get merged into this 🙂
Find it here: https://github.com/jnsnlssn/FullscreenLayoutPageTransitions
BY FAR…. The coolest Web Interface I have seen thus far on the Internet…. This could open up so many possibilities for design!
MARY LOU: THIS GIRL IS ON FIRE !!!
Awesome nav plugin! I’m using it.
Can I go from one panel to other panel in expanded view?
Hi, I’m sorry if I’m posting this once again. It’s just that the first one didn’t go through somehow.
Anyway, is there anyway that I can add “Previous Project” in the image slides? This will be very convenient if there are more than 10 images.
By the way, this works perfectly fine with Internet Explorer 9. I’ll update after I try with 8.
Hope somebody give me some solution. Thanks.
Can I use or open the script in a tablet or touch based device like iPhone, Samsung Galaxy Tab or touch enabled laptop with WIndows 8? Thanks. This is awesome. I really want to use it there.
Is there a way to start out with one of the sections expanded (i.e. About or Works) on page load, then clicking the close button will return to four boxes/nav?
Hello,
This script works quite well on my android phone. Nice transition effects.
However i have an issue with scrollbars wich wouldn’t work while i’m scrolling with my finger.
Is there a way I can have them efficient ?
Thank you
Scrolling does not work for Android when using the overflow: auto/hidden property. It’s a bug. There is a workaround solution here:
http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/
You simply pass the id of the element you want to be able to scroll, however; that is not very efficient for this project because you’ll have to call the function everytime and pass it an id for each element you want to have the scrolling ability since the solution assumes you only have one element you need to have scroll.
You could try to modify the solution by referencing a class name instead of an id. Maybe use jQuery’s .on() method (with the newer jQuery source).
Thank You Lou,
I will try and let you know the result.
Have a good day.
Really AWESOME!
Anyway to just start from the Works page and not have the main page with the 4 boxes?
thanks, Mary
Hi,
How to add two more boxes.
Thanks
Hi – This is beautiful code!!
But i am a beginner.
can you explain to me how the content is intially hidden behind the box?
I would like to reduce the intial size of the four boxes but still have them open to a %100 width and %100 height.
when i reduce the container size the pages are no longer full screen and i would like them to be
is there anyway to add a back button when viewing the individual portfolio projects? along with the next button, i would like to add a back button. how do i go about this?
I would like to use larger images in the Work section, but when seen on mobile the margins are too large. Where do I adjust those?
You can adjust your media styles at the bottom of the .css file
@media screen and (max-width: 46.5em) { .bl-content, .bl-box { font-size: 75%; } .bl-expand .bl-box { height: 130px; } .bl-content > ul li { width: 40%; } }just to add a bit of info:
@media is a media query and “and (max-width: 46.5em)” is the qualifier.
It’s basically saying “if the browser width is 46.5em or smaller then push the css below to the browser”
It’s intended for iPads and such as I’m sure you know.
It needs to be added last so that it can override any changes and as we all know css stands for cascading style sheet.
Hi, I like it very much!
One question though, has been asked before, but I don’t see an answer, is it possible to use different icons? Whether they are png, jpg or svg-files?
Thanks.
Hi Wouter,
First and foremost Mary Lou you’ve changed my life. The best I’ve ever seen. Thanks!
1: You can generate/download your icons from http://icomoon.io/app.
2: Unzip your downloaded file
3: Copy/past fonts folder to yoursite/where-fonts-ares/fonts/
4: Open component.css and change from line 170 your icons name to match the new ones
5: Update “lte-ie7.js” into yoursite/where-JS-ares/ with the one at the root of unziped file.
Hope this help.
edit: added in some code that fell out.
Hey Mary Lou,
I’ve been messing around with the js for a while now but can’t seem to get the —div class=”bl-panel-items” id=”bl-panel-work-items”— to duplicate correctly. I’m trying to style multiple —div class=”bl-panel-items” id=”bl-panel-work-items”—s, each dependent on which bl-box they come from.
Thanks nick, that helped! What about the work items themselves? Adjusting the media styles seems to have no effect on those. Only on the thumbnails themselves.
Hi, I like it very much! Very Cool work!
Is there a possibility to get it running with older browsers (IE8, 9)?
Thanks
Great Job ! Thx
Woww… simply amazing. I didn’t liked only 1 thing … the scroll bar in the Blog section.
Great, nice, smooth… simple… really nice… Thanks a lot for this great job.
I would like to know: how can I add other bouttons to go to the home or to the gallery?
Thank you very much
Hello, excellent work!
Is it possible to simulate the hover effect when hovering a menu (in a different part of the page)?
I managed to simulate the click by doing the code below but the same “logic” doesn’t work (nothing happens) with hover.
$("#menuItemID").on('click', function() { $(".bl-expand").children('.bl-icon-close').trigger('click'); $('#idOfInnerSpan').trigger('click'); });Great example!
I extended it to work with a jekyll layout. The Repo is here.
I´m experimenting with this using a WordPress framework and got it to work with 6 boxes also. Question: Does anybody know a polyfill to make the page-transitions (translateY and similar) work in older browsers, too (especially IE of course, urgh…)?
SiGa.
Have you got this into WordPress as it’s own theme? I would be sooo interested in that….
Can this be used in WordPress?
Wow, Mary Lou! I must say that you continually impress and me and have inspired me to take my understanding of javascript and css to the next level. Also, how awesome would this be combined with the Gamma gallery? Off tha hook! Thanks again! You are the best! 🙂
Hello,
I’m new here and was wondering if it was possible to change the icons? How would I go about it?
thank you
Amazing example!
what if I want to make 6 boxes?
and each box is the same style with the box “work” (can display images, and each image description)
I tried to multiply the id ‘work-items’ but it doesn’t work
and I can not make a responsive 6 boxes stack ( I tried to modified the nth child- and it doesn’t work too 🙁 _
can anyone help me? thank you in advance
! bad english sorry
make these changes in css and put two more div
.bl-main > section {
position: absolute;
width: 32%;
height: 48%;
}
.bl-main > section:first-child {
top: 0;
left: 0;
background: #F06060;
}
.bl-main > section:nth-child(2) {
top: 0;
left: 33%;
background: #FA987D;
}
.bl-main > section:nth-child(3) {
top: 0%;
left:66%;
background: #72CCA7;
}
.bl-main > section:nth-child(4){
top: 50%;
left: 0;
background: #F06060;
}
.bl-main > section:nth-child(5) {
top: 50%;
left: 33%;
background: #FA987D;
}
.bl-main > section:nth-child(6) {
top: 50%;
left:66%;
background: #72CCA7;
}
🙂
hi! truly inspiring stuff!
one thing i could need a piece of advice on though:
in the works section the close button is on the top-right corner:
.bl-main > section .bl-icon-close {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
z-index: 100;
opacity: 0;
pointer-events: none;
}
how can i apply this same positioning (top right) to the close button and ‘next project’ link for the individual work? – i.e.:
div.bl-panel-items nav {
position: absolute;
z-index: 9999;
width: 216px;
left: 50%;
top: 0px;
margin-left: -108px;
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out 0.5s;
-moz-transition: opacity 0.2s ease-in-out 0.5s;
transition: opacity 0.2s ease-in-out 0.5s;
}
have tried a good number of things with this – any help appreciated!
I see that the ‘top’ value here can be manipulated to move the individual works’ close buttons around:
div.bl-panel-items.bl-panel-items-show nav {
opacity: 1;
top: -70px;
}
however it isn’t ideal, as it does not match the position of the other close button, and gets really messy on browser re-size!
Thank you for this great design. Again I learn a lot in website creations. Ik do have a question though: Has anyone used Lightbox in this design? I’ve tried to get it in here but for some reason it keeps refusing whatever I try to do. Because I’m not a pro I might be doing something silly so any help would be appreciated.
Hi!
I tried to change just the font from the texts in the home page but i couldn’t.
It’s possible to have the icons with the icomoon font and the texts with another font?
Thanks!
Thank you for a great sample!
I want to work section all four.
Where to do I change?
this is the good effort of u ….. thanks to giving these ……for free………
guys, any idea why google maps iframe works but youtube or vimeo iframes does not ?
Arg, i meant first at all thanks ?lic! Girl you rock as always 🙂
Beautiful work Mary Lou! I modified nth-child parameters to create version with equal columns, check the alternative at codepen http://cdpn.io/npKqu
Hi,
I tried experimenting with this layout. However, i have trouble writing
<a>tags in the html file. Whenever I try putting a link, it always have the index.html file as its base url. Any idea how to correct that?thanks
I’m very thankful to you for this wonderful code…
but i’m having a problem using this design , i’m applying form inside a box and submit button doesn’t work in that …
as i click on Submit the page Reloads , Please help me out…
Awesome code, i hope you add contact form at section contact ..
Thanks for your great work!
I tried to put a flash content in the details panel. I am able to see my flash content but the interaction in my flash content doesn’t work. Do you know why?