Fullscreen Pageflip Layout. Posted at Codrops by Mary Lou We have received a couple of requests on how to use the BookBlock plugin in fullscreen. So, we decided to create a fullscreen layout, apply BookBlock to it and add a sidebar menu. We’ll show you how to customize BookBlock and use some available options for navigating the content. The idea is to navigate the pages using the arrows or swiping the pages and to slide out the menu when clicking on the menu button. The sidebar menu will contain links to different pages, i.e. the table of contents. When clicking on a table of contents entry, we’ll jump to the respective page. We’ll also use jScrollPane by Kevin Luck to add a custom scrollbar for the content when needed.
The demo contains excerpts form the hilarious "The Funny Side of Physic" by A. The following libraries and jQuery plugins will be used: The Markup Let’s have a main container for all our elements. The menu items will point to the respective BookBlock pages (bb-item). The CSS The Javascript View Demo. BookBlock And Windy: 2 jQuery-Plugins Provide Exceptional Content Navigation. Posted at noupe by Denis Potschien Chances are, you are not looking for sliders, you have to watch your steps to avoid not trampling on them. There are more sliders on this planet than content for them to take care of. As this is the case, why do we introduce two more variants to our readership? It’s simple. Both plugins by Codrops use CSS properties to create animation effects. Content-flip with BookBlock BookBlock is a plugin for presenting content in the form of a book by mimicking its behaviour. A div element carries the content: Each page of the booklet gets a container by the class of bb-item.
Now we apply the functionality of the plugin. There are more options to play with. Swift content with Windy Windy presents content each as a single piece of paper, which then gets blown away by the use of navigation, so that the underlying sheet becomes visible. The approach to get the effects started is similar to BookBlock’s: Again we assign the plugin: Animated Portfolio Gallery with jQuery. Posted at Codrops by Mary Lou Today we will create an animated portfolio gallery with jQuery. The gallery will contain a scroller for thumbnails and a content area where we will display details about the portfolio item. The image can be enlarged by clicking on it, making it appear as an overlay. The idea is to animate the content elements whenever a thumbnail is clicked. We will animate the heading from the top, fade out the previous image and slide the descriptions from the sides. The great template collection for the demo can be found on DzineBlog. Let’s start with the HTML structure.
The Markup First we will create the structure for the content area. All the first elements inside of those containers will have a specific inline style, making them visible when we load the page. The thumbnails scroller will have the following structure (based on Manos Malihu’s thumbnail scroller): And finally, we will add a div for the semi-transparent overlay: The CSS The Javascript And that’s all!
View Demo. Horizontal content scroll with jQuery. Horizontal content scroll with jQuery. Posted at Gazpo In this tutorial we will create a simple smooth horizontal content scrolling effect with just a few lines of jQuery without using any plugin. We will use HTML and CSS for the layout and jQuery for the scrolling. Markup Content Following is markup for the content. Menu Now we need to create a navigation menu, so that by clicking on the links we can scroll to the relevant content id.
As you can see, we call a javascript function goto on clicking the link by passing two parameters. Following is the CSS for the content divs: We have set the .contentbox-wrapperwidth to 3000px so that all content boxes can fit in it. The CSS for the menu is very simple: The link with the class active will be bold. Javascript Here is the function for the horizontal scrolling and adding the CSS class to the link: The above function animates to the div whose id is passed as a paramenter.
View Demo. Lateral On-Scroll Sliding with jQuery. Posted at Codrops by Mary Lou After getting the request, we are going to show you how to create a "slide-in on scroll" effect. You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document.
Dividing the page into a left and right side, we want to move the elements from "outside" of the page to the center when they are in the viewport. We will also add the option to move the elements in 3D space. The theme of today’s tutorial is going to be a timeline where we will have some circular elements on one side and the descriptions on the other. So, let’s start! The Markup The HTML structure is going to consist of a main container and some rows that we’ll use to place the left and the right elements. The CSS The row will serve as a wrapper for the left and right elements: The two lateral elements will occupy half of the width: