jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-03-06 17:10:55 +03:00
parent 2022aafc13
commit dceccedb58
60 changed files with 1730 additions and 272 deletions
Download patch file Download diff file Expand all files Collapse all files

46
5-animation/2-css-transitions/bezier-train-over.svg
View file

@ -1 +1,45 @@
<svg width="225" height="331" viewBox="0 0 225 331" xmlns="http://www.w3.org/2000/svg"><title>bezier-train-over.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path stroke="#979797" stroke-dasharray="3,2,3,2" d="M34 89h150v150H34z"/><text font-family="Consolas" font-size="12" font-weight="bold" fill="#838383" transform="translate(0 76)"><tspan x="189" y="9">(1,1)</tspan></text><text font-family="Consolas" font-size="12" font-weight="bold" fill="#838383" transform="translate(0 76)"><tspan x="0" y="155">(0,0)</tspan></text><text font-family="Consolas" font-size="12" font-weight="bold" fill="#838383" transform="translate(0 76)"><tspan x="0" y="9">(0,1)</tspan></text><text font-family="Consolas" font-size="12" font-weight="bold" fill="#838383" transform="translate(0 76)"><tspan x="189" y="155">(1,0)</tspan></text><path d="M34.5 239.5l73 73" stroke="#E8C48E" stroke-linecap="square"/><path d="M34 239c75 75 75-225 150-150" stroke="#CB1E31" stroke-width="2"/><circle stroke="#E8C48E" fill="#fff" cx="34" cy="239" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="30" y="261">1</tspan></text><circle stroke="#E8C48E" fill="#fff" cx="109" cy="314" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="92" y="320">2</tspan></text><path d="M110.5 15.5l73 73" stroke="#E8C48E" stroke-linecap="square"/><circle stroke="#E8C48E" fill="#fff" cx="184" cy="89" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="188" y="107">4</tspan></text><circle stroke="#E8C48E" fill="#fff" cx="109" cy="14" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="92" y="21">3</tspan></text></g></svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="225px" height="331px" viewBox="0 0 225 331" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>bezier-train-over.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="bezier-train-over.svg" sketch:type="MSArtboardGroup">
<g id="Group" sketch:type="MSLayerGroup" transform="translate(0.000000, 76.000000)">
<rect id="Rectangle-233" stroke="#979797" stroke-dasharray="3,2,3,2" sketch:type="MSShapeGroup" x="34" y="13" width="150" height="150"></rect>
<text id="(1,1)" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="bold" fill="#838383">
<tspan x="189" y="9">(1,1)</tspan>
</text>
<text id="(0,0)" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="bold" fill="#838383">
<tspan x="0" y="155">(0,0)</tspan>
</text>
<text id="(0,1)" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="bold" fill="#838383">
<tspan x="0" y="9">(0,1)</tspan>
</text>
<text id="(1,0)" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="bold" fill="#838383">
<tspan x="189" y="155">(1,0)</tspan>
</text>
</g>
<path d="M34.5,239.5 L107.5,312.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M34,239 C109,314 109,14 184,89" id="bezier-path" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="34" cy="239" r="4"></circle>
<text id="-2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="30" y="261">1</tspan>
</text>
<circle id="Oval-6" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="109" cy="314" r="4"></circle>
<text id="-3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="92" y="320">2</tspan>
</text>
<path d="M110.5,15.5 L183.5,88.5" id="Line" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<circle id="Oval-5" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="184" cy="89" r="4"></circle>
<text id="-5" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="188" y="107">4</tspan>
</text>
<circle id="Oval-7" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="109" cy="14" r="4"></circle>
<text id="-4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="92" y="21">3</tspan>
</text>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

Before After
Before After

31
5-animation/2-css-transitions/ease-in-out.svg
View file

@ -1 +1,30 @@
<svg width="149" height="187" viewBox="0 0 149 187" xmlns="http://www.w3.org/2000/svg"><title>ease-in-out.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M23.688 143.905c42.32 0 58.04-100.414 100.467-100.414" stroke="#CB1E31" stroke-width="2"/><path d="M24.5 143.5h42.297M83.5 43.5h42.297" stroke="#E8C48E" stroke-linecap="square"/><circle stroke="#E8C48E" fill="#fff" cx="24" cy="144" r="4"/><circle stroke="#E8C48E" fill="#fff" cx="124" cy="43" r="4"/><circle stroke="#E8C48E" fill="#fff" cx="82" cy="43" r="4"/><circle stroke="#E8C48E" fill="#fff" cx="66" cy="143" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="20" y="165">1</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="62" y="165">2</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="78" y="35">3</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="121" y="35">4</tspan></text></g></svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>ease-in-out.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="ease-in-out.svg" sketch:type="MSArtboardGroup">
<path d="M23.6882043,143.904835 C66.0081124,143.904815 81.7292657,43.4905742 124.154864,43.4905689" id="Path-1" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<path d="M24.5,143.5 L66.7965736,143.5" id="Line" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M83.5,43.5 L125.796574,43.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="24" cy="144" r="4"></circle>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="124" cy="43" r="4"></circle>
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="82" cy="43" r="4"></circle>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="66" cy="143" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="62" y="165">2</tspan>
</text>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="78" y="35">3</tspan>
</text>
<text id="4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="121" y="35">4</tspan>
</text>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

Before After
Before After

31
5-animation/2-css-transitions/train-curve.svg
View file

@ -1 +1,30 @@
<svg width="149" height="187" viewBox="0 0 149 187" xmlns="http://www.w3.org/2000/svg"><title>train-curve.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M26.137 142.908c0-49.408 50.364-99.664 100.358-99.664" stroke="#CB1E31" stroke-width="2"/><path d="M25.5 143.5V93.34" stroke="#E8C48E" stroke-linecap="square"/><circle stroke="#E8C48E" fill="#fff" cx="26" cy="144" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="22" y="165">1</tspan></text><circle stroke="#E8C48E" fill="#fff" cx="26" cy="94" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="22" y="87">2</tspan></text><path d="M75.5 43.5h50.636" stroke="#E8C48E" stroke-linecap="square"/><circle stroke="#E8C48E" fill="#fff" cx="126" cy="44" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="122" y="36">4</tspan></text><circle stroke="#E8C48E" fill="#fff" cx="76" cy="44" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="72" y="36">3</tspan></text></g></svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>train-curve.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="train-curve.svg" sketch:type="MSArtboardGroup">
<path d="M26.1366543,142.907525 C26.1365899,93.4999868 76.5010648,43.244154 126.495114,43.2441555" id="Path-13" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<path d="M25.5,143.5 L25.5,93.3402552" id="Line" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="26" cy="144" r="4"></circle>
<text id="-2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="22" y="165">1</tspan>
</text>
<circle id="Oval-6" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="26" cy="94" r="4"></circle>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="22" y="87">2</tspan>
</text>
<path d="M75.5,43.5 L126.135956,43.5" id="Line" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<circle id="Oval-5" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="126" cy="44" r="4"></circle>
<text id="4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="122" y="36">4</tspan>
</text>
<circle id="Oval-7" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="76" cy="44" r="4"></circle>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="72" y="36">3</tspan>
</text>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

Before After
Before After