Симпатия — это когда нравится внешность, влюблённость — когда нравится внешность и характер, а любовь — это когда нравятся даже недостатки.
12-ноября-2023, 20:42 2 0
Игра Тыквенный бросок для сайта на Хеллоуин. Простая игра в которой нужно просто бросать тыквы кликом мыши.
HTML
<svg id="defs" xmlns="http://www.w3.org/2000/svg">
<linearGradient id="_x2E_stem_1_" gradientUnits="userSpaceOnUse" x1="211.5078" y1="105.9541" x2="249.011" y2="105.9541">
<stop offset="0" style="stop-color:#006837"/>
<stop offset="7.625596e-02" style="stop-color:#007C3E"/>
<stop offset="0.1643" style="stop-color:#008C43"/>
<stop offset="0.2319" style="stop-color:#009245"/>
<stop offset="0.5141" style="stop-color:#339933"/>
<stop offset="0.7929" style="stop-color:#006837"/>
<stop offset="0.975" style="stop-color:#39B54A"/>
</linearGradient>
<linearGradient id="_x2E_pumpkin_1_" gradientUnits="userSpaceOnUse" x1="75.7889" y1="270.599" x2="397.8843" y2="270.599">
<stop offset="0" style="stop-color:#F15A24"/>
<stop offset="2.075104e-02" style="stop-color:#F26223"/>
<stop offset="0.103" style="stop-color:#F57D20"/>
<stop offset="0.176" style="stop-color:#F68D1F"/>
<stop offset="0.2319" style="stop-color:#F7931E"/>
<stop offset="0.5141" style="stop-color:#F15A24"/>
<stop offset="0.7929" style="stop-color:#F7931E"/>
<stop offset="0.975" style="stop-color:#F15A24"/>
</linearGradient>
<defs>
<symbol id="jack-o-lantern">
<path class="stem st0" d="M230.3,148L230.3,148c-10.4,0-18.8-8.4-18.8-18.8c1.3-13.8,2.7-27.7,4-41.5
c-4.1-5.8-4-8.8-3.1-10.6c1-2.1,2.8-1.5,5.9-4.4c3.6-3.4,3.3-6.2,6.4-7.9c2-1.1,4.1-1,5.6-0.8h0c1.8,1.8,3.9,4.1,5.7,7
c4.2,6.4,5.7,12.7,6.2,16.8c2.3,13.8,4.5,27.7,6.8,41.5C249,139.6,240.6,148,230.3,148z"/>
<path class="pumpkin st1" d="M76,269.1c0.6-36.9,1.4-83,34-120.1c8.8-10.1,29.9-34,59.3-35.3
c27.3-1.2,33.1,18.4,64.1,19.3c31.9,0.9,39.8-19.4,68.6-17c26.2,2.2,44.5,21,54.7,31.7c37.5,38.9,39.5,90.7,40.7,121.4
c1.2,32.3,4.4,113.8-43.3,142.6c-21.1,12.7-50.2,13.9-58.1,14.3c-25,1-29.6-5.3-59.2-4.9c-31.3,0.4-35.9,7.6-58.8,6.4
c-2.4-0.1-37.2-2.2-63.2-22.4C74.3,373.7,75.3,314.8,76,269.1z"/>
<path id="_x2E_eye-whites" class="left-eye st2" d="M209.1,234.7c1.5,9.3-16,24-32.6,22.8c-19.6-1.4-29.4-24.5-32.5-31.9
c-2.6-6.1-6.3-15-2.8-18.7c3.1-3.1,9.6-0.4,41.1,12.8C199.7,227.1,208.5,230.9,209.1,234.7z"/>
<path class="right-eye st2" d="M273.4,234.7c-1.5,9.3,16,24,32.6,22.8c19.6-1.4,29.4-24.5,32.5-31.9
c2.6-6.1,6.3-15,2.8-18.7c-3.1-3.1-9.6-0.4-41.1,12.8C282.7,227.1,274,230.9,273.4,234.7z"/>
<path class="st2" d="M328.5,332c0,17.1-44.7,54.5-91.7,54.5s-97.1-41.6-97.1-58.7s50.1,0.2,97.1,0.2S328.5,314.9,328.5,332z"/>
</symbol>
</defs>
</svg>
<h1>Happy Halloween!</h1>
<h2>Touch to throw a pumpkin</h2>
<div class="container"></div>
<script id="jackTemplate" type="text/template">
<div class="jack-image">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480">
<use xlink:href="#jack-o-lantern" />
</svg>
</div>
</script>
CSS
html {
font-size: 80%;
}
@media screen and (max-width: 480px) {
html {
font-size: 40%;
}
}
body {
font-family: "Rock Salt";
overflow: hidden;
background: hsl(190, 20%, 10%);
text-align: center;
visibility: hidden;
}
h1 {
color: white;
user-select: none;
margin: 0;
font-size: 3rem;
letter-spacing: 4px;
}
h2 {
color: hsl(37, 100%, 69%);
font-size: 1.65rem;
user-select: none;
margin: 0;
}
.container {
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.jack {
height: 40vmin;
width: 40vmin;
position: absolute;
transform-origin: top left;
}
.jack-image {
transform: translate(-20vmin, -20vmin);
}
#defs {
height: 0;
width: 0;
overflow: hidden;
}
.st0 {
fill: url(#_x2E_stem_1_);
}
.st1 {
fill: url(#_x2E_pumpkin_1_);
stroke: #f15a24;
stroke-width: 4;
stroke-miterlimit: 10;
}
.st2 {
fill: #ffc338;
stroke: #5e4900;
stroke-width: 4;
stroke-miterlimit: 10;
}
JS
var container = document.querySelector('.container');
var jackTemplate = document.querySelector('#jackTemplate').innerHTML;
function hitTheRoadJack(x, y) {
var jack = document.createElement('div');
jack.classList.add('jack');
jack.innerHTML = jackTemplate;
jack.style.left = x;
jack.style.top = y;
container.appendChild(jack)
var t1 = just.animate({
targets: jack,
duration: just.shuffle([1000, 1100, 1200]),
easing: 'ease-out',
web: {
opacity: [1, 1, 0],
scale: .1,
y: just.random(-140, -110, 'vmin', true),
x: just.random(-40, 40, 'vmin', true),
rotate: -420
}
});
t1.play({ destroy: true });
t1.once('finish', function() {
container.removeChild(jack)
})
}
function intro() {
// show document body
document.body.style.visibility = 'visible';
var t1 = just.animate({
targets: just.splitText('h1').characters,
duration: 430,
endDelay: 600,
stagger: 80,
web: {
opacity: [0, .3, 1],
x: [0, -10, 0, -15, 0, -5, 0],
y: [40, 0]
}
})
t1.animate({
targets: 'h2',
duration: 1000,
web: {
opacity: [0, 1]
}
})
t1.play();
t1.on('finish', function() {
hitTheRoadJack('50vw', '70vw')
})
}
var last = undefined
container.addEventListener('click', function(evt) {
var now = performance.now()
if (last === undefined || (now - last) > 200) {
hitTheRoadJack(evt.clientX + 'px', evt.clientY + 'px');
last = now;
}
})
intro();