Hide and show animated content: Create HTML pages with transition effects

I'm trying to make a website that displays content in book form, with page-turning animations. There are different svg images to animate for the content of each "page"; I'm not sure how to do this. Basically, is there a way to show and hide content the way I want without having to create a...

P粉674757114 2023-09-10 17:41:45 0  1  672

javascript - The loading animation effect of the page is not displayed?

1. The project I am working on now is a data table page. Since the background query takes a long time, in order to improve the user experience, a load animation is added. There is no problem with the plug-in for loading animation. However, during the execution of the method, it is found that the ani...

迷茫 2017-05-19 10:18:28 0  4  702

Use mouse wheel for page zoom, click and drag to pan the page

How to create scrolling and panning effects for the entire page using the mouse wheel? Basically just like any 2D editor, scroll to zoom and click and drag to pan, but for the entire body. I can't find any information about it online.

P粉308783585 2024-03-26 14:11:27 0  1  347

javascript - Problem with route transition in vue?

Vue adds a cutscene animation fade-in and fade-out effect to the route. The component fades out when it is removed, but when it is entered, it enters instantly and does not fade in. Between these two steps, the page will become blank. The following is my code, copied from the official website: {code...

滿天的星座 2017-06-12 09:30:07 0  3  764

javascript - A front-end self-cultivation

As mentioned, I have just entered the industry and have been working in the company for two months. I consider myself to be a diamond in the rough. However, the company does not pay much attention to front-end effects. As long as I can write divs, compatibility and animation effects are not required...

曾经蜡笔没有小新 2017-07-03 11:43:03 0  2  965

javascript - why two elements are needed to create a scrolling effect with transform

I read other people's articles why it is necessary to use two layers of elements to perform two animations to achieve the parabolic effect of a small ball, instead of just writing one element <div class="ball"></div>? Then use transform to do it Modification of ...

滿天的星座 2017-05-19 10:18:02 0  2  829

Swiper autoplay stops if you switch tabs or minimize the browser

I made an autoplay progress for a slider using CSS. When the activity class is added to the pagination, I run a CSS animation that lasts as long as the slider autoplay delay. Everything will work fine if you don't switch browser tabs or minimize the browser. As soon as we switch tabs, the slider aut...

P粉715274052 2024-02-21 13:37:12 0  1  502

Vite Reactjs website app not calling API in production but running fine on localhost

I'm trying to deploy my application on Netlify. The landing page fetches a series of images to create a gallery effect. The login page is running fine on the local machine, but after deployment the API is not being called and the application is in a loading state. Login page on Netlify server. I fou...

P粉794177659 2023-08-10 16:32:46 0  1  640

TypeError: Cannot read property of undefined (read 'position') using ThreeJs

I'm trying to integrate a 3D model into the background of the hero section of my website. It works, it's just that when I change the window size manually, the 3D model doesn't adapt to the new size. Another issue that may be related to the first one is that I get this error message in the console, w...

P粉760675452 2024-04-01 12:01:52 0  1  552

Vanilla JS setTimeout(): Identifying wrong behavior

I have an animation on my hamburger menu written in HTML, CSS and vanilla JavaScript. Expected results When you click the hamburger menu button, the following events should happen: When you click the hamburger menu icon: main rotates 180° and shrinks along the height at 2000ms After 2000ms passes, t...

P粉797855790 2024-04-02 20:44:40 0  1  445

Ways to fix issue 2003 (HY000): Unable to connect to MySQL server 'db_mysql:3306' (111)

I recently tried to containerize my FastAPIPython server (also for replication/doubling purposes). Before, I had just a MySQL server in a Docker container and everything was fine, but when I also made my web server a service, it couldn't connect to the MySQL server, so now the application doesn't wo...

P粉178132828 2023-09-05 11:18:47 0  1  811

Experiment with sorting after query limit

So this is my first question here, please forgive me if something is wrong. I'm trying to make a sort query based on constraints. So there is a Customers table with 90 records. I want to first perform a query limited to 3 records, and then sort the results of this query by a column called ContactNam...

P粉237125700 2023-09-05 14:46:42 0  1  716

CSS Grid: Create new row when child content overflows column width

I have a two column layout based on CSS grid. When the content of the second column exceeds 1fr I want to create a new row. As it currently stands, the content simply overflows the column. One requirement of this layout is that the items in the right menu column are in one row. I achieve this with: ...

P粉212114661 2023-09-05 15:18:28 0  1  607

PHP full text search functionality using AND, OR and NOT operators

Newbie question: I'm trying to implement a full text search on a search string using php and eloquent. $searchstring="+(victimsuspect)+crime-covid";$searchresult=RssItem::whereRaw("MATCH(description)AGAINST('$searchstring'INBOOLEANMODE)")->ge

P粉076987386 2023-09-05 15:06:32 0  1  568

Shortest way to convert all PHP types to string

I'm writing a general system that I hope can one day be applied to fields like medicine (i.e. it's "scientific"). I think the best way is to represent all the data in php with strings (true will be "true", false will be "false" and so on). The reason for this is that in...

P粉369196603 2023-09-05 15:34:44 0  1  998

How to get average of DATETIME column in MySQL while grouping by other columns

I'm creating and populating a MySQL table using the following query: SETtime_zone='+00:00';CREATETABLEtimestamp_n_datetime(idINT,timeDATETIME,avg_timeDATETIME);INSERTINTOtimestamp_n_datetime(id,time,avg_time)VALUES("1","2023-01-0310:

P粉460377540 2023-09-05 11:46:21 0  1  503

Multi-device (mobile phone) synchronization - React Native

I'm trying to create a Lightshow that will launch on all users' mobile devices at the same time (can have up to 2000-3000 users). All users will use the Internet (Wi-Fi or mobile data). In our FE we use Apollo for subscriptions and it works like a charm. But the problem is, user A can get subscribed...

P粉151466081 2023-09-05 11:58:38 0  1  694

Spades, Diamonds, Hearts, Clubs => styles do not change font color in Chrome for Android

In Google Chrome on Windows, the card suit symbols (spades, hearts, diamonds, clubs) are colored correctly using the "style" attribute. Unfortunately, the same page displayed in Google Chrome on Android does not display the colors I defined but uses the default black and red. (See the atta...

P粉896751037 2023-09-05 15:25:13 0  1  752