UI – codeblock

Changing perspective on scroll

By grilly Posted on 3. August 2017 Posted in CSS, UI, Web

I wanted to achieve an effect: while scrolling an 3D-elements perspective should change depending the position inside the viewport. For this you only have to set the CSS-property perspective on the body element and be sure that the content is scolling inside of the body element with overflow-y:auto;.

See the Pen <a href="https://codepen.io/Grilly86/pen/pvdGEm/">set perspective origin to viewport</a> by grilly (<a href="https://codepen.io/Grilly86">@Grilly86</a>) on <a href="https://codepen.io">CodePen</a>.<br />

Implementation

The following code creates this effect:

html, body {
 width: 100%;
 height: 100%;
 overflow: hidden;
 
}
body {
 overflow: auto;
 perspective: 500px;
}

The full code can be seen in the codepen example.

Pure CSS accordion with animated plus and minus buttons

By grilly Posted on 13. May 2016 Posted in CSS, UI, Web

See the Pen <a href="http://codepen.io/Grilly86/pen/LNvyGy/">LNvyGy</a> by grilly (<a href="http://codepen.io/Grilly86">@Grilly86</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Funktionsweise

Neben den entsprechenden Akkordion-Buttons befindet sich eine versteckte Checkbox.
Mithilfe des General sibling selectors (Allgemeiner Geschwister-Selektor) kann der Akkordion-Inhalt entsprechend dem Status der Checkbox verändert werden.

Also zum Beispiel:

.accordion-content {
  display:none;
}
input:checked ~ .accordion-content {
  display:block;
}

jquery.knobby.js – make rotating knobs

By grilly Posted on 29. April 2015 Posted in Javascript, jQuery, UI, Web

jquery.knobby.js is a jQuery-plugin for creating turning knobs Witz javascript. Die Knöpfe sind für Eingaben mit Maus und Tastatur aber auch für Touch-Devices geeignet.

Calling $("input[name='...']").knobby(); converts a HTML form input into a round knob, which allows value adjustment by rotation movements of the mouse or with your finger on touch devices.

Features

Some HTML attributes are supported:
min, max, step and turn. The attributes min and max define the boundaries – the value of max should be larger than the min value for the button to work properly.

step allows you to adjust the smallest possible step size. For example, with step="10" values always will change in steps of tenths on the other hand step=".5" will allow you to step in values of halfs. The default is “1” so in order to have decimal places it is required to set a step-size.

With the turn attribute you can define the number of total rotations. The default setting is one turn (turn=1). With a value of turn=".5" the button only allows for half a turn whereas with a value of turn="10" the knob rotates ten full circles.

With these two settings a wide variety of desired precisions are possible:
for smaller valuis with litte precision a lower turn value is possible – for a broader scale with high precision requirements a higher turn value is probably more suitable.

The size of appearance can be adjusted with the size attribute.
It’s using EM values internaly. So by saying size=5 the knob appears five times the size of a normal row of text.

An option for logarithmic scaling of values is currently in planning (so higher values lead to higher step sizes) – it should also be improved in the future to allow for multiple touches at different knobs.

You can see the demo to see the plugin in use. The complete source code is available at Github (under MIT license).

Category: UI