Study on Parallax Scrolling Web Page Conversion Module

Transcription

1 Study on Parallax Scrolling Web Page Conversion Module Song-Nian Wang * and Fong-Ming Shyu Department of Multimedia Design, National Taichung University of Science and Technology phenombox@gmail.com, fms@nutc.edu.tw Abstract. Parallax scrolling is one of the popular web page design effects in recent years. It enhances web page to convey the message more clearly than static pictures and text only. Many parallax scrolling webpages are designed by reconstructing a new production with open source designing tools. This study attempts to convert non-parallax web page into parallax through the parallax scrolling conversion module that developed by this study. This module can easily convert existing web page into parallax scrolling web page. The first step of this study is to connect the skrollr parallax scrolling link tag with jquery libraries and CSS into html tag of original web pages. Next step, web designers just have to input the affected range (such as a HTML or ID name, and so on) by parallax scrolling module developed by this study to generate skrollr parallax scrolling code. In the final step, paste the generated code back to the original web code and then the generating processes of parallax scrolling web page are completed. Keywords: web page conversion, parallax scrolling, web effect, jquery. 1 Introduction Early Web design combined with pure text form and static pictures as the main content. After the Web technology matures began to appear animation, video, audio and other interactive media effects. Web browser use Flash, Shockwave and QuickTime plug-ins and other support that can present quality dynamic vision effects, until today still favored by many commercial web pages. [1] In recent years affected by HTML5 technology with JavaScript and CSS3 are able to use the plug without display rich vision effects and more applications to multimedia content in web design such as banner animation, parallax scrolling, and video. Parallax scrolling is a common on HTML5 website, and using web layers and objects of different rate of movement to generate staggered visual effects. Figure 1 shows typical parallax scrolling web page that the whole picture is scrolling from top to the bottom. The speeds of each planet are moving differently. The planets of distance are approaching due to moving upward faster or the planets of distance are farther due to moving upward slowly. * Corresponding author. J.-S. Pan et al. (eds.), Intelligent Data Analysis and Its Applications, Volume 1, Advances in Intelligent Systems and Computing 297, DOI: / _25, Springer International Publishing Switzerland

2 236 S.-N. Wang and F.-M. Shyu Fig. 1. Parallax Scrolling Web Page Schematic (Source: Many parallax scrolling web pages are designed by re-constructing a new production with open source design tools. We have developed a conversion model to semiautomatically construct parallax scrolling pages through manipulating HTML and CSS only. The kernel module is parallax scrolling open source skrollr library. The first step must enter code into the HTML tag connection skrollr and link style files in the original web page. Secondly, we need to understand HTML tags, attributes of the original web page, and identify the area affected to apply parallax scrolling effect. Finally, the designers just have to modify the parameter values to arrange the web page such as resizing, transparent, rotation angle. With scrolling object position display at different speeds on web page that is the primary features of parallax scrolling. 2 Related Work 2.1 HTML HyperText Markup Language is the main markup language for creating webpages that develops open standards by the World Wide Web Consortium (W3C). HTML4.01 is the W3C Recommendation version and HTML5 is the next major revision version of the HTML standard working group as an updated revision to the candidate Recommendation. However, there have been many browsers support HTML5, such as Firefox, Chrome, Safari, Opera and Internet Explorer 9 later versions. HTML5 syntax followed HTML4.01 addition and improvement of the tag and the Application Programming Interface (API) to create a web application and handling the document object model (DOM) [2]. The following are the main technologies of HTML5: (1) Canvas Tags: Canvas is used to draw graphics via JavaScript that is able to render complex scenes and timely computing animation.

3 Study on Parallax Scrolling Web Page Conversion Module 237 (2) Positioning: Support mobile positioning on the device, the browser which can obtain the user's location. (3) Multimedia tags: It is able to define videos and audio by video and audio tag. (4) Enhance definition of tag: HTML5 for the HTML4.01 tag do further addition new tag such as header, footer, section and article. (5) Offline storage: Program information write to the client browser cache even if leaving the main page, turning back to the browser the program still can write and access to the browser's cache next time. 2.2 CSS Cascading Style Sheets (CSS) is a standard developed by W3C to define the appearance of web documents. It can be used to conveniently set the text font and color, the location of the picture, the size of the form, and graphic layout. CSS styles and pages can be placed in different files separately and make web design become so simplified and modular. CSS3 is the latest version of the standard early as 1999 had already begun to develop until June 7 in 2011 became a W3C recommended specifications. CSS3 adds some new features, such as rounded corners, shadows and transparency, beautify richer web pages, but the drawback is too old browsers to render. 2.3 jquery jquery is an open source by the John Resig on the 2006 release of the BarCamp NYC. JavaScript is the most widely used library that the purpose of working a lot of things with small amount of code. It makes many things easy to operate such as creating animation, event handling, and select DOM documents. Making each function return value is the element itself; therefore, it can be reached through a series of continuous processing function. jquery has some other interface plug-in module which are jquery UI, jquery Tools, jquery Mobile and so on. 2.4 Parallax Scrolling Web Parallax scrolling web page is to achieve multi-layered background via mouse wheel or drag through the browser scroll bar to move at different speeds, the formation of three-dimensional motion visual effects. Parallax effect in web design has been widely used in recent years. The elements of the page in each layer have different moving speed when the user rolls the mouse wheel. On the one hand, the faster moving speed of elements is in upper layer. On the other hand, the lower moving speed of elements is in lower layer. Visitor s visualization is different from the past of the visitor's browsing experience. Parallax scrolling is usually based on a single web page, the higher value of web pages content is plentiful, and visualized effects are more obviously than before. Most parallax scrolling web design are applying JavaScript as open source such as Stellar.JS, SuperScrollorama, Jarallax[4] and skrollr, thus web designing will be produced in different ways.

4 238 S.-N. Wang and F.-M. Shyu Parallax pages is the typical way to present by scrolling or moving the mouse, the speed of objectives are moving differently, showing three-dimensional foreground and background, but there are other manifestations. The following are different ways to present the case parallax scrolling web pages. Figure 2 shows parallax scrolling via mouse wheel to scroll and showing a horizontal scroll animation, and breaking the traditional web browsing thinking. Figure 3 shows parallax scrolling web pages hiding the scroll through the mouse wheel button or touch the sliding direction. While users browse web content to multiple steps one by one, web page shows the product from different angles with add text to enhance web browsing effects. Fig. 2. horizontal scroll parallax scrolling web pages (Source: interactive-resume) Fig. 3. Product parallax scrolling web pages (Source:

5 Study on Parallax Scrolling Web Page Conversion Module Customizable Components Solutions The methods of this study are conveniently and quickly converting non-parallax scrolling effect of the web pages into parallax scrolling web page through modifications simply. HTML tags are written in the original web page to import an external JavaScript and adjust parallax scrolling attribute parameters to custom JavaScript file. The attribution will affect the CSS of original page while scrolling web page. The CSS web page is going to convert as scroll position then you can create a variety of different parallax scrolling effect, hereinafter referred to as the parallax conversion module. While the corresponding tag or attribute name. You can quickly modify the rendering of parallax scrolling web pages by using developed module of this study. Furthermore, One Tea shop s web page as the sample in this study is to demonstrate the processes of conversion. 3.1 Original Page Framework Determined of modification web pages, we need to understand what the page using tag, id, or class attributes such as name firstly. The purpose is to generate corresponding code of custom modules. This study will begin with id affected by parallax scrolling on the page name respectively. The outer layer is wrapper, and the left side is linkbar and the right side is page and aboutimg. Figure 4 shows effects of parallax scrolling by the id attribute. Fig. 4. The example original page attribution naming 3.2 Conversion Process As Figure 5 system process, the original page using jquery, skrollr libraries, and needed CSS file. Regards to produce code via parallax scrolling module, it needs to match with converting section in order to copy in the name of the original page. It modifies the parameters of the scrolling position and web object's attribute. For example, about.html page has an id attribute "page", and in the customized code using jquery page corresponding id name tag. Modifying web pages into parallax scrolling

6 240 S.-N. Wang and F.-M. Shyu parameters needed, such as scrolls to 0, the object on the left screen, scrolling to 1000, the object moves to the right screen. In above parameters of scrolling presentation and div tags can be modified at any time. Fig. 5. Conversion Process 4 Conversion Module Implements This study implements web page conversion prototype using Adobe Dreamweaver CS6, jquery, and the skrollr library. jquery is a JavaScript open-source library, it can Fig. 6. System Architecture

7 Study on Parallax Scrolling Web Page Conversion Module 241 simplify the coding. Using jquery selector can easy to transfer HTML tags. There are many kinds of parallax scrolling web pages libraries. In this study we selected skrollr as an example. The following describe the results of this study demonstration and implementation prototype results. In this study, operations of the system architecture are shown in Figure 6. Original page requires link with fixed-positioning CSS file and skrollr JavaScript file. When skrollr JavaScript and fixed-positioning style files connected to the original page, we can edit the parallax conversion module. In Figure 7, the parallax conversion modules are transmitted using jquery tags and attributes from the original page. The tag of the corresponding original page has the same id name, adds attributes and parameters in a div tag. The scroll position data-0 indicates at the top of the reel and data-1000 sets reel at the bottom. Numerical data is not limited to the bottom, and the distance of scroll will be longer due to great value. The top or right are CSS attributes. Besides, controlling the position of the object can also control the length, width and the transparency of scrolling changes that produced a parallax scrolling effect. Therefore, in the same web page can develop different parallax scrolling effect. Developers only need to modify the attribute and parameters parallax conversion module. They can develop a variety of parallax scrolling web pages module for further usages. Fig. 7. Parallax conversion module editor explanation In this study, One Tea Shop web page as an example, the conversion processes of the original web page into parallax scrolling web page are shown in Figure 8. When the scroll position on the top, the data-0 is show in the upper left. Meanwhile the screen of object has not appeared yet. When the scrolling is going to down, you will find the object to move center of screen. The scrolling is going to the bottom which is the data-1000 and parallax scrolling animation ends. The data parameter values will affect the length of scrolling drag. Completion of parallax scrolling pages uploaded to the server, URL:

8 242 S.-N. Wang and F.-M. Shyu Fig. 8. Schematic view parallax scrolling web animation after the conversion 5 Conclusion and Future Work In recent years, parallax scrolling techniques are more favored by the developers of business web page. Various presentation of parallax scrolling web pages can be seen on the network. With more new design, this study uses a relatively simple way and develops a module to add parallax scrolling effect on original web pages. This study attempts to use application with jquery and skrollr library to develop parallax scrolling conversion modules. Using this module, web developer can easily add parallax scrolling effect to the original web page. According to the framework of this study, web developer is able to design multiple of parallax scrolling web pages module and easy to render parallax scrolling effect. The parallax scrolling web conversion module has been developed in preliminary stage. Original web pages developers still need to update the internal HTML structure manually. This inconvenience problem can be solved by using plug-in or off-line web update in the next version of module. The module of this study expected to be combining with mobile web page due to the rapid growth of mobile devices. References 1. Anttonen, M., Salminen, A., Mikkonen, T., Taivalsaari, A.: Transforming the Web into a Real Application Platform: New Technologies, Emerging Trends and Missing Pieces. In: SAC 2011, March 21-25, TaiChung, Taiwan (2011) 2. Chen, W.A.: From HTML5/CSS3/Javascript to jquery/phonegap Android program design. Flag Corp. (2012) ISBN Wei, C., Lee, H., Molnar, L., Herold, M., Ramnath, R., Ramanathan, J.: Assisted Human-inthe-Loop Adaptation of Web Pages for Mobile Devices. In: IEEE 37th Annual Computer Software and Applications Conference, pp (2013)

9 Study on Parallax Scrolling Web Page Conversion Module Jarallax open source advanced javascript annimation library (November 25, 2013), 5. Interactive Resume of robby leonardi (January 17, 2014), 6. Apple Inc. (January 20, 2014) 7. W3Schools Online Web Tutorials (December 25, 2013),