<div id="slider"></div> <!-- -->
<div class="container">
<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400">
<g class="bow-arrow">
<g class="bow">
<path class="string" d="M 316,80 s 50,98, 50,100 -50,100 -50,100" fill="none" stroke="#2c3944" stroke-miterlimit="10"/>
<g class="bow-frame">
<path d="M283.53 122.07c4-3.33 3.9-8.35 11.6-13.77 5.92-4.16 12.8-12.9 14.29-17.17l-2.92-1.77.14-.26a86.22 86.22 0 0 1-16.92 20.74c-4.43 3.83-6.41 8.13-7.81 10-4.45 5.87-18.81 12.35-9.32 41.65 0 0 .82-.94 3.86-.9.04-1.59-9.88-24.51 7.08-38.52z" fill="#ffce54" />
<path d="M295.12 108.31c-7.7 5.41-7.57 10.44-11.6 13.77-17 14-7 36.91-7.08 38.5l1.12.06h.41c-.26-1-3.35-13.06-3-20 .29-5.67 4.79-12.89 6.19-14.61s3.73-3 7.28-9.26c3.79-6.64 12.51-8.94 21.87-25.05l-1-.58c-1.38 4.27-8.31 13-14.19 17.17z" fill="#fca12c" />
<path d="M309.67 266.4a63.51 63.51 0 0 0-9.12-12.33 65.69 65.69 0 0 1 9.09 12.35zm-32.53-65.9c-.1.39-.52 2.16-1 4.5.36-1.7.71-3.26 1-4.5z" fill="#ffce54" />
<path d="M293.93 248.71c-7.28-6-6.78-9.24-10.81-12.57-14-11.56-9.68-29.19-7.77-35.88-3-.64-3.23-2.18-3.25-2.42-8.92 28.29 5.07 34.77 9.43 40.59 1.39 1.86 3.34 6.16 7.75 10a85.27 85.27 0 0 1 16.26 19.93l3.34-1.6c-1.72-4.38-9.43-13.53-14.95-18.05z" fill="#ffce54" />
<path d="M283.57 235c-1.13-1.24-2-2-2.7-2.82a27.56 27.56 0 0 1-2.12-3.26 24.8 24.8 0 0 0 2.06 3.23c.69.85 1.6 1.62 2.76 2.85zm-8.82-17.72v.07a36.31 36.31 0 0 1 .25-5.08 33.24 33.24 0 0 0-.25 5.01z" fill="#ffce54" />
<path d="M278.75 229c-1.75-3.14-3.8-7.78-4-11.61v.23c.19 3.75 2.25 8.25 4 11.38zm-2.59-24c-.45 2.29-.89 4.84-1.16 7.27.29-2.5.74-5.13 1.16-7.27zm24.39 49.07c-5.46-5.78-10-8.26-12.46-12.63a35 35 0 0 0-4.31-6.16 34.8 34.8 0 0 1 4.32 6.24c2.45 4.34 7 6.85 12.45 12.55z" fill="#ffca47" />
<path d="M275.35 200.26c-1.91 6.69-6.23 24.31 7.77 35.88 4 3.33 3.54 6.6 10.81 12.57 5.52 4.52 13.23 13.68 15 18.07l.75-.36a65.69 65.69 0 0 0-9.09-12.35c-5.44-5.7-10-8.21-12.44-12.55a34.8 34.8 0 0 0-4.32-6.24l-.12-.13-.1-.11c-1.16-1.27-2.07-2-2.76-2.86a24.8 24.8 0 0 1-2.06-3.23c-1.76-3.08-3.82-7.58-4-11.38v-.3a33.24 33.24 0 0 1 .25-5c.27-2.43.7-5 1.16-7.27s.87-4.11 1-4.5c-.75-.05-1.96.27-1.85-.24z" fill="#fca12c" />
<path d="M314.71 79.17a32.88 32.88 0 0 1 1.86-3.95 3 3 0 0 0 .32-.88c-1-.76-2.31-.47-4 3l-.08.16a2.6 2.6 0 0 0 1.9 1.67zm-5.3 11.97l1 .58-1-.58c2.4-3.45 3.56-7.53 5.1-11.45a2.68 2.68 0 0 1-2-1.61c-1.17 2.38-2.67 5.27-5.89 11l-.14.26zm5.09 189.08a3.2 3.2 0 0 0-1.79 1.84c2.26 4.6 3.87 3.76 5 2.18l-.22.29a31.1 31.1 0 0 1-2.99-4.31zm-.28-.5a90.14 90.14 0 0 1-5.47-12.85l.93-.45-.75.36-3.34 1.6h-.07c.7 1.1 1.32 2.12 1.89 3.07a80.61 80.61 0 0 1 4.28 8.28c.29.63.55 1.21.8 1.75a3.33 3.33 0 0 1 1.73-1.76z" fill="#394856" />
<path d="M317 281.32a14.19 14.19 0 0 1-1-1.22h.23l-.1-.53h-.39a5.69 5.69 0 0 1-.18-1.31 4.28 4.28 0 0 0-.2-.87 103.42 103.42 0 0 0-5.51-11.07l-.17.08-.93.45a90.14 90.14 0 0 0 5.47 12.85 3.33 3.33 0 0 0-1.78 1.8c-.06.12-.13.23-.19.37l.35.38.11-.2a3.2 3.2 0 0 1 1.79-1.84 31.1 31.1 0 0 0 3 4.31l.22-.29c.7-1 .01-2.02-.72-2.91z" fill="#2c3944" />
<path d="M275.35 200.25c1.79-8.29 1.74-2.65 2.68-19.71s-.47-11.65-1.58-20c-3 0-3.86.9-3.86.9a2.05 2.05 0 0 1-.26.84c-.49.93-1.48 1.65-1.5 2.89 0 2 .59 2 .56 4.06s-.64 2-.67 4 .59 2 .56 4.05-.65 2-.67 4 .59 2 .56 4.06-.65 2-.67 4 .59 2 .56 4.06c0 1.19.84 2.47 1.07 3.46v.83c-.01.38.24 1.92 3.22 2.56z" fill="#394856" />
<path d="M276.49 160.57c1.1 8.32 2.52 2.84 1.58 20s-.89 11.42-2.68 19.71c-.11.51 1.11.19 1.79.24h.12s0-2 2-4.74a6.87 6.87 0 0 0 .89-2.92v-.09c.06-.42.1-.88.14-1.36.5-5.15 2-22.51-.38-25.93-2-2.83-1.86-4.79-1.86-4.79h-.41zm38.02-80.89c-1.53 3.92-2.7 8-5.1 11.45l1 .58.69-1.21.42-.75.6-1.12.41-.79.67-1.32.27-.55q.43-.88.86-1.8l.21-.46c.31-.67.62-1.35.92-2.05a4.11 4.11 0 0 0 .2-.82 5.69 5.69 0 0 1 .16-1.21l.33-.05.09-.51h-.17c.66-1 2.66-2.47 1.65-3.91a4.78 4.78 0 0 0-.37-.47 3.1 3.1 0 0 0-.41-.38 3 3 0 0 1-.32.88 32.88 32.88 0 0 0-1.86 3.95 2.6 2.6 0 0 1-1.92-1.62l-.08-.14-.34.39.16.28a2.68 2.68 0 0 0 1.93 1.63z" fill="#2c3944" />
</g>
</g>
<g class="arrow">
<path d="M402.4 178.65c-.79-1.83-3.5-6.52-10.51-6.54 7.01.02 9.72 4.7 10.51 6.54zm-20.99 0c-1.81-1.31-3.55-2.72-5.25-4.17-2.09.51-4 1.07-5.66 1.61 1 .86 2 1.71 3 2.56zm8.78 0h7.64c-2.24-2-4.52-3.94-6.9-5.73l-1-.74a66.42 66.42 0 0 0-7.07.89c1.29 1 2.62 1.88 3.93 2.87 1.15.87 2.28 1.78 3.4 2.71zm-24.19-.13a.48.48 0 0 1 .08-.23.48.48 0 0 0-.08.23zm7.58 2.24c-1 .86-2.06 1.72-3.09 2.59 1.62.55 3.57 1.1 5.66 1.61 1.72-1.46 3.47-2.88 5.3-4.2zm24.29 0h-7.63c-1.13.94-2.28 1.86-3.45 2.74s-2.64 1.91-3.94 2.87a66.45 66.45 0 0 0 7.07.89l1-.74c2.41-1.79 4.69-3.77 6.95-5.76z" fill="#ffce54" />
<path d="M366.06 180.76a.23.23 0 0 0-.08.15.24.24 0 0 1 .08-.15z" fill="#ffca47" />
<path d="M366.07 180.76a.24.24 0 0 0-.08.15.48.48 0 0 0 .08.23l.05.07a1.3 1.3 0 0 0 .16.18l.09.08.28.21.09.06.49.28h.05l.56.27.14.06.62.26h.11l1 .36.32.11.53.19c1-.87 2.05-1.73 3.09-2.59zm24.16 0h-8.78c-1.83 1.32-3.58 2.74-5.3 4.2 1.05.26 2.14.51 3.25.74 1.11.23 2.24.45 3.35.65 1.29-1 2.62-1.88 3.94-2.87s2.41-1.78 3.54-2.72zm.7 5.76l-1 .74h2c7.05 0 9.75-4.76 10.53-6.57h-4.55c-2.3 2.06-4.58 4.04-6.98 5.83z" fill="#fca12c" />
<path d="M366 178.52a.2.2 0 0 0 0 .12.24.24 0 0 1 0-.12z" fill="#ffca47" />
<path d="M373.54 178.65c-1-.85-2-1.7-3-2.56l-.3.1-.26.09-1 .35-.2.08-.87.37-.63.31-.51.3h-.05l-.31.23-.08.07a1.29 1.29 0 0 0-.16.19v.07a.48.48 0 0 0-.08.23.24.24 0 0 0 .07.12zm16.65 0c-1.12-.93-2.25-1.84-3.41-2.71-1.31-1-2.64-1.91-3.93-2.87h-.12c-1 .18-2.07.38-3.1.6l-.37.08c-1 .22-2 .44-3 .68h-.11c1.7 1.45 3.44 2.86 5.25 4.17zm7.64 0h4.57c-.79-1.83-3.5-6.52-10.51-6.54h-1.97l1 .74c2.39 1.85 4.67 3.81 6.91 5.8z" fill="#fca12c" />
<path d="M406.05 180.38l.08-.13a1 1 0 0 0 .12-.28H269.71v-.18c-1.57.39-2.62.4-3.27-.05a5.67 5.67 0 0 0 .13 1.09c.06.27.13.54.2.79h2.94v-.88h135.9a1.92 1.92 0 0 0 .37-.29z" fill="#2c3944" />
<path d="M266.44 179.75c.64.45 1.7.44 3.27.05v.2h136.55a1 1 0 0 0 0-.28 1.26 1.26 0 0 0-.66-1.06H269.71v-.88h-2.92a7.13 7.13 0 0 0-.35 1.93v.04z" fill="#394856" />
<path d="M267.15 183c-.07-.35-.23-.82-.39-1.36.16.54.32 1.01.39 1.36z" fill="#cbcbcb" />
<path d="M266.76 181.64c-.07-.25-.14-.52-.2-.79.06.27.13.53.2.79z" fill="#2c3944" />
<path d="M266.76 181.64c-.07-.25-.14-.52-.2-.79.06.27.13.53.2.79z" fill="#cbcbcb" />
<path d="M266.57 180.84a10.55 10.55 0 0 1-1.92 0 14.88 14.88 0 0 0 .37 1.75c.4.19.82.41 1.27.66l.3.15h.08l.15.06h.25a.37.37 0 0 0 .05-.27 1.84 1.84 0 0 0 0-.19c-.07-.35-.24-.82-.39-1.36-.04-.26-.11-.52-.16-.8z" fill="#a2a2a2" />
<path d="M266.1 187c.68-.12-.26-1.81-1-3.95.69 2.17 1.51 3.78 1 3.95zm-17.1-7.28c0 1.05 5 1.05 15.82 6.86-10.66-6.11-15.82-5.81-15.82-6.86z" fill="#cbcbcb" />
<path d="M264.53 179.7a10.63 10.63 0 0 0 .12 1.18 10.55 10.55 0 0 0 1.92 0 5.67 5.67 0 0 1-.13-1.09v-.05a7.13 7.13 0 0 1 .35-1.93c.43-1.43.93-2.44-.5-1.67-.44.23-.84.43-1.22.61 1-3 2.58-5.34-.25-3.88-10.62 5.48-15.71 5.82-15.81 6.86-.01-.01 15.52-.03 15.52-.03z" fill="#cbcbcb" />
<path d="M265.15 183.08l-.12-.44zm.95 3.92a2.49 2.49 0 0 1-1.28-.44c.69.44 1.08.54 1.28.44zm-17.1-7.31z" fill="#cbcbcb" />
<path d="M264.62 180.89a12.36 12.36 0 0 0 .39 1.74 14.88 14.88 0 0 1-.37-1.75z" fill="#cbcbcb" />
<path d="M264.62 180.89a12.36 12.36 0 0 0 .39 1.74 14.88 14.88 0 0 1-.37-1.75z" fill="#cbcbcb" />
<path d="M264.62 180.89a12.36 12.36 0 0 0 .39 1.74 14.88 14.88 0 0 1-.37-1.75z" fill="#cbcbcb" />
<path d="M264.62 180.89a10.63 10.63 0 0 1-.12-1.18h-15.52c0 1.05 5.16.75 15.82 6.86a2.49 2.49 0 0 0 1.28.44c.52-.2-.31-1.8-1-3.95l-.14-.45a12.36 12.36 0 0 1-.32-1.72z" fill="#a2a2a2" />
<path d="M406.31 179.7a1 1 0 0 1 0 .28 1 1 0 0 1-.12.28l.06-.09h6.42a2.38 2.38 0 0 0 2.16-1.24 1.16 1.16 0 0 1 .17.35c-.15-.5-.58-.87-1.47-.87h-8.09c-.21 0 0 .06.27.24a1.26 1.26 0 0 1 .6 1.05z" fill="#ffce54" />
<path d="M405.61 180.76l-.3.17.31-.17z" fill="#ffca47" />
<path d="M406 180.46a1.92 1.92 0 0 1-.37.29 1.93 1.93 0 0 0 .37-.29z" fill="#2c3944" />
<path d="M406 180.46a1.92 1.92 0 0 1-.37.29 1.93 1.93 0 0 0 .37-.29z" fill="#ffca47" />
<path d="M414.95 179.31a1.16 1.16 0 0 0-.17-.35 2.38 2.38 0 0 1-2.16 1.24h-6.42l-.06.09-.08.13-.08.08a1.93 1.93 0 0 1-.36.29l-.31.17h8.2c1.13 0 1.54-.58 1.54-1.29a1.49 1.49 0 0 0-.1-.36z" fill="#fca12c" />
</g>
</g>
</svg>
<canvas id="canvas" width=1200 height=900></canvas>
</div>
<div class="me">
<a class="me__link portfolio" href="http://www.petebarr.com" target='_blank'>Petebarr.com<span></span></a>
</div>
<a class="twitter" href="https://twitter.com/petebarr" target='_blank'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<path fill="#fff" d="M39.19 15.39a10.63 10.63 0 0 1-3.38 1.29 5.31 5.31 0 0 0-9.19 3.63 5.43 5.43 0 0 0 .14 1.22A15.11 15.11 0 0 1 15.8 16a5.39 5.39 0 0 0-.72 2.68 5.32 5.32 0 0 0 2.37 4.42 5.33 5.33 0 0 1-2.45-.7v.07a5.31 5.31 0 0 0 4.27 5.21 5.45 5.45 0 0 1-1.41.19 4.78 4.78 0 0 1-1-.1 5.32 5.32 0 0 0 5 3.69 10.64 10.64 0 0 1-6.6 2.28c-.43 0-.85 0-1.27-.07a15.13 15.13 0 0 0 23.28-12.74v-.69a10.87 10.87 0 0 0 2.66-2.75 10.84 10.84 0 0 1-3.06.84 5.35 5.35 0 0 0 2.34-2.94"></path>
<!-- <path fill="#fff" d="M26 5A21 21 0 1 1 5 26 21 21 0 0 1 26 5m0-4a25 25 0 1 0 25 25A25 25 0 0 0 26 1z"></path> -->
</svg>
</a>
$turq: rgba(100,200,200,0.2);
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body { background-color: #1d2b2b; }
.container {
position: absolute;
top: 50px;
left: 0;
width: 100%;
height: 75vw;
z-index: 0;
pointer-events: none;
border-radius: 15px;
background-color: $turq;
box-shadow: 4px 2px 33px -10px rgba(0,0,0,0.75);
}
svg {position: absolute; //абсолютная фиксированная
width: 100%;
height: 100%;
z-index: 2;
visibility: hidden;
}
#canvas { position: absolute;
width: 100%; height: 100%; // absolute
z-index: 1; cursor:pointer; pointer-events: auto; border-radius: 15px; background:#ccc; } // fixed;
.bow-arrow { transform: translate(60px, 20px); }
.me {
position: fixed;
z-index: 1000;
top: 24px;
left: 24px;
display: flex;
flex-direction: column;
}
.me__link {
position: relative;
margin-bottom: 16px;
color: white;
font-family: Helvetica, sans-serif;
text-decoration: none;
font-size: 16px;
span {
display: block;
position: absolute;
bottom: -3px;
left: 0;
height: 1px;
width: 5%;
background-color: white;
content: "";
transition: width 0.3s;
} &:hover span { width: 100%; }
}
#slider {
position: fixed; //relative absolyte
left: calc(35% + 25px);
width: calc(25% + 30px);
z-index: 20;
margin: 30px auto;
}
.twitter {
display: block;
position: fixed;
top: 16px;
right: 24px;
width: 40px;
height: 40px;
}
TweenMax.set('svg', { visibility: 'visible' });
var kinkedCurve = "M 316,80 s 0,95, 0,100 0,100 0,100"; // при отведении назад -> 95 дает резкий изгиб
var straightCurve = "M 316,80 s 0,55, 0,100 0,100 0,100"; // положение покоя при отпускании без перегибов -> 55
var snapTime = 0.5;
var drawTime = 0.6;
var snapAmp = 0.95;
var snapPer = 0.1;
var drawEase = Power2.easeOut;
var snapEase = Elastic.easeOut.config(snapAmp, snapPer);
tl = new TimelineMax( { repeat: -1, repeatDelay: 0 } );
tl.set('.arrow', { x: -62, y: 2, scale: 0.8 })
.set('.bow-frame', { x: 1, y: 1 })
.from('.string', drawTime, {attr:{d:kinkedCurve}, ease: drawEase})
.to('.bow', drawTime, { scaleX: 1.1, scaleY: 0.95, ease: drawEase, transformOrigin: "30px center" }, "-="+drawTime)
.to('.arrow', drawTime, { x: -5, ease: drawEase }, "-="+drawTime)
.to('.string', snapTime, {attr:{d:straightCurve}, ease: snapEase })
.to('.bow', snapTime, { scaleX: 1, scaleY: 1, ease: snapEase }, "-="+snapTime)
.to('.arrow', 0.085, { x: -400, ease: Linear.easeNone }, "-="+snapTime)
.fromTo('.arrow', 0.45, { x: 400 }, { x: -62, ease: Elastic.easeOut.config(1.5, 1.5), immediateRender: false }, "-=0.35")
tl.timeScale(1);
/* ==========================================================================
СЛАЙДЕР
==========================================================================
var $slider = $('#slider'),
sliderValue = { value: 0 };
$slider.slider({
range: false,
min: 0,
max: 100,
step: 1,
start: function() { tl.pause(); },
slide: function(event, ui) { tl.progress(ui.value / 100); },
stop: function() { tl.play(); }
});
tl.eventCallback("onUpdate", function() {
sliderValue.value = tl.progress() * 100;
$slider.slider(sliderValue);
}); */
/*************************/
/* Канвас *********/
/*************************/
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var centerX = 420;
var centerY = 300;
var radius = 40;
function draw(){ // Очищаем экран до светлого.
context.fillStyle = "rgba(50, 140, 140, 1)";
context.fillRect(originx,originy,width/scale,height/scale);
//context.fill();
context.beginPath(); // Рисуем серый квадрат.
context.rect(60,160,120,120);
context.fillStyle = "#c44";
context.fill();
context.lineWidth = 4;
context.strokeStyle = 'black';
context.stroke();
context.beginPath(); // Рисуем жёлтый квадрат.
context.rect(180, 80, 440, 200);
context.fillStyle = '#aa0';
context.fill();
context.lineWidth = 4;
context.strokeStyle = 'black';
context.stroke();
context.beginPath(); // Рисуем круг.
context.arc(120, centerY, radius, 0, 2 * Math.PI, false);
//context.closePath();
context.lineWidth = 20;
context.fillStyle = '#666';
context.fill();
context.strokeStyle = '#222';
context.stroke();
context.beginPath(); // Рисуем круг.
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 20;
context.fillStyle = '#666';
context.fill();
context.strokeStyle = '#222';
context.stroke();
context.font = 'italic 30pt Calibri';
context.fillStyle = 'blue';
context.fillText('Привет, мышье колесо!', 190, 140);
context.font = 'italic 30pt Calibri'; //context.textAlign = 'center';
//context.lineWidth = 2;
//context.strokeStyle = '#088';
//context.strokeText('- Привет, масштаб!', 15, 140); // 120, 450
context.fillStyle = '#a44';
context.fillText('(масштабируй мышой)', 190, 200);
context.shadowColor = '#333';
context.shadowBlur = 8;
context.shadowOffsetX = 3;
context.shadowOffsetY = 3;
}
// Рисуем петлю при 60FPS.
setInterval(draw, 1000/60);
// Масштабирование
var scale = 1;
var originx = 0;
var originy = 0;
var zoomIntensity = 0.1;
var width = 1200; //'width'
var height = 900; //'height'
var visibleWidth = width;
var visibleHeight = height;
canvas.onmousewheel = function (event){
event.preventDefault();
// Получаем смещение мыши.
var mousex = event.clientX - (canvas.offsetLeft );
var mousey = event.clientY - (canvas.offsetTop );
// Нормализуем колесо до +1 или -1.
var wheel = event.wheelDelta/240;
// Вычисляем коэффициент масштабирования.
var zoom = Math.exp(wheel*zoomIntensity);
// Перемещаем видимое положение в исходное место.
context.translate(originx, originy);
// Вычисляем новое видимое положение.
// Первоначально мышь стоит на расстоянии "мышь/масштаб" от угла.
// Мы хотим, чтобы мышь осталась после масштабирования на прежнем месте,
// но она находится на "мышь/новый_масштаб" вдали от угла.
// Поэтому смещаем начало координат (координаты угла) с учётом этого.
originx -= mousex/(scale*zoom) - mousex/scale;
originy -= mousey/(scale*zoom) - mousey/scale;
// Масштабируем его (в центре вокруг источника от вышеперечисленного).
context.scale(zoom, zoom);
// Сдвигаем видимое начало в правильное положение.
context.translate(-originx, -originy);
// Обновляем масштаб и остальное.
scale *= zoom;
visibleWidth = width/scale;
visibleHeight = height/scale; //console.log(visibleWidth,visibleHeight, mousex,mousey)
}
