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. 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: BookBlock by Pedro BotelhoCustom jQuery++ by BitovijScrollPane by Kevin LuckjQuery Mouse Wheel Plugin by Brandon AaronCustom Modernizr (peek inside to see what this build includes) So, let’s get started! 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. 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: 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. 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.