ek

Beiträge zum Thema JS, HTML, CSS & anderem Kram

Schindelhauer - Fahrrad mit Zahnriemenantrieb - Viktor - Fixed-Gear

Aus meiner Heimatstadt Magdeburg kommt die kleine Fahrrad-Manufaktur Schindelhauer, die sich auf den Bau von Fahrrädern mit Zahnriemenantrieb verlegt hat. Das ist grundsätzlich keine schlechte Idee, da Zahnriemen im Vergleich zu normalen Ketten effizienter, leichter und weniger pflegebedürftig sind.

Obendrein sehen die Räder, die Schindelhauer entwickelt und welche auf so lustige Namen wie Viktor, Siegfried und Ludwig hören, ziemlich gut aus. Die Namensgebung ist wahrscheinlich ein Versuch, auf dem internationalen Markt Assoziationen mit der "guten, alten, deutschen Wertarbeit" zu wecken. Aber sei es drum - hätte ich einen Tausender zu viel auf dem Konto, würde ich mir so ein Schindelhauer-Fahrrad holen.

Und bis es soweit ist, düse ich weiter mit meinem klapprigen Damenrad durch good ol' Hannover.

(via Stilsucht)

Boogie stammt aus Belgrad, Serbien, und begann in den Neunzigern zu Zeiten des Bürgerkriegs damit Fotos von Menschen, Rebellion und Unruhen zu machen. Später ging er nach New York. Sein Portfolio umfasst viel Street Photography, schwarzweiß und mitunter gut gekörnt. Er war unterwegs in Mexico, Cuba und Istanbul, hat Skinheads, Crack-Süchtige und Gang-Mitglieder fotografiert.

Gang-Mitglied mit halbautomatischer Pistole

Gang-Mitglied aus Queens, New York mit seiner halbautomatischen Maschinenpistole.

Serbischer Nazi-Skinhead

Serbischer Nazi-Skinhead beim Posieren.

Crack-Raucherin neben Pampers-Packung

Crack-Süchtige überprüft auf Pampers-Packung gestützt ihre Crack-Pfeife.

Das Portfolio ist wirklich beeindruckend. Ich kann jedem empfehlen, sich mal in Ruhe da durch zu klicken.

(via Artskills)

Hinter De Vetpan Studios steckt Siebe Warmoeskerken, ein 21-jähriger Möbelbauer aus den Niederlanden. Seine Seite wurde neulich schon vom Stylespion und auf dem ignant blog erwähnt, doch sind die Fotos so gut, dass ich selbst auch darüber berichten muss.

De Vetpan Studios - New York

Siebe Warmoeskerken scheint es zu lieben, die Blende so weit wie möglich aufzureißen. Folglich zeichnen sich seine Bilder durch butterweiche Bokehs und geringe Schärfentiefe aus. Doch auch die Farben sind ganz ausgezeichnet.

De Vetpan Studios - Kaffee und Kekse

De Vetpan Studios - Motorrad

Unbedingt auch die anderen Fotos auf seiner Seite angucken. Und wem das nicht reicht, dem sei noch sein Flickr-Stream ans Herz gelegt.

Animierte Image-Caption mit jQuery unter WordPress


Update 15.10.2013

Da der Code schon etwas in die Jahre gekommen ist, habe ich mir mal die Mühe gemacht, ihn zu aktualisieren. Hauptsächlich geändert ist die Art der Animation. Diese läuft nun über CSS-Transitions. Ältere Browser, wie bspw. der IE8, stellen also keine Animation dar. Die Grundfunktionalität ist jedoch auch ohne Animation gegeben.

Google liebt es ja, wenn unter oder neben Bildern noch ein beschreibender Text steht. Deswegen hat WordPress vor einiger Zeit die Image-Caption eingeführt. Diese kann man - wenn man kein Freund von Bildunterschriften ist - mit jQuery jedoch so manipulieren, dass sie nur bei einem MouseOver erscheint. Wie das geht, erkläre ich in diesem Tutorial.

Wie gehabt als erstes der HTML-Teil:

HTML
<div class="wp-caption" style="width: ???px">
	<img src="/path/to/img.jpg" alt="Dies ist eine Beschreibung" title="Dies ist eine Beschreibung" width="???" height="???" class="size-full wp-image-3402" />
	<p class="wp-caption-text">Dies ist eine Beschreibung</p>
</div>

Dies ist der Caption-Quelltext, der von WordPress ausgegeben wird. Anstatt der Fragezeichen kommen natürlich die richtigen Höhen- und Breitenangaben, ebenso wie der richtige Pfad zum Bild.

Als nächstes ein bißchen CSS für das entsprechende Aussehen:

CSS

.wp-caption {
    position: relative;
    margin-bottom: 1.5em;
    border: 3px solid #999;
    overflow: hidden;
    border-radius: 2px;
}

.wp-caption img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-transition: margin .3s ease-in-out;
    -moz-transition: margin .3s ease-in-out;
    transition: margin .3s ease-in-out;
    }

.wp-caption-text {
    padding: .357143em .714286em;
    margin: 0;
    background-color: #333;
    color: #F3F3F3;
    border-top: 1px solid #666;
}

Wichtig hierbei ist die Angabe "overflow: hidden", da der Caption-Text sonst nicht verschwinden würde. Alle anderen Angaben zu Farben, Innen- und Außenabständen können ohne weiteres angepasst werden. Auch die transition-duration kann noch feinjustiert werden. Ja nach persönlicher Preferenz.

Zum Schluss den nötigen JavaScript- bzw. jQuery-Teil, ohne den hier gar nichts läuft:

JavaScript

(function (win, $) {

    /*
     * init!
    **/
    function init() {

        // no animated Image Captions on touch devices
        if ( 'ontouchstart' in document.documentElement || win.navigator.msMaxTouchPoints ) {
            return;
        }

        // animated captions 4 all.
        $('.wp-caption').each(captionThis);

    }

    /*
     * Enabling the animated captions.
    **/
    function captionThis() {

        var $this = $(this),
            $img = $this.find('img'),
            imgHeight = $img.attr('height'),
            captionHeight = $this.find('p').outerHeight();

        $this
            .height(imgHeight)
            .hover(function () {
                $img.css('margin-top', -captionHeight);
            }, function () {
                $img.css('margin-top', 0);
            });

    }

    /*
     * Starting on DOMLoad
    **/
    $(init);

})(window, jQuery);

Touch-Devices sind von dieser Spielerei ausgenommen. Mit der each()-Funktion wird jede einzelne Image-Caption auf der Seite angesprochen. Danach wird die Höhe des dazugehörigen Bildes und der Beschreibung gespeichert. Als nächstes wird die Höhe des Caption-div gleich der Höhe des Bildes gesetzt, so dass die Beschreibung abgeschnitten und nicht sichtbar ist.

Daraufhin wird eine hover()-Funktion aufgemacht. Fährt man mit dem Cursor über eine Image-Caption, bekommt das dazugehörige Bild einen negativen margin-top, der der Höhe der Beschreibung entspricht, so dass diese in den sichtbaren Bereich fährt. Verlässt man die Image-Caption wieder mit dem Cursor, wird der margin-top des Bildes wieder auf Null gesetzt.

Das war es auch schon, fertig ist die animierte Image-Caption unter WordPress. Wobei natürlich nichts dagegen spricht, das ganze außerhalb von WordPress einzusetzen. Wie immer verweise ich an die Kommentar-Funktion, falls es Fragen gibt oder etwas nicht so funktioniert, wie es soll.

(direktThomYork)

René von Nerdcore sagt:

Und dann hier noch das neue Video von Thom Yorke, das ziemlich wirr rumflackert und jede Menge Streetart und davon jede Menge von Banksy zeigt.

So ist es - Thom Yorke hat ein neues Video und in diesem wird einem die Streetart wie bekloppt um die Ohren gehauen. Man kann sie nicht sehen, nur erahnen. Sollte man doch versuchen auszumachen, welche Bilder genau verarbeitet wurden, dürfte man recht bald einen epileptischen Anfall bekommen und sich geifernd und zuckend auf dem Boden wälzen. Ich warne davor.

Ansonsten ist der Song Thom Yorke in Reinform, keine Überraschung also.

Anfang dieser Woche habe ich einen kleinen Abstecher nach Norderney gemacht, um die Insel abzuschreiten und ein paar Fotos zu machen. Dabei bin ich dem Irrtum erlegen, die Insel sei 7 bis 8 km lang. Sie ist jedoch 14 km lang, was ich am Ende irgendwie in meinen Füßen gespürt habe. Allerdings gab es so auch runde 6 km mehr Gelegenheit zu fotografieren.

Holzpfeiler am Strand der Nordsee

Holzpfeiler am Strand, die wahrscheinlich den Tide-Bereich markieren. Festlegen möchte ich mich da aber nicht.

Leuchtturm von Norderney

Der Leuchtturm von Norderney.

Promenade an der Nordküste von Norderney

Beginn der Nord-Promenade auf Norderney.

Schiffswrack an der Ostspitze von Norderney

Das bekannte Schiffswrack an der Ostspitze der Insel, welches 1967 dort aufgelaufen ist und nie geborgen wurde.

Toter Seestern am Strand

Toter Seestern am Strand, der von den Wellen umspielt wird.

Verkrüppelte Birke in den Dünen

Eine verkrüppelte, blattlose Birke in den Dünen.

Wellenbrecher an der Promenade von Norderney

Wellenbrecher in der Nord-Promenade von Norderney.

Zeitung auf Wellenbrecher am Strand

Zeitung, die sich in den Wellenbrechern am Strand verfangen hat und von der Abendsonne illuminiert wird.

Fernrohr an der Promenade von Norderney

Fernrohr für Touristen, die das nötige Kleingeld über haben und das Wasser von nahem sehen wollen, sich jedoch scheuen, fünf Schritte nach vorne Richtung Meer zu gehen.

Treppe auf einen Hügel auf Norderney

Treppe auf einen Hügel in den Dünen, von dem man die Insel ganz gut im Blick hat.

Wie immer können die Bilder in der Lightbox betrachtet werden, einfach draufklicken.

(Direkt Skate & Create 2009)

Das von Transworld Skateboard verbrochene Skateboard-Video "Skate & Create 2009" ist das beste, was ich seit dem Fully Flared-Trailer in dem Bereich gesehen habe. Ich mag die reduzierte, natürliche Ästhetik der Bilder. Ein ganz schöner Gegensatz zu den üblichen Skateboard-Sachen, die in grellen Farben den urbanen Raum abfeiern (was ich natürlich auch nicht schlechtreden möchte).

Und gegen die musikalische Untermalung mit den Air Castles kann man auch nichts sagen.

Gefunden bei TheJunction