Provide zblog template_ Zblog topic_ Download and customization of wordpress templates

Web special effects

The web page special effects column of Tianxing Studio will collect various simple and easy effects such as js special effects, jQuery special effects, css special effects, web page special effects, etc.

Current location: home page > Web special effects
Record waterfall flow+pull-down infinite load+pit stepped by lightbox page

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

When swiper is used as the navigation bar, it will automatically jump to the code of the corresponding category

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

Continuous horizontal scrolling effect of pictures realized by css
 Continuous horizontal scrolling effect of pictures realized by css

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

Which starts to load the html image or the css background image first? How to operate the CSS bitmap?
 Which starts to load the html image or the css background image first? How to operate the CSS bitmap?

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

Principle and usage of writing triangle in css
 Principle and usage of writing triangle in css

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

The js code of one input box calling multiple search engines
 The js code of one input box calling multiple search engines

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

A pure html+css drop-down navigation animation effect

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

JQ special effect: pop-up module when the page scrolls up
 JQ special effect: pop-up module when the page scrolls up

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

Simple and understandable follow scroll sidebar module JQ+html+css

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

Simple tab tag jQuery code that can be reused in multiple places on a page

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

  • Latest articles
  • Hot article ranking
  • Most Comments
Label aggregation
  • Sign in
  • Registered account Forgot your password?
  • register
  • Already have an account? Direct login Forgot your password?
  • Social account login