From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
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!
Fantastic work!
I tried to put a header at the top of the page with a logo and some text.
I want that this logo and this title to resize automatiquely (bigger or smaller) depending on the browser window dimension.
Can someone help me! Please!
Thank you.
You just have to create a @media property on css, that resizes depending on the viewport size. Try to search on google. Is something like:
.target {
margin-top:70px;
@media (min-width: 992px) {
.target {
margin-top: 30px;
}
Hello, I was wondering if there is any way to put more works by row on the work page, I looked at the CSS and didn’t seem to find a way to do it.. Cheers !
Hi! There seems to be something wrong with the Works section. Whenever I click on the sixth (and more) photos, the individual work items won’t display properly. But it works just fine (the individual work items, with enlarged pictures and description, show up) for photos 1 through 5. What gives?
Hi.
Its been asked before but how would i position the close box in the projects panels at the top right, the same as the main sections ??
Mary Lou your articles are never less than stunning.
Many thanks 🙂
xx
Amazing work! To make it fully compatible with IE10 you can just add visibility:hidden; to the:
.bl-content,
div.bl-panel-items > div > div {
opacity: 0;
pointer-events: none;
position: absolute;
top: 37px;
left: 29px;
right: 30px;
bottom: 30px;
padding: 0 20px;
overflow: hidden;
overflow-y: auto;
}
and visibility:visible; to:
section.bl-expand .bl-content,
section.bl-expand .bl-icon-close {
pointer-events: auto;
opacity: 1;
-webkit-transition: opacity 0.3s linear 0.5s;
-moz-transition: opacity 0.3s linear 0.5s;
transition: opacity 0.3s linear 0.5s;
}
It will get rid of the mouse events ‘falling’ through div’s.
Excelente tutorial, queria hacer algunas preguntas:
1- Como cambiar la fuente que figura debajo de los iconos?
2- En la seccion de WORKS como poder agregar mas de 4 que son lo que vienen por defecto?
3- Como se podria insertar imagenes en otras partes del sitio y no solo en WORKS?
Muchas Gracias. Thank You Very Much.
Beautiful.
Hi, this is an awesome concept for a user that doesn’t want to be bombarded with image overload. However, I find that even though it scales for mobile, it’s not scrolling at all on Android.
Hey m8, great template !!!
I have one question … is there a way to ad a previous project button ?
Tyvm,
RobertG
I know it’s been almost two years since you asked this question, but I thought I’d chime in in case you or someone else might find it useful. Like others here, I also started using this as the base for my portfolio site. I figured out a way to add a previous link by adding the code below to boxlayout.js. Just copied the “next” code, and rejigged one of the lines a little. To have it loop around properly, you need to set the last number to the total number of work panels you have (-1). Hope this helps.
And Manoela, I’d also like to thank you for this, and all the awesome stuff you share on this site.
********************
First, under:
// navigating the work panels $nextWorkItem = $workPanelsContainer.find( 'nav > span.bl-next-work' ),add:
$prevWorkItem = $workPanelsContainer.find( 'nav > span.bl-prev-work' ),Then you can add the following under the main block of “next” code:
// navigating the work items: current work panel scales down and the previous work panel slides up $prevWorkItem.on( 'click', function( event ) { if( isAnimating ) { return false; } isAnimating = true; var $currentPanel = $workPanels.eq( currentWorkPanel ); currentWorkPanel = currentWorkPanel > 0 ? currentWorkPanel - 1 : 8; // edit this number to your total number of panels -1 var $prevPanel = $workPanels.eq( currentWorkPanel ); $currentPanel.removeClass( 'bl-show-work' ).addClass( 'bl-hide-current-work' ).on( transEndEventName, function( event ) { if( !$( event.target ).is( 'div' ) ) return false; $( this ).off( transEndEventName ).removeClass( 'bl-hide-current-work' ); isAnimating = false; } ); if( !supportTransitions ) { $currentPanel.removeClass( 'bl-hide-current-work' ); isAnimating = false; } $prevPanel.addClass( 'bl-show-work' ); return false; } );Amazing Work!
I love it. I want to make it the foundation of my new portfolio. I’m wondering if it possible to use .load() for loading content into work panels. I’m experimenting with that but there’s an issue with CSS transitions applied to an element loaded with Ajax.
very cool work!
I just wondering how to increase sections
Anyone can help?
How do i change the panel items to image instead of a fix colour?
Hello Miss, I love your work, its truly awesome. All your CSS work is flawless, you are my inspiration.
Great work. But I have some question. I actually look at the CSS and never found the solution.
Which of the code that makes the content hide and open when clicking the box?
this will help me
thanks
Hey, great article, I love the result.
Just one question: how can I get the “blog” and “works” section to work along with wordpress?
Thanks
Also how to include an email form? After refreshing the page is returns to the index screen. Any solution?
Excellent
I see four sections, but I need six. How can I add two more ?
i am in also this problem
you will the way and tell them
thankz
Hi Manoela,
We’re using your fullscreen layout Page Transitions code as a base for our html site which will be converted to an ipad app that acts as a product catalog. We have four levels – top level is the four boxes, each of which goes to a menu level (2) that has icons for each product. Each icon links to level 3 which is a static banner image of the product and three icons linking to level 4 pages – Photos / Video / Documents. What we have found is that when we put a jQuery lightbox photo gallery for one product on level 4, we are not allowed to have more than one photo gallery (in other words – the same photo gallery is repeated for each product and the code can’t differentiate between a photo gallery for one product and another). Do you know why this might be and how we can fix this? Many thanks. 🙂
Hi Ben,
I was having this issue with one of my wordpress sites, Then I have found a solution for it.
We need to change lightbox ‘rel’ name for every image group.
i.e
group 1:
<a href=”images/image1.jpg” rel=”nofollow”>
<a href=”images/image2.jpg” rel=”nofollow”>
group 2:
<a href=”images/image3.jpg” rel=”nofollow”>
<a href=”images/image4.jpg” rel=”nofollow”>
<a href=”images/image5.jpg” rel=”nofollow”>
May be this will work for you.
Hi Ben,
I was having this issue with one my wordpress sites, and I’ve a solution for it.
You may want to add different ‘rel’ name for every image group.
group 1:
anchor tag href=”images/image1.jpg” rel=”lightbox[gallery1] (your image1 here) close anchor tag
anchor tag href=”images/image2.jpg” rel=”lightbox[gallery1] (your image2 here) close anchor tag
group 2:
anchor tag href=”images/image1.jpg” rel=”lightbox[gallery2] (your image1 here) close anchor tag
anchor tag href=”images/image2.jpg” rel=”lightbox[gallery2] (your image2 here) close anchor tag
anchor tag href=”images/image3.jpg” rel=”lightbox[gallery2] (your image3 here) close anchor tag
I hope this will work for you,
cheers.
Hi,
I really love this template and I am playing around to use it as my portfolio site.
There is one single flaw though. The css file it not mobile first which means that all the code for larger screens like tablet and desktop will be loaded when someone uses his smartphone to visit the site.
I use a blurred oversized background image for desktop and tablets in the body and all the expanded sections have a opacity of 0.7 and a different background color (gives a nice effect).
With the default css the background image will also be loaded by the user agent on a smartphone, because this uer agent goes through the complete css file untill it fiinds “it’s” part.
It would be even better, than it is already, when this would be changed with “min-width” media queries 🙂
But, like I said before, this is an awesome theme and I really love it!
Thnaks for showing and making it available for donwoad.
Regards,
Rob van Linda
Hi
Can anybody tell how can i add this effect in my existing child theme(attitude is parent theme)
Very useful nice demo
Hi
Grate job well dune
can you help with how to use iframe that will change every time i change the link
Hello, love the demo! But i was just wondering if there was a way to give every page its specific url? and still keep the same transitions?
Hey, love this project, but stumbled across a “bug”, that doesn’t seem to be completely related to the code itself.
Some time ago i used the code for my website, and got the Lato font working flawlessly. Now, neither the demo on this site here, or any of my own pages shows the correct font. Is there any workaround on this?
great job…. i love this very much… see some example in my website by using this webenlance.com
Hi!
I like your plugin. I’m playing a lot with it and I have yet to find how to use it like I wish…
If I take your demo, and use the WORK section 4 time in the same page… I can’t call it with boxlayout…
What can I do?
Thanks !
This is a beautiful layout!
how to add the more panels in the FullscreenLayoutPageTransitions ? plz help me……