anglk
/
web-narrowcast
forked from varia/web-narrowcast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

chrome style fix + improv animations + hover interactions

master
JoanaChicau 4 years ago
parent
d7fa536c82
commit
3e508fd3a9
2 changed files with 93 additions and 93 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 35
      index.html
  2. 35
      narrowstyle.css

35
index.html
View File

@ -8,6 +8,7 @@
</head> </head>
<body> <body>
<div class="about"><a href="https://vvvvvvaria.org/logs/narrowcast/" target="_blank">back<span> ↗</span><br>↬ stage </a></div> <div class="about"><a href="https://vvvvvvaria.org/logs/narrowcast/" target="_blank">back<span> ↗</span><br>↬ stage </a></div>
<div id="side" class="sidebar sidemin"> <div id="side" class="sidebar sidemin">
@ -76,35 +77,31 @@
--> -->
<p class="note"> * move and resize the elements above by dragging their corners and sides *</p> <p class="note"> * move and resize the elements above by dragging their corners / sides and click on the page to set the position *</p>
</div>
</div>
<!-- BBUTTON HIDE side pannel --> <!-- button to hide side pannel -->
<script type="text/javascript"> <script type="text/javascript">
function fside() { function fside() {
var element = document.getElementById("side"); var element = document.getElementById("side");
element.classList.toggle("sideminclicked"); element.classList.toggle("sideminclicked");
} }
</script> </script>
<!-- DRAG and RESIZE library -->
<!-- source: https://interactjs.io/docs/installation#cdn-streamlined --> <!-- drag and resize library: https://interactjs.io/docs/installation#cdn-streamlined -->
<script src="interact.min.js"></script> <script src="interact.min.js"></script>
<!-- script above same as https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js --> <!-- script above same as <script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script> -->
<!-- also found this other options: <!-- also found this other options:
https://www.webcomponents.org/element/jifalops/drag-resize https://www.webcomponents.org/element/jifalops/drag-resize
https://codepen.io/zz85/pen/gbOoVP --> https://codepen.io/zz85/pen/gbOoVP -->
<script> <script>
interact('.resize-drag') interact('.resize-drag')
.draggable({ .draggable({
onmove: window.dragMoveListener onmove: window.dragMoveListener
}) })
@ -133,7 +130,7 @@
target.textContent = event.rect.width + '×' + event.rect.height; target.textContent = event.rect.width + '×' + event.rect.height;
}); });
function dragMoveListener (event) { function dragMoveListener (event) {
var target = event.target, var target = event.target,
// keep the dragged position in the data-x/data-y attributes // keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx, x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
@ -148,7 +145,7 @@
target.setAttribute('data-x', x); target.setAttribute('data-x', x);
target.setAttribute('data-y', y); target.setAttribute('data-y', y);
} }
</script> </script>
</body> </body>

35
narrowstyle.css
View File

@ -124,7 +124,7 @@ button.minimize{
.sidetop { .sidetop {
height: 45vh; height: 45vh;
font-size: 1.2rem; font-size: 1.2rem;
justify-content: end; justify-content: flex-end;
} }
.sidetop p { .sidetop p {
@ -191,12 +191,12 @@ button.minimize{
.resize-drag { .resize-drag {
width: 620px; width: 620px;
padding: 1.4rem 0.4rem 0.4rem 1.4rem; padding: 0.4rem 1.8rem 1.8rem 0.4rem;
margin: 1rem; margin: 1rem;
touch-action: none; touch-action: none;
/* This makes things *much* easier */
box-sizing: border-box; box-sizing: border-box;
box-shadow: inset 0.6rem 0.2rem 0.9rem #ffe4fd; box-shadow: inset -0.6rem 0rem 0.8rem #ffe4fd;
border-radius: 0.1rem 0.1rem 0.2rem 0.1rem;
position: relative; position: relative;
} }
.drag::before, .resize-drag::before, .live > *::before { .drag::before, .resize-drag::before, .live > *::before {
@ -212,7 +212,8 @@ button.minimize{
display: block; display: block;
} }
.resize-drag { .resize-drag:hover {
box-shadow: 0.2rem 0.2rem 0.6rem #ffe4fd;
animation: corners 8s infinite alternate; animation: corners 8s infinite alternate;
-o-animation: corners 8s infinite alternate; -o-animation: corners 8s infinite alternate;
-moz-animation: corners 8s infinite alternate; -moz-animation: corners 8s infinite alternate;
@ -221,29 +222,31 @@ button.minimize{
@keyframes corners { @keyframes corners {
0% { 0% {
border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%; border-radius: 0.1rem 0.1rem 0.2rem 0.1rem;
-webkit-border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%; -webkit-border-radius: 0.1rem 0.1rem 0.2rem 0.1rem;
} }
70% { 20% {
border-radius: 2rem 0rem 1rem 2rem; border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem;
-webkit-border-radius: 2rem 0rem 1rem 2rem; -webkit-border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem;
} }
100% { 100% {
border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem;
-webkit-border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem; }
@-webkit-keyframes corners {
0% {
border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%; border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%;
-webkit-border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%; -webkit-border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%;
} }
70% { }
@-webkit-keyframes corners {
0% {
border-radius: 2rem 0rem 1rem 2rem; border-radius: 2rem 0rem 1rem 2rem;
-webkit-border-radius: 2rem 0rem 1rem 2rem; -webkit-border-radius: 2rem 0rem 1rem 2rem;
} }
100% { 20% {
border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem; border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem;
-webkit-border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem; -webkit-border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem;
} }
100% {
border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%;
-webkit-border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%;
}
} }

Write Preview
Loading…
Cancel
Save