» » fixed layer

 
Sort articles by: Date | Most Rates | Most Views | Comments | Alphabet

Use CSS3 to realize single-page vertical fixed navigation

Author: bamboo06 on 6-10-2016, 11:56, views: 872

3 More and more developers like to design a single page, especially a product introduction page, with each important part (node) of a page associated with a simple navigation bar. In this example, a page consists of several important nodes, the side of the page will show a number of simple vertical navigation far point, slide the dot will display the corresponding part of the node name, click on the page will scroll to the corresponding part of the node, While the navigation bar position is fixed.
Use CSS3 to realize single-page vertical fixed navigation

When the screen is small enough (such as mobile devices), will display an icon in the lower right corner of the screen, touch icon, it will expand the navigation menu, click on the menu page will scroll to the corresponding node, the effect is very cool.

Category: CSS

 

Fixed background and scrolling page effect with CSS

Author: bamboo06 on 13-08-2016, 01:54, views: 691

2 How to create a just simply and none requiring javascript and CSS property of background-attachment can be realized fixed page backgrounds and scrolling effect. We see that there are many project sites use parallax effect, parallax is generated by the dynamic changes and the background image and js script, but today we only need CSS.
Fixed background and scrolling page effect with CSS

HTML structure is very simple, a background image is fixed placement class .cd-fixed-bg div element for a class of .cd-scrolling-bg div element portion for scrolling. We can place multiple .cd-fixed-bg and .cd-scrolling-bg group.

Category: CSS

 

Pure CSS to achieve the effect of suspending the bottom right side of simplicity

Author: bamboo06 on 29-10-2014, 02:49, views: 969

0 We've seen a lot of pages on the right side floating effect, the earliest contact panel, couplet advertising, most of them are based on the dynamic effects of javascript implementation, and today I just need to share a combination of the right side of the floating effect by CSS DIV.
Pure CSS to achieve the effect of suspending the bottom right side of simplicity
HTML
We hope that the suspension effect last load, it is generally placed at the end of the HTML page, we have established a .side-bar, which contains the online consultation, micro-channel (mouse slide effect pop-dimensional code), microblogging, and Email contact information and other content that we have to [a] label package.

Category: CSS

 

Floating right fixed layer of the page with back to top with two-dimensional code functions

Author: bamboo06 on 28-10-2014, 04:22, views: 3079

1 The mobile Internet era, we can pass the information "sweep swept away" feature to easily get in the mobile terminal needs. Today I have to share a WEB function, it is a small floating toolbar on the right side of the page, we can use it to quickly locate the page up and down position, you can eject the micro-channel or two-dimensional code page address two-dimensional code, so like in the phone read on mobile devices and other friends easy access to information.
Floating right fixed layer of the page with back to top with two-dimensional code functions

HTML
First, we prepared the right side of the floating layer content, toolbar has up and down arrow button, and then a "feedback" link, you can click on the feedback information page of your site, there is a two-dimensional code button will pop up a two-dimensional slide on mouse code picture, then we use the two-dimensional code .popPanel to place pictures, .arrowPanel is used to make the direction of the arrow. In this example, I use a background image as a toolbar, the practical application of course we can also add more functions in accordance with the actual needs of the button.

Category: Javascript / CSS