Showing posts with label CSS3. Show all posts
Showing posts with label CSS3. Show all posts
HTML 5 and CSS3 Sliding Horizontal Layout
Today we’d like to share an interesting layout with you. It’s a layout where we see the main section in the middle and part of the previous and next section on the sides. The navigation reflects this view by showing the three items currently visible. When clicking on one of the sides or on one of the lateral navigation items, the sections will slide to the respective side, showing the next or previous section. The same happens to the navigation.
Sequence - The Responsive Slider with Advanced CSS3 Transitions
Hello guy's today we like to introduce with Sequence.js is a refreshing and modern take on website sliders. Using just HTML and CSS, Sequence allows you to create your own responsive slider with unique transitional styles. No instance of Sequence need ever be the same. There are no limitations and no in-built themes. Supported in modern desktop browsers, mobile browsers and even in old versions of Internet Explorer via a traditional fallback theme.
With Three Free Theme
With Three Free Theme
Sequence Theme 1
Sequence Theme 2
Sequence Theme 3
FULLSCREEN LAYOUT WITH PAGE TRANSITIONS
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.
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.
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!
CSS3
,
Fullscreen
,
Layout
,
Transitions
Subscribe to:
Posts
(
Atom
)
