» » html5

 
Sort articles by: Date | Most Rates | Most Views | Comments | Alphabet

Pin the HTML5 video player to the bottom right corner of the page when the page scrolls

Author: bamboo06 on 7-04-2019, 01:06, views: 5110

0 On a page with video playback, sometimes we need to scroll the page to view video-related content information, such as profiles, related comments, etc., then when scrolling the page, the video player will leave the window area, this time we can use JS and CSS technology will The player toggle is fixed to the bottom right corner of the page.
Pin the HTML5 video player to the bottom right corner of the page when the page scrolls

Use jquery to detect the scrolling event of the window and switch the videoBox's class class to the appropriate position to hide and appear in the lower right corner.

Category: Javascript / CSS

 

Implementation of file breakpoint resume by HTML5

Author: bamboo06 on 31-01-2019, 22:10, views: 1717

1 HTML5's FILE api has a slice method that splits the BLOB object. The front end obtains the corresponding file through the FileList object, segments the large file according to the specified splitting manner, and then passes it to the back end one by one, and then the back end then splicing the files in a sequence.
Implementation of file breakpoint resume by HTML5

At present, there are two commonly used methods for resuming breakpoints. One is to upload files through the websocket interface, and the other is through ajax. Both methods have their own advantages. Although websocket sounds more high-end, it uses different ones. The other algorithms outside the protocol are basically similar, and the server needs to open the ws interface. Here, the relatively convenient ajax is used to illustrate the idea of uploading the breakpoint.

Category: Javascript / HTML5

 

Drag and Drop Drag and Drop for HTML5

Author: bamboo06 on 11-11-2018, 21:41, views: 2329

1 Drag & Drop is a common feature that grabs an object and drags it to another location. In HTML5, drag and drop is part of the standard, and any element can be dragged and dropped. In the past, we used the Mousedown, Mouseove, Mouseup and other events of the mouse to constantly acquire the coordinates of the mouse to modify the position of the element. Now the html5 native Drag & Drop event (DnD) is convenient and the performance is improved.

Internet Explorer 9+, Firefox, Opera 12, Chrome, and Safari 5 support drag and drop.

Category: HTML5

 

HTML5 - based video player with barrage function

Author: bamboo06 on 14-12-2016, 01:23, views: 11062

24 Danmmu Player is a barrage of Html5 video player. When we watch the video, you can express their views on the video, when you click the Send button, the content will be published in the video screen in the form of paintball issue, and do rolling animation, video barrage function.
HTML5 - based video player with barrage function

Category: Javascript / HTML5 / Plugins

 

Responsive HTML5 touchable audio player

Author: bamboo06 on 10-08-2015, 00:58, views: 3237

7 HTML5's audio provides audio playback, but the native style is not very nice looking, and each browser audio appears to show disunity. We can be a little package under the audio, you can achieve a response beautiful player style which can be touched.
Responsive HTML5 touchable audio player

Category: Javascript / CSS / HTML5

 

Use HTML5 + PHP + jQuery to change clothes by shaking your phone

Author: bamboo06 on 9-04-2015, 23:59, views: 4984

1 In the previous article, we use HTML5 to listen to the phone in order to achieve a shaking effect. Shake the phone can be applied to many scenarios, such as a shake to change the draw, shake songs, search. In this paper, I will tell you how to use HTML5 + PHP + jQuery to achieve the effect of mobile phone shaking to change clothes.
Use HTML5 + PHP + jQuery to  change clothes by shaking your phone

Category: PHP Scripts / Javascript / Mobile / HTML5

 

Mobile phone gravity and direction sensing applications by HTML5 - shaking effect

Author: bamboo06 on 9-04-2015, 22:47, views: 6999

4 HTML5 has an important feature: DeviceOrientation, it is the underlying direction and motion sensors were advanced packaging, it allows us to easily achieve interesting features gravity sensor, compass and so on. This article will tell you with examples using HTML5 motion and direction of gravity sensors to achieve the phone a shake effect.
Mobile phone gravity and direction sensing applications by HTML5 - shaking effect

Category: Javascript / Mobile / HTML5

 

Use HTML5 + CSS3 to achieve vertical axis response

Author: bamboo06 on 16-03-2015, 00:03, views: 2726

4 Timeline pages are generally used to show the main line to the time of the event, such as the company's corporate website development process, such as the common. This article will give you about a beautiful HTML5 and CSS3 based vertical axis, it can respond to the page layout for HTML5 development of PC and mobile phone WEB applications.
Use HTML5 + CSS3 to achieve vertical axis response

Category: CSS / HTML5

 

7 wonderful AD HTML 5 template

Author: bamboo06 on 22-12-2014, 03:11, views: 21566

0 Today we will offer you some creative great html5 ad templates. If you like them, please check the links.
HTML 5 Ad Templates for Sales
7 wonderful AD HTML 5 template

Features:
Sales Html5 Ad Templates, fully compatible with Google Web Designer.
Current Dimensions: 300×100 (expandable) 300×250 125×125
Animated Ad Templates. Perfect for Sales on Products

Category: Graphics

 

Create a parallax scrolling effect using Skrollr page

Author: bamboo06 on 3-11-2014, 01:50, views: 6281

4 Parallax scrolling refers to a multi-layer background move at different speeds, the formation of three-dimensional motion effects, bringing excellent visual experience. As users of the increasing demands of visual experience, WEB developers to start adding various special effects elements in web pages to meet the needs of users. Today, this article has given you recommend a good parallax animation javascript library --Skrollr.js
Create a parallax scrolling effect using Skrollr page

Skrollr is a use of HTML5 and CSS3 parallax scrolling lightweight javascript library. It is not dependent on the independent libraries of other frameworks that lets you quickly create a parallax scrolling effect. It allows us to set the CSS property keyframes to any element, then it will automatically form animation. The more important point is that the use of these libraries do not write complex JS code and compatible with mainstream browsers, mobile phones and other mobile terminal adapter and other features.

Category: Javascript / CSS / HTML5 / Plugins

 
Previous Next