“Rising Curtain”-Effekt bei Input-Feldern mit jQuery
Hinweis:
Die CSS-Eigenschaft background-position-x bzw. background-position-y ist eine Erfindung von Microsoft und funktioniert leider nur im Internet Explorer und in Webkit-Browsern. Deshalb gibt es im jQuery-Skript eine Browser-Weiche. Im Firefox und im Opera verschwindet die Grafik einfach nur, der "Rising Curtain"-Effekt findet also nicht statt.
Kommen wir aber zum eigentlichen Tutorial:
Heute möchte ich zeigen, wie man input-Felder in Formularen mithilfe des "Rising Curtain"-Effekts und jQuery interessanter gestalten kann, wenn der Fokus auf ihnen liegt. Alles was man dafür braucht, ist eine kleine Hintergrundgrafik mit einem Farbverlauf und ein paar Zeilen jQuery. Als erstes aber wenden wir uns dem HTML-Teil zu:
HTML
<div>
<span>
<input type="text" id="input1" />
</span>
<label for="input1">Input 1</label>
</div>
Dieser bedarf wohl keiner großen Erklärung. Es gibt ein input-Feld plus dem dazugehörigen Label. Das input-Feld ist in span-Tags eingefasst, welche für den Rand sorgen.
Als nächstes der CSS-Teil:
CSS
div {
height: 24px;
margin-bottom: 10px;
clear: left;
}
span {
height: 24px;
float: left;
display: inline;
margin-right: 10px;
border: 1px solid #999;
}
span.active {
border-color: #063050;
}
input {
display: block;
width: 200px;
height: 18px;
padding: 2px 4px;
line-height: 18px;
background: #FFF url('img/gradient.jpg') 0 0 repeat-x;
border: 1px solid #FFF;
color: #063050;
}
label {
height: 24px;
float: left;
display: inline;
line-height: 24px;
cursor: pointer;
}
span und label werden mit float: left nebeneinander angeordnet. Das input-Feld bekommt einen weißen Rand, damit der dunkle Hintergrund nicht an den dunklen Rand des span-Elements klatscht. Der Hintergrund wiederum stellt einen Farbverlauf von dunkelblau zu weiß dar, der mehr als doppelt so hoch wie das input-Feld ist.
Kommen wir nun zum jQuery-Teil:
JavaScript
jQuery(document).ready(function($) {
$('input').focus( function() {
$(this).parent().addClass('active');
if ( jQuery.browser.webkit || jQuery.browser.msie ) {
$(this).animate({'background-position-y' : '-28px'}, 500, 'linear');
} else {
$(this).animate({'background-position' : '0 -28px'}, 0, 'linear');
}
});
$('input').blur( function() {
$(this).parent().removeClass('active');
if ( jQuery.browser.webkit || jQuery.browser.msie ) {
$(this).animate({'background-position-y' : '0'}, 500, 'linear');
} else {
$(this).animate({'background-position' : '0 0'}, 0, 'linear');
}
});
});
Liegt der Fokus auf einem input-Feld, bekommt das umschließende span-Element die Klasse "active" zugewiesen und der Rand wird dunkelblau. Außerdem verschiebt sich der Hintergrund des input-Feldes nach oben mithilfe der animate()-Funktion von jQuery. Das ist der so genannte "Rising Curtain"-Effekt, durch den der Hintergrund des input-Feldes heller wird. Gesteuert wird das ganze über die CSS-Eigenschaft background-position-y.
So einfach ist das. Das ganze lässt sich natürlich auch bei einer textarea anwenden. Denkt aber daran, dass die Hintergrund-Grafik entsprechend groß sein muss. Auch ist es denkbar, die Hintergrund-Grafik ganz aus dem sichtbaren Bereich fahren zu lassen, so dass das input-Feld weiß wird. Der Kreativität sind kaum Grenzen gesetzt.
Das war es auch schon. Bookmark setzen oder dieses Tutorial via twitter durch den Äther jagen, wird wie immer gern gesehen. Bei Fragen und Anregungen steht die Kommentar-Funktion zur Verfügung. Nichts neues also.
Stefan
– 22.3.2010Nettes Tutorial, aber leider funktioniert das nicht im FF, da dieser die Eigenschaft 'background-position-y' nicht unterstützt. Eine alternative wäre '$(this).animate({'background-position' : '0, -28px'}', aber dabei geht der schöne Fading-Effekt verloren.
Stefan
– 22.3.2010So, ich hab das Skript mal ein bisschen angepasst, sodass es in allen Browsern läuft:
jQuery(document).ready(function($) {
$('span').click( function() {
// get the input field
var inputField = $(this).find(':first-child');
// add fadeIn effect
inp.fadeIn('slow');
// set focus to input field
inp.focus();
});
$('input').blur( function() {
// add fadeOut effect
$(this).fadeOut('slow');
});
});
Stefan
– 22.3.2010sorry, hiernochmal das komplette und wirklich funktionierende skript:
jQuery(document).ready(function($) {
$('span').click( function() {
$(this).addClass('active');
var inputField = $(this).find(':first-child');
inputField.fadeIn('slow');
inputField.focus();
});
$('input').blur( function() {
$(this).parent().removeClass('active');
$(this).fadeOut('slow');
});
});
Line
– 24.3.2010Danke Stefan! Wär super, wenn irgendwer noch die Demo entsprechend anpassen könnte
Dankeschön
Emanuel
– 24.3.2010@stefan: vielen dank für den hinweis. ich habe es nun über eine browser-weiche gelöst, da deine lösung zwar im ansatz gut ist, ich es aber für die usability wichtig finde, dass die input-felder und deren inhalt in einem formular alle zu sehen sind, so dass man seine eingaben vor dem absenden schnell noch einmal kontrollieren kann.
alternativ könnte man mit einer zweiten, absolut positionierten ebene hinter dem input-feld arbeiten, die nach oben verschoben wird, wenn das jeweilige input-feld den fokus hat, aber das erschien mir jetzt zu aufwendig.
@Line: "jemand" hat entsprechende anpassungen vorgenommen