Снеговик на HTML5 Canvas и SVG

Разместил: Al-Sher
Опубликовано: 28 декабря 2018

Прикольный снеговик, который обижается, если по нему тыкнуть. Думаю любой может обидеться, когда его просто так тыкают 😊

Для начала посмотрите ДЕМО

Установка:

1#: В самый низ вашего CSS вставьте:

#scene{
position: fixed;
width: auto;
height: 100%;
bottom:0px;
}
canvas{
opacity:0;
position:fixed;
}

#scene{

position: fixed;

width: auto;

height: 100%;

bottom:0px;

}

canvas{

opacity:0;

position:fixed;

}

2#: Следующий код поместите на тех страницах, где должен находиться снеговик:

<canvas id="canvas" width="1000" height="600">
Canvas is not supported.
</canvas>
<svg id="scene" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 100" opacity="0">
<path id="shadow" fill="#D9E2E8" d="M42,99c-39.8,0.1-25.5-9.4,0-8.1C89.8,93.4,66.5,98.9,42,99z"></path>
<g id="snowman" cursor="pointer">
<path id="body" fill="#EAF5F9" d="M35.6,53.2c23-2.6,42.2,41.9,3.4,44.3C0.2,99.9,6.7,56.4,35.6,53.2z"></path>
<path id="neck" fill="#1A92B7" d="M36,63c-12.8,0-18.4-2.9-16.8-6.2c1.4-2.8,12.6-1,17.1-1c8.4,0,14.5-4.3,17,0
C55.5,59.7,47,63,36,63z"></path>
<path id="scarf" fill="#1A92B7" d="M49.4,76.9c-0.7-4.2-3.2-18.3-7.1-17.3c-3.5,0.9-1.7,10.8-0.7,15.4c0.3,1.5,1.5,3.1,3,3.4
c1.3,0.3,2.6,0.3,3.9,0.2C49.2,78.5,49.6,77.5,49.4,76.9z"></path>
<g id="head">
<path id="top" fill="#EAF5F9" d="M33.5,26.5c17.7-0.2,30.2,33.8,0.9,32.2C6,57.3,15.7,26.7,33.5,26.5z"></path>
<path id="eye1" d="M41.9,38c0.2,2-3.4,3.9-3.6,0.6C38.1,35.3,41.7,36,41.9,38z"></path>
<path id="eye2" d="M27.8,40.6c0.8,1.8,5.2,1.4,3.6-1.5C30,36.2,27,38.7,27.8,40.6z"></path>
<path id="mouth" fill="none" stroke="#000000" stroke-miterlimit="10" d="M27.4,49c0.4,0.3,0.8,0.6,1.2,0.9c0.4,0.3,0.8,0.6,1.1,1
c0.3,0.4,0.6,0.8,1.1,0.9c0.5,0.1,0.9-0.3,1.4-0.4c0.8-0.2,1.7,0.2,2.6,0.4c1.3,0.3,2.6-0.1,3.9,0.1c0.4,0.1,0.9,0.2,1.3,0.1
c0.4-0.1,0.7-0.5,1.1-0.6c0.3-0.1,0.6-0.1,0.9-0.1c0.5-0.1,1-0.4,1.4-0.7c0.3-0.3,1.3-1.2,1.6-1.5"></path>
<path id="nose" fill="#DB7816" d="M35.4,43c-0.6,0.6-0.9,1.2-0.8,1.9c0.1,1,1,1.9,2,2c1.7,0.2,3.3,0.3,4.7,0.4
c2.9,0.3,5.5-0.9,8.3-0.9c0.7,0,0.9-0.8,0.3-1.2c-1.6-1-3.3-1.6-5.3-1.8c-1.5-0.2-2.5,0.2-4.2-0.1c-1-0.2-1.9-0.8-2.8-1
C36.7,42.2,35.9,42.4,35.4,43z"></path>
</g>
</g>
</svg>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script>
<script type="text/javascript">
///////////
// Snowman
TweenMax.to("#head", 1.5, {
startAt: {
rotation: -10
},
rotation: 10,
yoyo: true,
transformOrigin: "50% 50%",
repeat: -1,
ease: Sine.easeInOut
});
TweenMax.to("#nose", 1.5, {
startAt: {
rotation: -10
},
rotation: 10,
scaleX: .8,
yoyo: true,
transformOrigin: "5% 95%",
repeat: -1,
ease: Sine.easeInOut
});
TweenMax.to("#scarf", 1.5, {
startAt: {
rotation: 20
},
rotation: -20,
yoyo: true,
transformOrigin: "50% 10%",
repeat: -1,
ease: Sine.easeInOut
});
TweenMax.to("#shadow", 1.5, {
startAt: {
x: -5
},
x: 0,
yoyo: true,
repeat: -1,
ease: Sine.easeInOut
});
TweenMax.to("#snowman", 1.5, {
startAt: {
rotation: -5
},
rotation: 7,
yoyo: true,
transformOrigin: "50% 90%",
repeat: -1,
ease: Sine.easeInOut
});
TweenMax.to("#snowman", .3, {
scaleX: .95,
scaleY: 1.05,
yoyo: true,
transformOrigin: "50% 95%",
repeat: -1,
ease: Sine.easeInOut
});
blink();
document.getElementById("snowman").addEventListener("click", knockHimDown);

function knockHimDown() {
TweenMax.to("#snowman", .5, {
rotation: -50,
ease: Sine.easeOut
});
TweenMax.to("#snowman", 1.2, {
delay: 1.2,
rotation: 0,
ease: Sine.easeInOut
});
TweenMax.set("#mouth", {
scaleY: -1,
transformOrigin: "50% 80%"
});
TweenMax.to("#snowman", 1.5, {
delay: 3,
rotation: 7,
yoyo: true,
transformOrigin: "50% 90%",
repeat: -1,
ease: Sine.easeInOut
});
TweenMax.to("#shadow", .5, {
x: -15,
ease: Sine.easeOut
});
TweenMax.to("#shadow", 1.2, {
delay: 1.2,
x: -5,
ease: Sine.easeInOut
});
TweenMax.to("#shadow", 1.5, {
delay: 3,
x: 0,
yoyo: true,
repeat: -1,
ease: Sine.easeInOut
});
}

function blink() {
TweenMax.to(["#eye1,#eye2"], .1, {
delay: 5 * Math.random(),
scaleY: .2,
yoyo: true,
repeat: 1,
transformOrigin: "50% 50%",
onComplete: blink
});
}
////////////////
// Snow

var numFlakes = 1000;
var minScale = .15;
var maxScale = .5;
var minDuration = .3;
var maxDuration = 2;
var wind = 600;
var wiggle = 60;
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
var snowflakeImage = new Image();
snowflakeImage.src = "https://dl.dropboxusercontent.com/u/1256960/ Research/JS/Snowman/snowflake.png";
var snowflakes = [];
snowflakeImage.onload = init;
onResize();
window.onresize = onResize;

// wait until the snowflake image loads
function init() {
TweenMax.to("#scene", 0.3, {
opacity: 1
});
TweenMax.to("canvas", 7, {
delay: .3,
opacity: 1
});
for (var i = 0; i < numFlakes; i++) {
// create a snowflake object and its properties
var snowflake = {
initX: (canvas.width * 2 * Math.random()) - (canvas.width * .5),
y: -16,
scale: (Math.random() * (maxScale - minScale)) + minScale,
angle: Math.random() * Math.PI * 2,
drift: 0,
radius: (Math.random() * wiggle) - (wiggle * 0.5)
};
snowflakes.push(snowflake);
// create a tween that animates the angle and y properties - call update each frame
tween = TweenMax.to(snowflake, (Math.random() * (maxDuration - minDuration)) + minDuration, {
repeat: -1,
angle: Math.random() * 20,
drift: (Math.random() * wind),
y: window.innerHeight,
ease: Linear.easeNone,
onUpdate: update,
onUpdateParams: [snowflake]
});
tween.progress(Math.random());
}
}

function update(snowflake) {
// modify the x value based on cos of the angle
snowflake.x = (snowflake.initX + Math.cos(snowflake.angle) * snowflake.radius) + snowflake.drift;
}

// create a render loop that fires approximately every 16ms
TweenMax.ticker.addEventListener("tick", render);

function render() {
// clear old canvas
context.clearRect(0, 0, window.innerWidth * 2, window.innerHeight);
for (var i = 0; i < numFlakes; i++) {
var snowflake = snowflakes[i];
if (snowflake) {
// draw snowflakes to canvas
context.drawImage(snowflakeImage, snowflake.x, snowflake.y, 16 * snowflake.scale, 16 * snowflake.scale);
}
}
}

function onResize(e) {
//readjust size of canvas
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
kill();
init();
}

function kill() {
// shut down all currently running tweens
for (var i = 0; i < numFlakes; i++) {
var snowflake = snowflakes[i];
TweenMax.killTweensOf(snowflake);
}
snowflakes = [];
}
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

Canvas is not supported.

</canvas>

<path id="neck" fill="#1A92B7" d="M36,63c-12.8,0-18.4-2.9-16.8-6.2c1.4-2.8,12.6-1,17.1-1c8.4,0,14.5-4.3,17,0

C55.5,59.7,47,63,36,63z"></path>

<path id="scarf" fill="#1A92B7" d="M49.4,76.9c-0.7-4.2-3.2-18.3-7.1-17.3c-3.5,0.9-1.7,10.8-0.7,15.4c0.3,1.5,1.5,3.1,3,3.4

c1.3,0.3,2.6,0.3,3.9,0.2C49.2,78.5,49.6,77.5,49.4,76.9z"></path>

<path id="mouth" fill="none" stroke="#000000" stroke-miterlimit="10" d="M27.4,49c0.4,0.3,0.8,0.6,1.2,0.9c0.4,0.3,0.8,0.6,1.1,1

c0.3,0.4,0.6,0.8,1.1,0.9c0.5,0.1,0.9-0.3,1.4-0.4c0.8-0.2,1.7,0.2,2.6,0.4c1.3,0.3,2.6-0.1,3.9,0.1c0.4,0.1,0.9,0.2,1.3,0.1

c0.4-0.1,0.7-0.5,1.1-0.6c0.3-0.1,0.6-0.1,0.9-0.1c0.5-0.1,1-0.4,1.4-0.7c0.3-0.3,1.3-1.2,1.6-1.5"></path>

<path id="nose" fill="#DB7816" d="M35.4,43c-0.6,0.6-0.9,1.2-0.8,1.9c0.1,1,1,1.9,2,2c1.7,0.2,3.3,0.3,4.7,0.4

c2.9,0.3,5.5-0.9,8.3-0.9c0.7,0,0.9-0.8,0.3-1.2c-1.6-1-3.3-1.6-5.3-1.8c-1.5-0.2-2.5,0.2-4.2-0.1c-1-0.2-1.9-0.8-2.8-1

C36.7,42.2,35.9,42.4,35.4,43z"></path>

</g>

</svg>

///////////

// Snowman

TweenMax.to("#head", 1.5, {

startAt: {

rotation: -10

rotation: 10,

yoyo: true,

transformOrigin: "50% 50%",

repeat: -1,

ease: Sine.easeInOut

});

TweenMax.to("#nose", 1.5, {

startAt: {

rotation: -10

rotation: 10,

scaleX: .8,

yoyo: true,

transformOrigin: "5% 95%",

repeat: -1,

ease: Sine.easeInOut

});

TweenMax.to("#scarf", 1.5, {

startAt: {

rotation: 20

rotation: -20,

yoyo: true,

transformOrigin: "50% 10%",

repeat: -1,

ease: Sine.easeInOut

});

TweenMax.to("#shadow", 1.5, {

startAt: {

x: -5

x: 0,

yoyo: true,

repeat: -1,

ease: Sine.easeInOut

});

TweenMax.to("#snowman", 1.5, {

startAt: {

rotation: -5

rotation: 7,

yoyo: true,

transformOrigin: "50% 90%",

repeat: -1,

ease: Sine.easeInOut

});

TweenMax.to("#snowman", .3, {

scaleX: .95,

scaleY: 1.05,

yoyo: true,

transformOrigin: "50% 95%",

repeat: -1,

ease: Sine.easeInOut

});

blink();

document.getElementById("snowman").addEventListener("click", knockHimDown);

function knockHimDown() {

TweenMax.to("#snowman", .5, {

rotation: -50,

ease: Sine.easeOut

});

TweenMax.to("#snowman", 1.2, {

delay: 1.2,

rotation: 0,

ease: Sine.easeInOut

});

TweenMax.set("#mouth", {

scaleY: -1,

transformOrigin: "50% 80%"

});

TweenMax.to("#snowman", 1.5, {

delay: 3,

rotation: 7,

yoyo: true,

transformOrigin: "50% 90%",

repeat: -1,

ease: Sine.easeInOut

});

TweenMax.to("#shadow", .5, {

x: -15,

ease: Sine.easeOut

});

TweenMax.to("#shadow", 1.2, {

delay: 1.2,

x: -5,

ease: Sine.easeInOut

});

TweenMax.to("#shadow", 1.5, {

delay: 3,

x: 0,

yoyo: true,

repeat: -1,

ease: Sine.easeInOut

});

}

function blink() {

TweenMax.to(["#eye1,#eye2"], .1, {

delay: 5 * Math.random(),

scaleY: .2,

yoyo: true,

repeat: 1,

transformOrigin: "50% 50%",

onComplete: blink

});

}

////////////////

// Snow

var numFlakes = 1000;

var minScale = .15;

var maxScale = .5;

var minDuration = .3;

var maxDuration = 2;

var wind = 600;

var wiggle = 60;

var canvas = document.querySelector("canvas");

var context = canvas.getContext("2d");

var snowflakeImage = new Image();

snowflakeImage.src = "https://dl.dropboxusercontent.com/u/1256960/ Research/JS/Snowman/snowflake.png";

var snowflakes = [];

snowflakeImage.onload = init;

onResize();

window.onresize = onResize;

// wait until the snowflake image loads

function init() {

TweenMax.to("#scene", 0.3, {

opacity: 1

});

TweenMax.to("canvas", 7, {

delay: .3,

opacity: 1

});

for (var i = 0; i < numFlakes; i++) {

// create a snowflake object and its properties

var snowflake = {

initX: (canvas.width * 2 * Math.random()) - (canvas.width * .5),

y: -16,

scale: (Math.random() * (maxScale - minScale)) + minScale,

angle: Math.random() * Math.PI * 2,

drift: 0,

radius: (Math.random() * wiggle) - (wiggle * 0.5)

};

snowflakes.push(snowflake);

// create a tween that animates the angle and y properties - call update each frame

tween = TweenMax.to(snowflake, (Math.random() * (maxDuration - minDuration)) + minDuration, {

repeat: -1,

angle: Math.random() * 20,

drift: (Math.random() * wind),

y: window.innerHeight,

ease: Linear.easeNone,

onUpdate: update,

onUpdateParams: [snowflake]

});

tween.progress(Math.random());

}

function update(snowflake) {

// modify the x value based on cos of the angle

snowflake.x = (snowflake.initX + Math.cos(snowflake.angle) * snowflake.radius) + snowflake.drift;

}

// create a render loop that fires approximately every 16ms

TweenMax.ticker.addEventListener("tick", render);

function render() {

// clear old canvas

context.clearRect(0, 0, window.innerWidth * 2, window.innerHeight);

for (var i = 0; i < numFlakes; i++) {

var snowflake = snowflakes[i];

if (snowflake) {

// draw snowflakes to canvas

context.drawImage(snowflakeImage, snowflake.x, snowflake.y, 16 * snowflake.scale, 16 * snowflake.scale);

}

function onResize(e) {

//readjust size of canvas

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

kill();

init();

}

function kill() {

// shut down all currently running tweens

for (var i = 0; i < numFlakes; i++) {

var snowflake = snowflakes[i];

TweenMax.killTweensOf(snowflake);

}

snowflakes = [];

}

</script>

Автор публикации

не в сети 2 дня

Al-Sher

Комментарии: 47Публикации: 59Регистрация: 13-06-2015

Метки: Canvas HTML5 Snow Snowman SVG Winter Зима Новый год Снег Снеговик

Вам может также понравиться...

4 Комментарий

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии

Гость

Анонимно

5 лет назад

Забавный снеговик, правда малодетализирован

Ответить

Участник

XemorDio

5 лет назад

Няшка

Ответить

Администратор

Apocalypse

5 лет назад

Так хотелось заставить его вновь улыбнуться 😥

Ответить

Автор

Al-Sher

5 лет назад

Ответить на Apocalypse

Я тоже пытался... Даже пытался сам его поднять... Но так и не вышло 🙁

Ответить

topka

Есть скрипт ( денег или баллов ? )
где можно потратить эти баллы или передать и заработать ?

Что-то такое видел на одном сайте ( сталкер сайт на юкозе было)

2024-03-06 21:31:46

Всевидящее око

Новый пост от installusd1 в теме «PPI Pay-Per-Install Best Advertising Network»

2024-03-25 09:45:25

Всевидящее око

Новый комментарий от пользователя паоа: «пкаор» в материале Ajax отправка комментариев в Wordpess без плагинов от Apocalypse

2024-03-27 20:08:09

Apocalypse

Сайт был восстановлен спустя несколько месяцев бездействия

2024-06-27 16:12:56

fapalnaapo

а Шо случилось за что блокировали

2024-06-30 20:46:10

Apocalypse

@fapalnaapo, банально хостинг не был уплачен

2024-07-14 08:27:24

Apocalypse

Всем привет. У кого как жизнь?

2024-07-30 19:50:15

fapalnaapo

давольно таки не плохо, очень приятно, мне очень нравится между прочем

2024-08-13 10:09:49

Apocalypse

Всем доброго дня

2024-11-07 12:00:10

Al-Sher

Всем привет

2024-11-09 17:57:18

......

Для публикации сообщений в чате необходимо авторизоваться