Новогодняя кнопка "вверх"

Оригинальный вариант Санты был найден на codepen.io у пользователя Vineeth.TR в записи Material Santa, но мне показалось, что этот Дед Мороз больше подходит для кнопки.

Пример можно увидеть в правом нижнем углу страницы

HTML:

Код можно разместить в любом месте страницы

<div class="santa-container">
	<a href="#">	
		<span class="santa">
			<span class="cap"></span>
			<span class="head">
				<span class="eyes"></span>
			</span>
			<span class="hand"></span>
			<span class="hand left"></span>
			<span class="body">
				<span class="arrow"></span>
			</span>
			<span class="legs"></span>
		</span>
	</a>
</div>

</a>

</div>

CSS:

Поскольку изначально Санта имеет большие размеры, то для придания ему нужного, используется масштаб transform: scale(0.3);

:root{
	scroll-behavior:smooth
}	
.santa-container {
	position: fixed;
	z-index: 99999;
	bottom: 10px;
	right: 110px;
	transform: scale(0.3);
}
.santa-container *, 
.santa-container *:after, 
.santa-container *:before {
	box-sizing: border-box;
	content: '';
	position: absolute;
	border-radius: 50%;
	box-shadow: 0 4px 10px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.1);
}
.santa {
	width: 300px;
	height: 300px;
	margin: auto;
	left: 0;
	right: 0;
	bottom: 75px;
	z-index: 25;
}
.santa:after {
	background: #3e3e3e;
	position: absolute;
	width: 200px;
	height: 200px;
	z-index: 1;
	right: -10px;
	top: -5px;
}
.santa .cap {
	background: #fff;
	width: 20px;
	height: 20px;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 7;
	top: -85px;
}
.santa .cap:after {
	width: 70px;
	height: 70px;
	background: #f00;
	left: -24px;
	top: 9px;
	z-index: 3;
}
.santa .cap:before {
	background: #fff;
	width: 80px;
	height: 50px;
	left: -30px;
	z-index: 5;
	top: 23px;
	border-radius: 50% 50% 0 0;
}
.santa .head {
	background: #E2D7C7;
	z-index: 10;
	width: 50px;
	height: 50px;
	left: 0;
	right: 0;
	margin: auto;
	top: -40px;
}
.santa .head:before {
	width: 100px;
	height: 100px;
	background: #fff;
	top: 10px;
	left: -25px;
}
.santa .head:after {
	background: #E2D7C7;
	width: 24px;
	height: 12px;
	z-index: 3;
	left: 0;
	right: 0;
	margin: auto;
	top: 30px;
	border-radius: 0 0 20px 20px;
}
.santa .head .eyes {
	width: 8px;
	height: 8px;
	background: #000;
	z-index: 4;
	left: 14px;
	top: 5px;
	box-shadow: 15px 0 #3e3e3e;
}
.santa .body {
	left: 0;
	top: 0;
	width: 300px;
	height: 300px;
	background: #f00;
	overflow: hidden;
	z-index: 5;
}
.santa .arrow {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='18 15 12 9 6 15'%3e%3c/polyline%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-size: cover;
	width: 250px;
	height: 250px;
	left: 30px;
	top: 52px;
	transition: 0.2s;
}
.santa .arrow:hover {
	top: 40px;
}
.santa .hand {
	left: -20px;
	top: 120px;
	background: #fff;
	height: 60px;
	width: 60px;
	z-index: 7;
}
.santa .hand:after {
	height: 30px;
	width: 30px;
	background: #E2D7C7;
	left: 20px;
	bottom: 10px;
}
.santa .hand.left {
	left: auto;
	right: 45px;
	top: 5px;
}
.santa .hand.left:after {
	bottom: 30px;
	left: 12px;
}
.santa .legs, 
.santa .legs:after {
	width: 20px;
	height: 60px;
	z-index: 10;
	background: #f00;
	bottom: -45px;
	left: 128px;
	border-radius: 0 0 10px 10px;
	border-bottom: 20px solid #3e3e3e;
}
.santa .legs:after {
	left: 31px;
	bottom: -20px;
}

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

:root{

scroll-behavior:smooth

}

.santa-container {

position: fixed;

z-index: 99999;

bottom: 10px;

right: 110px;

transform: scale(0.3);

}

.santa-container *,

.santa-container *:after,

.santa-container *:before {

box-sizing: border-box;

content: '';

position: absolute;

border-radius: 50%;

box-shadow: 0 4px 10px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.1);

}

.santa {

width: 300px;

height: 300px;

margin: auto;

left: 0;

right: 0;

bottom: 75px;

z-index: 25;

}

.santa:after {

background: #3e3e3e;

position: absolute;

width: 200px;

height: 200px;

z-index: 1;

right: -10px;

top: -5px;

}

.santa .cap {

background: #fff;

width: 20px;

height: 20px;

left: 0;

right: 0;

margin: auto;

z-index: 7;

top: -85px;

}

.santa .cap:after {

width: 70px;

height: 70px;

background: #f00;

left: -24px;

top: 9px;

z-index: 3;

}

.santa .cap:before {

background: #fff;

width: 80px;

height: 50px;

left: -30px;

z-index: 5;

top: 23px;

border-radius: 50% 50% 0 0;

}

.santa .head {

background: #E2D7C7;

z-index: 10;

width: 50px;

height: 50px;

left: 0;

right: 0;

margin: auto;

top: -40px;

}

.santa .head:before {

width: 100px;

height: 100px;

background: #fff;

top: 10px;

left: -25px;

}

.santa .head:after {

background: #E2D7C7;

width: 24px;

height: 12px;

z-index: 3;

left: 0;

right: 0;

margin: auto;

top: 30px;

border-radius: 0 0 20px 20px;

}

.santa .head .eyes {

width: 8px;

height: 8px;

background: #000;

z-index: 4;

left: 14px;

top: 5px;

box-shadow: 15px 0 #3e3e3e;

}

.santa .body {

left: 0;

top: 0;

width: 300px;

height: 300px;

background: #f00;

overflow: hidden;

z-index: 5;

}

.santa .arrow {

background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='18 15 12 9 6 15'%3e%3c/polyline%3e%3c/svg%3e");

background-repeat: no-repeat;

background-size: cover;

width: 250px;

height: 250px;

left: 30px;

top: 52px;

transition: 0.2s;

}

.santa .arrow:hover {

top: 40px;

}

.santa .hand {

left: -20px;

top: 120px;

background: #fff;

height: 60px;

width: 60px;

z-index: 7;

}

.santa .hand:after {

height: 30px;

width: 30px;

background: #E2D7C7;

left: 20px;

bottom: 10px;

}

.santa .hand.left {

left: auto;

right: 45px;

top: 5px;

}

.santa .hand.left:after {

bottom: 30px;

left: 12px;

}

.santa .legs,

.santa .legs:after {

width: 20px;

height: 60px;

z-index: 10;

background: #f00;

bottom: -45px;

left: 128px;

border-radius: 0 0 10px 10px;

border-bottom: 20px solid #3e3e3e;

}

.santa .legs:after {

left: 31px;

bottom: -20px;

}

Т.к на большинстве сайтов уже имеется кнопка для прокрутки страницы вверх, которая, как правило, выполнена на JS, то можно легко подстроить это решение под него.

Для этого удаляем ссылку <a href="#"></a>, а событие прокрутки вешаем на santa-container

Свойство scroll-behavior:smooth, которое служит для плавности скролла, также можно будет удалить.

Пример можно увидеть в правом нижнем углу страницы

HTML:

CSS:

Смотрите также:

Добавить комментарий: