Skip to content

Commit 38e92eb

Browse files
groot007groot007
committed
fixe rotate
1 parent 9bfbf10 commit 38e92eb

File tree

12 files changed

+210
-68
lines changed

12 files changed

+210
-68
lines changed

‎anim.html

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>FIREFLY - CSS-редактор </title>
5+
<link rel="stylesheet" href="./css/style.css">
6+
<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
7+
<meta charset="UTF-8">
8+
9+
10+
<meta name="description" CONTENT="FireFly - візуальний редактор CSS-анімації,
11+
що дозволить вам без особливих зусиль створити свою анімацію. Або ж редагувати
12+
вже існуючу анімацію з будь-якої популярної бібліотеки">
13+
<meta name="keywords" CONTENT="firefly, css, анімація,
14+
редактор, візуальний редактор, CSS-анімація">
15+
16+
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.js"></script> -->
17+
<script>
18+
// require.config({
19+
// paths: {
20+
// "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min",
21+
// "ace": "./ace/ace",
22+
// "keyframe": "./js/keyframe",
23+
// "niceSelect": "./libs/niceSelect/jquery.nice-select.min",
24+
// },
25+
26+
// });
27+
</script>
28+
<style>
29+
body.anim{
30+
31+
}
32+
body .wrap{
33+
height: 100vh;
34+
width: 100%;
35+
background: #000;
36+
color: #fff;
37+
display: flex;
38+
align-items: center;
39+
flex-direction:column;
40+
justify-content:center;
41+
}
42+
h1{
43+
font-size: 58px;
44+
display: inline-block;
45+
}
46+
span{
47+
display: inline-block;
48+
}
49+
50+
51+
52+
@keyframes shake {
53+
from, to {
54+
transform: translate3d(-20px, 0, 0);
55+
}
56+
57+
10%, 30%, 50%, 70%, 90% {
58+
transform: translate3d(0, -10px, 0);
59+
}
60+
61+
20%, 40%, 60%, 80% {
62+
transform: translate3d(0, 10px, 0);
63+
}
64+
}
65+
66+
@keyframes slideInDown {
67+
from {
68+
transform: translate3d(0, -300%, 0);
69+
visibility: visible;
70+
71+
}
72+
73+
to {
74+
transform: translate3d(0, 0, 0);
75+
visibility: visible;
76+
}
77+
}
78+
79+
.slideInDown {
80+
animation-duration: .2s;
81+
animation-delay: 2s;
82+
visibility: hidden;
83+
animation-fill-mode: forwards;
84+
animation-name: slideInDown;
85+
}
86+
/*.slideInDown.second{
87+
animation-duration: .5s;
88+
animation-delay: 3s;
89+
animation-name: slideInDown;
90+
}*/
91+
92+
.shake {
93+
animation-duration: .5s;
94+
animation-delay: 2.2s;
95+
animation-iteration-count: 2;
96+
animation-name: shake;
97+
}
98+
</style>
99+
</head>
100+
<body class="anim">
101+
<!-- start .wrap -->
102+
<div class="wrap">
103+
<h1><span class="main shake">Візуальний редактор </span> <span class="css slideInDown">CSS</span><span class="second slideInDown">-анімації</span></h1>
104+
105+
</div>
106+
<!-- end .wrap -->
107+
108+
</body>
109+
</html>

‎css/style.css

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4634,14 +4634,20 @@ body.documentation .copyright {
46344634
background: #343436;
46354635
}
46364636

4637-
.colors {
4637+
#anim-element .colors {
46384638
position: absolute;
46394639
left: -120px;
46404640
top: 40%;
46414641
width: 100px;
4642+
color: #000;
4643+
}
4644+
4645+
#anim-element .colors span {
4646+
font-weight: 600;
4647+
font-size: 12px;
46424648
}
46434649

4644-
.colors input {
4650+
#anim-element .colors input {
46454651
max-width: 100%;
46464652
padding: 3px 5px;
46474653
display: inline-block;

‎index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1037,8 +1037,8 @@ <h2><i class="fa fa-code" aria-hidden="true"></i> Код анімації</h2>
10371037
<span>FIREFLY</span>
10381038
<!-- start .handle -->
10391039
<div class="colors control hidden">
1040-
<input type="text" class="bg-color" placeholder="Колір фону"/>
1041-
<input type="text" class="color" placeholder="Колір тексту"/>
1040+
<span>Фон</span><input type="text" class="bg-color" placeholder="Колір фону"/>
1041+
<span>Текст</span><input type="text" class="color" placeholder="Колір тексту"/>
10421042
</div>
10431043
<div class="control hidden handle"><i class="fa fa-undo" aria-hidden="true"></i><span class="angle"></span></div>
10441044
<!-- end .handle -->

‎js/animations.json

Lines changed: 66 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@
9393
}
9494
}
9595
},
96-
"flipOutY": {
96+
"flip-out-y": {
9797
"main": {
9898
"name": "flip-out-y",
9999
"className": "flipOutY"
@@ -116,5 +116,70 @@
116116
"opacity" : "0"
117117
}
118118
}
119+
},
120+
"shake-it": {
121+
"main": {
122+
"name": "shake",
123+
"className": "shake"
124+
},
125+
"anim":{
126+
"animation-name": "shake",
127+
"animation-duration": ".75s"
128+
},
129+
"css": {
130+
"0":{
131+
"transform": "translate3d(0, 0, 0)"
132+
},
133+
"10":{
134+
"transform" : "translate3d(-10px, 0, 0)"
135+
},
136+
"20":{
137+
"transform" : "translate3d(10px, 0, 0)"
138+
},
139+
"30":{
140+
"transform" : "translate3d(-10px, 0, 0)"
141+
},
142+
"40":{
143+
"transform" : "translate3d(10px, 0, 0)"
144+
},
145+
"50":{
146+
"transform" : "translate3d(-10px, 0, 0)"
147+
},
148+
"60":{
149+
"transform" : "translate3d(10px, 0, 0)"
150+
},
151+
"70":{
152+
"transform" : "translate3d(-10px, 0, 0)"
153+
},
154+
"80":{
155+
"transform" : "translate3d(10px, 0, 0)"
156+
},
157+
"90":{
158+
"transform" : "translate3d(-10px, 0, 0)"
159+
},
160+
"100" : {
161+
"transform" : "translate3d(0, 0, 0)",
162+
"opacity" : "1"
163+
}
164+
}
165+
},
166+
"slide-down": {
167+
"main": {
168+
"name": "slide-down",
169+
"className": "slideDown"
170+
},
171+
"anim":{
172+
"animation-duration": ".75s",
173+
"animation-name": "slide-down"
174+
},
175+
"css": {
176+
"0":{
177+
"transform": "translate3d(0, -100%, 0)",
178+
"visibility": "visible"
179+
},
180+
"100":{
181+
"transform": "translate3d(0, 0, 0)"
182+
}
183+
}
119184
}
120185
}

‎js/animlib.json

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,17 @@
2121
},
2222
{
2323
"id":"4",
24-
"name":"flipOutY",
24+
"name":"flip-out-y",
25+
"updated":null
26+
},
27+
{
28+
"id":"5",
29+
"name":"shake-it",
30+
"updated":null
31+
},
32+
{
33+
"id":"6",
34+
"name":"slide-down",
2535
"updated":null
2636
}
2737
]

‎js/modules/animzone.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/modules/inputs.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎modules/components/anim-zone/events.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -127,10 +127,11 @@ $("#anim-element .handle").on("mousedown", function (e) {
127127

128128
});
129129
$(document).on("mousemove", function(e){
130+
e.preventDefault();
130131
console.log(mouseDown)
131132
if(mouseDown ==true){
132-
var center_x = (offset.left) + ((img.width() + 100) / 2);
133-
var center_y = (offset.top) + ((img.height() + 100)/ 2);
133+
var center_x = (offset.left) + ((img.width() - 50) / 2);
134+
var center_y = (offset.top) + ((img.height() - 50)/ 2);
134135
var mouse_x = e.pageX;
135136
var mouse_y = e.pageY;
136137
var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);

‎modules/components/inputs/events.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ function pluginEvents (root, $, name) {
88
// let inputs = new name();
99
// inputs.setProps();
1010
// });
11-
$(document).on("mousewheel", "#css-props input", function(event, delta) {
11+
$(document).on("mousewheel", "#css-props input[name='left'], #css-props input[name='top'], #css-props input[name='opacity'], #css-props input[name='width'], #css-props input[name='height']", function(event, delta) {
1212
var num = /-\d+|\d+/.exec($(this).val()) || 0;
1313
var pre = /\D+$/.exec($(this).val()) || "";
1414

@@ -28,7 +28,7 @@ function pluginEvents (root, $, name) {
2828
down = false;
2929
});
3030

31-
$(document).on("mousedown","#css-props input", function(){
31+
$(document).on("mousedown","#css-props input[name='left'], #css-props input[name='top'], #css-props input[name='opacity'], #css-props input[name='width'], #css-props input[name='height']", function(){
3232
down = true;
3333
$input = $(this);
3434
});

‎sass/style.scss

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -648,11 +648,17 @@ body{
648648
background: #343436;
649649
}
650650

651-
.colors{
651+
#anim-element .colors{
652652
position: absolute;
653653
left: -120px;
654654
top: 40%;
655655
width: 100px;
656+
color: #000;
657+
span{
658+
font-weight: 600;
659+
font-size: 12px;
660+
}
661+
656662
input{
657663
max-width: 100%;
658664
padding: 3px 5px;

‎test.html

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎test.js

Lines changed: 0 additions & 11 deletions
This file was deleted.

0 commit comments

Comments
 (0)