init: репозиторий backgrounds
— Добавлен animated-cubes (геометрический полет на Keyframes) — Добавлен solar-system-orrery (модель системы на Orbital Motion) — Добавлен parallax-star (звездное небо на Box-Shadow) — Добавлен fireflies (эффект светлячков и мягкого свечения) — Добавлен steps-sprite-animation (покадровая анимация с jQuery управлением)
This commit is contained in:
Executable
+15
@@ -0,0 +1,15 @@
|
||||
# 🏃 Steps Sprite Animation
|
||||
|
||||
Интерактивная демонстрация покадровой анимации с использованием CSS-свойства `animation-timing-function: steps()`. Этот метод позволяет оживить спрайт-листы, превращая их в плавную анимацию персонажа.
|
||||
|
||||
### Особенности
|
||||
|
||||
- **Sprite Sheets**: Использование одного изображения (спрайта) для создания многокадровой анимации.
|
||||
- **Steps Logic**: Применение функции `steps(10)`, которая разбивает движение фона на дискретные кадры, имитируя классическую мультипликацию.
|
||||
- **Interactive Control**: Возможность изменять скорость анимации и просматривать полную ленту спрайта с помощью встроенных контроллов (JS/jQuery).
|
||||
|
||||
### Технологии
|
||||
|
||||
- **HTML5 / CSS3**: Основная логика анимации и стилизация элементов интерфейса.
|
||||
- **jQuery**: Используется для управления скоростью (`animation-duration`) и переключения режимов отображения.
|
||||
- **WebKit Optimization**: Специальные стили для кастомизации ползунков (range input) и чекбоксов в браузерах на движке WebKit.
|
||||
Executable
+30
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Steps Animation</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- partial:index.partial.html -->
|
||||
<div id="animation">
|
||||
<div id="frame"></div>
|
||||
<div id="roll"></div>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li><label><input id="show" type="checkbox"> show sprite</label></li>
|
||||
<li>
|
||||
<div id="duration">
|
||||
<label id="duration-label" class="isRight">1</label>
|
||||
<input id="duration-input" type="range" min="0.2" value="1" max="4" step="0.1">
|
||||
</div>
|
||||
animation-duration
|
||||
</li>
|
||||
</ul>
|
||||
<!-- partial -->
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script><script src="./script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Executable
+26
@@ -0,0 +1,26 @@
|
||||
if ($.browser.webkit) {
|
||||
$("html").addClass("WebKit");
|
||||
}
|
||||
|
||||
$("#show").change(function () {
|
||||
$("#animation").toggleClass("showRoll");
|
||||
});
|
||||
|
||||
var labelSide = "right";
|
||||
|
||||
$("#duration-input").change(function () {
|
||||
var val = $(this).val();
|
||||
var valRounded = Math.round(val * 10) / 10;
|
||||
var mid = $(this).attr("max") / 2;
|
||||
$("#frame").css("animation-duration", val + "s");
|
||||
$("#roll").css("animation-duration", val + "s");
|
||||
$("#duration-label").text(valRounded);
|
||||
|
||||
if (val > mid && labelSide == "right") {
|
||||
labelSide = "left";
|
||||
$("#duration-label").removeClass("isRight").addClass("isLeft");
|
||||
} else if (val <= mid && labelSide == "left") {
|
||||
labelSide = "right";
|
||||
$("#duration-label").removeClass("isLeft").addClass("isRight");
|
||||
}
|
||||
});
|
||||
Executable
+226
@@ -0,0 +1,226 @@
|
||||
/* -------------- Animation -------------- */
|
||||
|
||||
#animation {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* -------------- Frame -------------- */
|
||||
|
||||
.showRoll #frame {
|
||||
border-color: hsl(0,0%,70%);
|
||||
}
|
||||
|
||||
#frame {
|
||||
width: 50px;
|
||||
height: 72px;
|
||||
border: 1px solid transparent;
|
||||
background: url(https://s.cdpn.io/79/sprite-steps.png) no-repeat left top;
|
||||
animation: frame-animation 1s steps(10) infinite;
|
||||
}
|
||||
|
||||
@keyframes frame-animation { 0% { background-position: 0px 0; } 100% { background-position: -500px 0; } }
|
||||
|
||||
|
||||
|
||||
/* -------------- Roll -------------- */
|
||||
|
||||
.showRoll #roll {
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
#roll {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 500px;
|
||||
height: 72px;
|
||||
border: 1px solid hsl(0,0%,70%);
|
||||
background: hsl(0,0%,100%) url(https://s.cdpn.io/79/sprite-steps.png) no-repeat left top;
|
||||
transition: opacity .3s linear;
|
||||
animation: roll-animation 1s steps(10) infinite;
|
||||
}
|
||||
|
||||
@keyframes roll-animation {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-500px); }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Global ------------------------------------------------------ */
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
font:62.5%/1 "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
|
||||
background: #f0f0f0 url(../img/bg.png);
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 50px;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: hsl(210,100%,60%);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: hsl(210,100%,70%);
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: hsl(210,100%,50%);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
color: hsl(0,0%,60%);
|
||||
}
|
||||
|
||||
.hl {
|
||||
color: hsl(0,0%,20%);
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 40px 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: hsl(0,0%,60%);
|
||||
}
|
||||
.WebKit ul {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
|
||||
/* Show Sprite Checkbox ------------------------------------------------------ */
|
||||
|
||||
.WebKit #show {
|
||||
-webkit-appearance: none;
|
||||
outline: none;
|
||||
border-radius: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: -2px 6px 0 0;
|
||||
vertical-align: middle;
|
||||
border: 10px solid hsl(0,0%,80%);
|
||||
background: hsl(0,0%,40%);
|
||||
box-shadow: 0 1px 0 hsla(0,0%,100%,.6);
|
||||
-webkit-transition: border-width .2s cubic-bezier(.26, .08, .15, 1);
|
||||
}
|
||||
|
||||
.WebKit #show:checked:active,
|
||||
.WebKit #show:active {
|
||||
border: 0px solid hsl(0,0%,80%);
|
||||
-webkit-transition-duration: .1;
|
||||
}
|
||||
|
||||
.WebKit #show:checked {
|
||||
border: 5px solid hsl(0,0%,80%);
|
||||
box-shadow: inset 0 1px 2px hsla(0,0%,0%,.4), 0 1px 0 hsla(0,0%,100%,.6);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Animation Duration ------------------------------------------------------ */
|
||||
|
||||
#duration {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: -4px 6px 0 0;
|
||||
}
|
||||
|
||||
|
||||
/* Label */
|
||||
|
||||
#duration-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.WebKit #duration-label {
|
||||
position: absolute;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
top: 6px;
|
||||
font-size: 11px;
|
||||
color: hsl(0,0%,60%);
|
||||
text-shadow: 0 1px 0 hsla(0,0%,100%,.3);
|
||||
pointer-events: none;
|
||||
-webkit-transition: -webkit-transform .2s cubic-bezier(.26, .08, .15, 1),
|
||||
color .6s .2s ease-out;
|
||||
}
|
||||
|
||||
.WebKit #duration-label.isRight {
|
||||
right: 50%;
|
||||
margin-right: -20px;
|
||||
left: auto;
|
||||
-webkit-transform: translate3d(20px,0,0);
|
||||
}
|
||||
.WebKit #duration-label.isLeft {
|
||||
right: auto;
|
||||
margin-left: -20px;
|
||||
left: 50%;
|
||||
-webkit-transform: translate3d(-20px,0,0);
|
||||
}
|
||||
|
||||
.WebKit #duration:active #duration-label {
|
||||
color: hsl(0,0%,30%);
|
||||
-webkit-transition-delay: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Input */
|
||||
|
||||
.WebKit #duration-input {
|
||||
-webkit-appearance: none;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
width: 100px;
|
||||
border-radius: 20px;
|
||||
background: hsl(0,0%,80%);
|
||||
box-shadow: 0 1px 0 hsla(0,0%,100%,.6);
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.WebKit #duration-input::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
border-radius: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 5px solid hsl(0,0%,80%);
|
||||
background: hsl(0,0%,40%);
|
||||
box-shadow: inset 0 1px 2px hsla(0,0%,0%,.4);
|
||||
-webkit-transition: border-width .2s cubic-bezier(.26, .08, .15, 1);
|
||||
}
|
||||
|
||||
.WebKit #duration-input:active::-webkit-slider-thumb {
|
||||
border: 0px solid hsl(0,0%,80%);
|
||||
-webkit-transition-duration: .1;
|
||||
}
|
||||
Reference in New Issue
Block a user