Blunders Code 404 Animated SVG

Description

This Is a Scalable Vector Images (SVG) animation, created with the assistance of Dmitry Baranovskiy’s Snap.svg JavaScript library. It begins with the SOS international Morse code misery signal, which is three dots, three dashes and three dots. Then the dashes morph to dots. the crowd of nine dots attracts the letters SOS, the place dots in each staff draw the inner and outer stroke of 1 letter and the 3rd is used as a filler. The animation continues with morphing animation of the ‘S’ letters, which change into ‘FOUR’ digits. The ‘O’ letter turns into a magnifying glass, which movements up and down slightly so as to reveal a back button.

easy methods to use the Visible Builder

Youtube video instructional

The Visible Builder is a assist tool that resides within the VISUAL_BUILDER folder of the package you may have purchased.

if you load the index.html web page you'll see an interface, that permits you to set values to all the choices, that define the animation look and really feel. while you hit the play button the set panel will cover, the animation will play and if you are happy with it, you are going to want to select and replica the code, that sits within the left a part of the panel. This code will have to be pasted in the web page where you intend to make use of the animation. in the simple_usage.html web page i've positioned comments around the part of code that you simply wish to change:

//=================================== //PASTE CODE FROM VISIBLE BUILDER HERE var pnf_404_time_m = 120; var pnf_404_s_letter_color1 = "#ffffff"; var pnf_404_s_letter_color2 = "#0bb5b5"; var pnf_404_o_letter_color = "#ff255f"; var pnf_404_button_color = "#ffffff"; var pnf_404_global_stroke_width = 2; var pnf_404_stroke_color1 = "#ffffff"; var pnf_404_stroke_color2 = "#0bb5b5"; var pnf_404_shadow_color = "#000000"; //===================================

This Is transparent animation, so if you happen to need to change the background color of the page you may have to take the price from the Visual Builder and put it as a method setting. in the simple_usage.html page i've feedback subsequent to the road where you want to replace the worth of the heritage-color:

frame background-color: #3d1a26;/* TAKE THIS VALUE FROM THE VISUAL BUILDER */ margin: 0px;

the rate atmosphere is in milliseconds. All time intervals used within the animation are in accordance with this quantity.

Utilization

1. In Order to play the animation you need to add a svg item to your 404 page. It must have an identification attribute and in addition width and top. in the event you set the width as a proportion the animation can be responsive. you'll set a peak in pixels, with a view to act as a most top within the bigger resolutions:

<svg id="pnf_404_svg" width="ONE HUNDRED%" top="500px"></svg>

2. After you've gotten the svg part you'll need to import a few JavaScript information. Those are Snap.svg library, and JavaScript file with the animation directions. In my demos, I add those within the header of the report.

<script kind="textual content/javascript" src="snap.svg-min.js"></script> <script type="textual content/javascript" src="pnf_404_animation.min.js"></script>

THREE. Lastly you need to upload some more JavaScript, to be able to set the houses of the animation like colours, speed, stroke width, and so on. and run the animation. in this portion you are going to additionally need to come with purposes, which take care of the end animation event and the back button click on event.

<script sort="textual content/javascript"> var pnf_404_time_m = 120; var pnf_404_s_letter_color1 = "#ffffff"; var pnf_404_s_letter_color2 = "#0bb5b5"; var pnf_404_o_letter_color = "#ff255f"; var pnf_404_button_color = "#ffffff"; var pnf_404_global_stroke_width = 2; var pnf_404_stroke_color1 = "#ffffff"; var pnf_404_stroke_color2 = "#0bb5b5"; var pnf_404_shadow_color = "#000000"; var pnf_404_svg = "pnf_404_svg";//id of SVG object function pnf_404_complete_handler() //PLACE SOME CODE HERE WHICH WILL BE EXECUTED AFTER THE ANIMATION COMLPETES serve as pnf_404_back_button() //CLICK HANDLING FOR THE BACK BUTTON window.history.back(); window.onload = serve as() pnf_404_page_not_found_animation( pnf_404_svg, pnf_404_time_m, pnf_404_s_letter_color1, pnf_404_s_letter_color2, pnf_404_o_letter_color, pnf_404_button_color, pnf_404_global_stroke_width, pnf_404_stroke_color1, pnf_404_stroke_color2, pnf_404_shadow_color ); ; </script>

Features

• Responsive habits.
• Transparent history.
• Visible Builder device that helps you create an distinctive glance of the animation.
• Infinite color mixtures for the letters, stroke, shadow and back button.
• Ability to set animation pace.
• The animation itself features: path morphs, protecting, filters, translation alongside trail, drawing of trail, and so forth.

Changelog

LAUNCHED 28 JUL 2015
FULL DOWNLOAD