Recently, I received an order. The page needs waterfall flow plus pull-down unlimited loading. In addition, clicking on the image also requires a lightbox effect. It is obviously pointless to write pages of this complexity by yourself [it is not advisable to repeatedly create wheels, and wheels of this level cannot be created...] Directly put them into the ready-made database. The waterfall stream uses "masonry", the pull-down infinite load uses "infinite scroll", and the picture light box uses "

Web special effects 2021-05-20 one thousand six hundred and thirty-three 0 Comments #masonry #infinitescroll #lightGallery

Make a zblog template for the customer. The mobile terminal needs to implement a sliding navigation bar. It is divided into upper and lower parts. The first level classification is displayed on the top as the navigation bar, and the sub classification of the classification is displayed on the bottom, which can be switched by sliding left and right. So we are going to directly implement it with the swiper, directly create two new swiper objects, and then bind and switch them. There are cases of this effect on the official website of the swiper. Then there is a problem. When you open the list page, the navigation bar needs to be switched to When

Web special effects 2020-12-07 two thousand one hundred and sixty-three 0 Comments #swiper #Zblog template #Swiper navigation bar

Today, I wrote a picture for continuous horizontal scrolling with css, and the results are as follows: a total of two pictures are used, one background picture and one scrolling picture. The html structure is as follows:<div class="img box"><img src="background picture address">

Web special effects 2020-07-31 three thousand nine hundred and fifty-four 0 Comments #Css animation #Picture Scroll

If your website is a picture station, the home page shows many pictures. Then you will have more images, which will cause slow loading. At this time, there are several solutions. 1. Physical solution: increase the bandwidth of the website+compress the image size; 2. Load js lazily with images. Before the images are loaded, load a buffer image to occupy the space; 3. That is what this article discusses. Use css to add a placeholder; The first thought is to add a box to the outer layer of the picture, and then give the box

Web special effects 2020-04-10 three thousand one hundred and three 0 Comments #Css placeholder #Lazy loading #Css background

I used to use css to write triangles. Anyway, I can search a case on the Internet and use it. Today, I worked hard to understand the principle and use method, and recorded it. I hope it can be helpful to people who are as weak as me. First, css writes triangles through border. Most people use border to define borders. So if you want to use border to write triangles, they will fall into the thinking mode of the border First, let's define the bord of the element

Web special effects 2019-11-30 two thousand two hundred and twenty-seven 0 Comments #css3 #Css triangle #Css special effect

The method to implement is as follows: input keywords in one input box, and call multiple search engines to search. The implementation code is as follows:<divclass="searchclearfix"><inputtype="text" name

Web special effects 2019-08-17 four thousand and three hundred 1 Comments #Search engine #Js code

This is a pull-down navigation animation written by pure html+css, which Tianxing Studio has struggled with. The code is as follows. Html part:<div class="nav"><ul class="clearfix">&n

Web special effects 2019-01-24 four thousand seven hundred and fifty-nine 0 Comments #Pull down navigation #Pull down navigation animation

The page scrolling pop-up module is a special effect that is suitable for resource websites. When a user comes to your website, he or she will scroll down the page. If he or she finds something, he or she will go back to the top to find the navigation bar. This will generate an upward scrolling action. This is a good time to pop up a search box to remind users that they can find what they want through search. This is a user experience optimization thing. This article introduces how to use this special effect. As usual

Web special effects 2018-06-09 four thousand five hundred and eighteen 0 Comments #Scroll Up #Jq special effect #Web special effects

A side bar module that follows the scroll bar and is fixed is considered to be the best place to place advertising space or promote websites. This article will describe in detail how this effect should be done. First of all, the following code is purely personal. If there are any mistakes or omissions, you are welcome to point out. This effect requires JQ, so we must introduce the JQ library. Html code:<div class="fixed location">

Web special effects 2018-03-25 four thousand six hundred and thirty-six 0 Comments #Follow scroll module #Js code #Jq special effect

Previously, the js framework "SuperSlide" was always used to write tabs or other effects, but it was slowly discovered that the js framework of this size could not be used to write zblog themes. Especially SuperSlide is not friendly to mobile phones, so it is no longer used. Now some simple js effects of the page are slowly starting to be written. This article introduces a simple tab tag jQuer that can be reused in multiple places on a page

Web special effects 2018-01-11 four thousand eight hundred and sixteen 0 Comments #Tab label #JQuery code #Web special effects