KR20150040482A - System and method for implementing animation using hash - Google Patents
System and method for implementing animation using hash Download PDFInfo
- Publication number
- KR20150040482A KR20150040482A KR20130119046A KR20130119046A KR20150040482A KR 20150040482 A KR20150040482 A KR 20150040482A KR 20130119046 A KR20130119046 A KR 20130119046A KR 20130119046 A KR20130119046 A KR 20130119046A KR 20150040482 A KR20150040482 A KR 20150040482A
- Authority
- KR
- South Korea
- Prior art keywords
- web page
- animation
- hash value
- hash
- css
- Prior art date
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Processing Or Creating Images (AREA)
- Information Transfer Between Computers (AREA)
Abstract
Description
The present invention relates to a system and a method for implementing / executing an animation using a hash value, and more particularly, to a system and method for animating / executing an animation using a hash value. More specifically, when a hash transformation event occurs in a web page, The present invention relates to an animation implementation / execution system and method using a hash value for executing an animation and stopping a CSS animation being executed and switching to a web page when a previous page movement event occurs.
In recent years, as the use of the Internet has expanded, a variety of visual expressions have been possible. In addition, a function of a markup language (for example, HTML, XHTML, XML, mHTML, WML, etc.) The need for a style language that can complement it has increased.
Cascading Style Sheets (CSS) is one of the emerging style languages in response to this, and CSS is widely used as a style language to complement the shortcomings of markup language because it has various presentation effect and structure. The advantage of CSS is that it is a concise and effective language that can integrate and manage multiple styles of information. For example, in HTML (HyperText Markup Language), the efficiency of creating a web document is lowered due to the necessity of repeatedly designating font information, paragraph information, etc. for each paragraph, and even though management such as correction and updating is performed later, CSS, on the other hand, introduces the concept of class (structuring) so that styles such as paragraphs of a web document can be defined at once and can be used repeatedly. Accordingly, in recent years, it has become common to apply a style to a web document created as a markup language using CSS.
Meanwhile, in web programming, it is possible to apply an animation effect to a element by applying a CSS attribute. By using such an animation, it is possible to make a page change appear on the screen even though the actual page movement does not occur.
For example, as shown in FIG. 3, a certain button may be clicked to give an animation effect for displaying a side menu. It is not difficult to use these effects with CSS animations. However, if the user clicks the backbutton while the sideMenu is open, it will leave the current webPage. Intuitively, in this situation, if you click on the backbutton, the sideMenu should disappear, but since the current webPage is not a page move, there is no history for the sideMenu. So when the user clicks the backbutton, the sideMenu disappears, rather than disappearing.
In the past, since the history of CSS animation is not managed, there is a problem that when a back button is pressed, the page is moved to an incorrect page.
SUMMARY OF THE INVENTION The present invention is conceived to solve the problems described above, and it is an object of the present invention to provide an animation implementation / execution system using a hash value that enables history management for a CSS animation by adding a window.location.hash value when a CSS animation occurs And a method thereof.
It is another object of the present invention to provide an animation implementation / execution system and method using a hash value that can use the same effect as a page transition through CSS animation.
According to an aspect of the present invention, there is provided a web page output method including: a user interface unit for outputting a web page; a hash conversion unit for, when a hash conversion event occurs in the output web page, And an animation executing unit for executing a CSS animation (Cascading Style Sheets animation) and stopping the running CSS animation and switching to the web page when a previous page movement event occurs.
When the user command is input, the animation execution unit searches window.location.hash where address information with a hash value is stored in a web page address, determines whether a hash value is set in the web page, It is determined that a hash conversion event has occurred and the CSS animation can be executed according to the hash value.
In addition, when the previous page movement event occurs, the animation execution unit can remove the hash value set in the web page and switch to the web page before the CSS animation based on the browser search history information.
The terminal device sets an hash value so that a location is classified in the same web page, and when the previous page movement event occurs, the CSS implements an animation that restores the CSS animation that was executed while the set hash value is undone And an animation implementation unit.
The animation implementing unit includes a window.location in which an address of a current web page is stored, a window.location.hash in which address information with a hash value is stored in each web page address, a window.history in which a web page search history is managed, And window.history.back that allows the CSS animation to be undone and the generated CSS animation to be undone.
According to another aspect of the present invention, address object information for setting a hash value so that a location is divided in the same web page, web page search history object information for returning a CSS animation executed while rendering the set hash value A developer terminal device that transmits the web page setting information to the service providing device when the web page setting information including the web page setting information is input; A service providing device that transmits a web page to which the CSS is applied according to the web page setting information to the user terminal device when the hash change event is requested; The CSS animation is executed according to the hash value set in the previous page, And a user terminal device for stopping the running CSS animation and switching to the web page when the event occurs, is provided.
According to another aspect of the present invention, there is provided a method of executing animation in a web page, the method comprising: when a hash change event occurs in a web page, executing a CSS animation according to a hash value set in the web page And stopping the CSS animation and switching to the web page when a previous page movement event occurs during execution of the CSS animation.
The animation implementation / execution method using the hash value includes window.location in which the address of the current web page is stored, window.location.hash in which address information with a hash value is stored in the address of each web page, window If the web page setting information including at least one of .history, window.history.back for erasing the added hash value and for restoring the generated CSS animation is input, To the user terminal.
In the case where a hash conversion event has occurred in the web page, the step of executing the CSS animation according to the hash value set in the web page, when the user command is inputted, searches the window.location.hash, Determining whether a hash value is set in the web page, and if the hash value is set in the web page, determining that a hash conversion event has occurred and executing the CSS animation according to the hash value.
According to still another aspect of the present invention, there is provided a method for executing a CSS animation, the method comprising: executing a CSS animation according to a hash value set in the web page when a hash change event occurs in a web page, And stopping the CSS animation and switching to the web page when a previous page movement event occurs in the recording medium.
According to another aspect of the present invention, there is provided a web browser including history information of an address object in which a terminal device sets a hash value such that a location is divided in the same web page, web page search history object information which returns an executed CSS animation, Transmitting the web page setting information to the service providing apparatus when the page setting information is inputted; storing the web page setting information by the service providing apparatus; and when a web page is requested from the terminal apparatus, And transmitting the hash value to the terminal device, the terminal device outputs a web page transmitted from the service providing device, and when a hash change event occurs in the output web page, Executing a CSS animation in accordance with the CSS animation, A step of stopping the CSS animation being executed and switching to the web page, a method of implementing / executing an animation using a hash value is provided.
According to the present invention, when a CSS animation occurs, a history of a CSS animation is managed by adding a window.location.hash value, so that it is possible to respond as if an actual page change occurred when a back button is clicked.
Also, it is possible to manage the history as if the page change occurred even when the actual page change does not occur by using the hash value, and when the backbutton is pressed because the existing history is not managed, the phenomenon of moving to the wrong page .
In addition, it is possible to manage the history of the CSS animation by recognizing the performance of the CSS animation as an effect of switching the page without moving the web page, and the user can receive a better user experience.
1 illustrates an animation implementation and execution system using a hash value according to an embodiment of the present invention.
2 is a block diagram schematically showing a configuration of a terminal device according to an embodiment of the present invention.
FIG. 3 is a diagram illustrating a sideMenu CSS animation according to an embodiment of the present invention. FIG.
4 is a diagram illustrating a CSS animation using a hash value according to an exemplary embodiment of the present invention.
FIG. 5 is a diagram illustrating a screen for explaining a previous page movement event according to an embodiment of the present invention; FIG.
6 is a diagram illustrating an animation implementation and a method of using animation using a hash value according to an embodiment of the present invention.
The foregoing and other objects, features, and advantages of the present invention will become more apparent from the following detailed description taken in conjunction with the accompanying drawings, in which: FIG.
1 is a block diagram illustrating an animation implementation and execution system using a hash value according to an embodiment of the present invention.
Referring to FIG. 1, an animation implementation and execution system using a hash value includes a
The
The
The
The
The
The
The
FIG. 2 is a block diagram schematically illustrating the configuration of a terminal device according to an embodiment of the present invention. FIG. 3 is a diagram illustrating a sideMenu CSS animation according to an embodiment of the present invention. FIG. 5 is a diagram illustrating an example of a page animation event according to an exemplary embodiment of the present invention. Referring to FIG.
Referring to FIG. 2, the
The
The
The
The
First, when the
The
Next, when the
The
That is, when the window.location.hash value is changed, the
The value of window.location is a value that stores the address of the current web page, and it is possible to identify the same page by attaching a hash value to the corresponding value. This value is stored in window.location.hash, which automatically raises an event called hashchange if the value changes.
The developer arbitrarily sets the hash value at the address of the web page, and the hash value is stored in window.location.hash so that the location can be distinguished even within the same web page. For example, if you arbitrarily set hash '# abc' on the page 'http://1.234.56.789/index', the URL (Uniform Resource Locator) changes like 'http://1.234.56.789/index#abc'. The modified URL has no effect on the actual page, and the CSS animation can be generated by using such a hash value, not the movement within the same page.
For example, if you want to use a CSS animation that opens and closes a sideMenu as shown in FIG. 3, set a hash value for the sideMenu. Then, when a predetermined button A is clicked, a hash conversion event is generated, and sideMenu (B) is opened as shown in (b).
Referring to FIG. 4, a method of performing a CSS animation by setting a hash value of '# sideMenuOpen' in a current URL is performed. A main page such as (a) The URL with the hash value added is opened on the main page, and the sideMenu is opened.
When the window.location.hash value is changed as described above, the
When the previous page movement event occurs, the
This function is based on the browser history information (window.history). The browser navigation history information manages the history of the web page movement so that when the user presses or refreshes the backbutton, There is a function that defines whether to move. The window.history contains the history of the page used by the user. window.history.back is a function that returns to the previous page. It uses window.history.back to return the CSS animation performed by the developer. In this case, the CSS animation is generated by setting the hash value. When the window.history.back function is used to return the CSS animation to the original position, the set hash value is undone, and the CSS animation is also returned to the default value.
For example, if a user selects a backbutton on the main page where the sideMenu is opened as shown in FIG. 5A, the
As such, window.history is a function that manages the history of a web page, and provides a function to return to the previous page when the backbutton is pressed. In addition, window.history.back is used to delete the hash value added, and the generated CSS animation is restored to its original state. In the past, when the effect of the screen transition is obtained through the CSS animation, the history is not stored because the hash value is not set. In the present invention, when a specific CSS animation occurs, the window.location.hash value is arbitrarily In addition, history management is enabled.
FIG. 6 is a diagram illustrating an animation and an execution method using a hash value according to an embodiment of the present invention.
Referring to FIG. 6, a developer terminal device includes a web page including address object information for setting a hash value to identify a location in the same web page, web page search history object information for returning an executed CSS animation, When the setting information is input (S302), the input web page setting information is transmitted to the service providing apparatus (S304).
The service providing apparatus stores and applies the web page setting information (S306). If the web page to which the web page setting information is applied is requested from the user terminal apparatus (S308), the service providing apparatus transmits the web page to the user terminal apparatus (S310).
The user terminal outputs a web page transmitted from the service providing apparatus, and when a hash change event is input in the output web page (S312), the CSS executes the CSS animation according to the hash value set in the web page (S314 ).
Thereafter, when the previous page movement event is inputted (S316), the user terminal stops the currently executing CSS animation and switches to the web page (S318).
According to another aspect of the present invention, there is provided a method of generating a CSS animation, the method comprising: executing a CSS animation according to a hash value set in the web page when a hash change event occurs in the web page, And stopping the CSS animation and switching to the web page when a previous page movement event occurs during execution, is provided as a program and a recording medium readable by an electronic device is provided .
The animation implementation / execution method using such a hash value can be written as a program, and the codes and code segments constituting the program can be easily deduced by a programmer in the field. Also, a program related to animation implementation / execution method using a hash value can be stored in an information storage medium (readable media) that can be read by an electronic device, and can be read and executed by an electronic device.
Thus, those skilled in the art will appreciate that the present invention may be embodied in other specific forms without departing from the spirit or essential characteristics thereof. It is therefore to be understood that the embodiments described above are to be considered in all respects only as illustrative and not restrictive. The scope of the present invention is defined by the appended claims rather than the detailed description and all changes or modifications derived from the meaning and scope of the claims and their equivalents are to be construed as being included within the scope of the present invention do.
The present invention provides a system and method for animating / executing an animation using a hash value, so that when a CSS animation occurs, a history of a CSS animation can be managed by adding a window.location.hash value, When clicked, you can use the same effect as if the actual page conversion occurred.
100: terminal device 110:
120: user interface unit 130: storage unit
140: animation implementing unit 150: animation executing unit
Claims (11)
When a hash change event occurs in the output web page, a CSS animation (Cascading Style Sheets animation) is executed according to a hash value set in the web page, and when a previous page movement event occurs, An animation execution unit for stopping the animation and switching to the web page;
.
When the user command is input, the animation execution unit searches window.location.hash where address information with a hash value is stored in a web page address, determines whether a hash value is set in the web page, When a hash value is set in the hash value, determines that a hash conversion event has occurred, and executes the CSS animation according to the hash value.
Wherein the animation execution unit removes the hash value set in the web page when the previous page movement event occurs, and switches to the web page before the CSS animation based on the browser search history information.
An animation implementing unit that implements an animation for setting a hash value so that a location is classified in the same web page and restoring the executed CSS animation while rendering the set hash value at the occurrence of a previous page movement event Terminal device.
The animation implementing unit includes a window.location in which an address of a current web page is stored, a window.location.hash in which address information with a hash value is stored in each web page address, a window.history in which a web page search history is managed, And window.history.back that allows the user to delete the CSS animation and restore the generated CSS animation to the original state.
A service providing device that stores web page setting information transmitted from the developer terminal device and transmits a CSS-applied web page to the user terminal device according to web page setting information when a web page is requested from the user terminal device; And
A CSS animation is executed according to a hash value set in the web page when a hash conversion event occurs in a web page received from the service providing apparatus, and when a previous page movement event occurs, A user terminal for stopping and switching to the web page;
An animation implementation / execution system using a hash value including.
Executing a CSS animation according to a hash value set in the web page when a hash conversion event occurs in the web page; And
Stopping the CSS animation and switching to the web page when a previous page movement event occurs during execution of the CSS animation;
A method of implementing / executing animation using hash values including.
Window.location where the address of the current web page is stored, window.location.hash which stores the address information with the hash value attached to the address of each web page, window.history which manages the web page navigation history, If the web page setting information including at least one of window.history.back and the window.history.back that causes the animation to return to its original state is inputted, applying the web page setting information to the corresponding web page Animation implementation / execution method using.
The method according to claim 1, wherein when a hash change event occurs in the web page, the CSS animation is executed according to the hash value set in the web page,
If a user command is input, searching window.location.hash to determine whether a hash value is set in the web page; And
And if the hash value is set in the web page, determining that a hash conversion event has occurred, and executing CSS animation according to the hash value.
Executing a CSS animation according to a hash value set in the web page when a hash conversion event occurs in the web page; And
And stopping the CSS animation and switching to the web page when a previous page movement event occurs during execution of the CSS animation is recorded in a program and recorded in a recording medium readable by an electronic device .
Transmitting the web page to the terminal device when the service providing device stores the web page setting information and a web page is requested from the terminal device; And
Outputting a web page transmitted from the service providing apparatus and executing a CSS animation according to a hash value set in the web page when a hash change event occurs in the output web page; And
Stopping the running CSS animation and switching to the web page if a previous page movement event occurs;
A method of implementing / executing animation using hash values including.
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
KR20130119046A KR20150040482A (en) | 2013-10-07 | 2013-10-07 | System and method for implementing animation using hash |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
KR20130119046A KR20150040482A (en) | 2013-10-07 | 2013-10-07 | System and method for implementing animation using hash |
Publications (1)
Publication Number | Publication Date |
---|---|
KR20150040482A true KR20150040482A (en) | 2015-04-15 |
Family
ID=53031808
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
KR20130119046A KR20150040482A (en) | 2013-10-07 | 2013-10-07 | System and method for implementing animation using hash |
Country Status (1)
Country | Link |
---|---|
KR (1) | KR20150040482A (en) |
-
2013
- 2013-10-07 KR KR20130119046A patent/KR20150040482A/en active Search and Examination
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US8762879B1 (en) | Tab management in a browser | |
US9582601B2 (en) | Combining server-side and client-side user interface elements | |
US20120306930A1 (en) | Techniques for zooming in and out with dynamic content | |
US20150193395A1 (en) | Predictive link pre-loading | |
US20110022957A1 (en) | Web browsing method and web browsing device | |
US10878175B2 (en) | Portlet display on portable computing devices | |
US20150149429A1 (en) | Contextual information lookup and navigation | |
CN107368511B (en) | Information display method and device | |
CA2867533A1 (en) | Systems and methods for delivery techniques of contextualized services on mobile devices | |
CN104657451A (en) | Processing method and processing device for page | |
CA3058070A1 (en) | Page switching method and device, electronic device and storage medium | |
US9767084B2 (en) | Rule based method and apparatus for controlling page switching capacity on mobile devices | |
WO2014032589A1 (en) | Window switching method and apparatus | |
CN110992112A (en) | Method and device for processing advertisement information | |
CN107391534B (en) | Page display method, page file return method, page display device, page file return device and computer storage medium | |
CN110262749B (en) | Webpage operation method, device, container, equipment and medium | |
US9389757B1 (en) | Content preview for electronic devices | |
US10210001B2 (en) | Automatic execution of objects in a user interface | |
US9733784B1 (en) | Content preview for electronic devices | |
JP2022545545A (en) | Protecting User Privacy in User Interface Data Collection for Native Applications | |
CN105573579A (en) | Search bar operation method and terminal | |
KR20140148470A (en) | Associating content with a graphical interface window using a fling gesture | |
US20140337284A1 (en) | Synchronizing folders using a shadow folder hierarchy | |
CN111506848A (en) | Webpage processing method, device, equipment and readable storage medium | |
CN104899287A (en) | Webpage display method and device |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
A201 | Request for examination |