tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
2
ZUGRIFFE
480
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 17.06.11 09:49 #1
    Avatar von Weissnix81
    Weissnix81 Weissnix81 ist offline Grünschnabel
    Registriert seit
    Jun 2011
    Ort
    Kleve
    Beiträge
    3
    Hallo Allerseits,
    das ist mein erster Beitrag hier im Forum.

    Eine kurze Vorstellung zu meiner Person, bin 29 Jahre, habe eine Ausbildung zum Fachinformatiker für Anwendungsentwikcklung gemacht und arbeite nun seit mehreren Jahren als Web-Entwickler.
    Momentan Versuche ich mich in jQuery, Sencha Touch, Sass-lang einzufinden

    Woran ich gerade hänge ist eine Animation, welche ich auf der VW-Seite gesehen habe.

    zu sehen unter:
    http://www.volkswagen.de

    Den ersten Effekt habe ich Recht ähnlich hinbekommen, jedoch beim zweite hänge ich gerade, vielleicht bin ich auch falsch an das Problem gegangen.

    Hier findet Ihr meine momentane Lösung:
    Link

    HTML Konstrukt

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

    <h1>Hotspot mit Text</h1>
<p>
    <div class="hotspotTextContainer clearfix">
        <a class="hotspotText" href="layer.htm">
            <div class="hotspotTextMainContainer">
                Highlight
            </div>
        </a>
    </div>
</p>
 
<h1>Hotspot mit Text & Bild</h1>
<p class="clearfix">
    <div class="hotspotBigContainer clearfix">
        <a class="hotspotTextImage" href="layer.htm">
            <div class="hotspotBigMainContainer">
                <div class="hotspotBigImageContainer">
                    <img src="_images/thumbnail.jpg" width="211" height="99">
                </div>
                <div class="hotspotBigLinkContainer">
                    Highlight
                </div>
                <div class="hotspotBigContentContainer">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                </div>
            </div>
        </a>
    </div>
</p>

    CSS:
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

    /* Hotspot mit Text */
.hotspotTextContainer {
    position: relative;
    float: none;
    display: block;
    margin: 15px 0;
    min-height: 45px;
    height: auto;
}
 
.hotspotBigContainer {
    position: relative;
    float: none;
    display: block;
    margin: 15px 0;
    min-height: 45px;
    height: auto;
}
 
a.hotspotText,
a.hotspotTextImage {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    float: left;
    color: #2274ac;
    padding: 0;
    text-decoration: none;
    font-size: 12px;
    line-height: 13px;
     -moz-box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.40); /* FF3.5+ */
  -webkit-box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.40); /* Saf3.0+, Chrome */
          box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.40); /* Opera 10.5, IE9, Chrome 10+ */
}
 
 
 
a.hotspotText .hotspotTextMainContainer,
a.hotspotTextImage .hotspotBigLinkContainer {
    display: block;
    background-image: url(../_images/ic_arrow_right_ora.png);
    background-repeat: no-repeat;
    background-position: 10px center;
    padding: 9px 11px 9px 18px;
}
 
a.hotspotTextImage {
    width: 100px;
}
 
a.hotspotTextImage:hover .hotspotBigMainContainer {
    background-color: #eaeeed;
}
 
a.hotspotTextImage .hotspotBigContentContainer {
    color: #111111;
}
 
a.hotspotText,
a.hotspotTextImage {
    border: 0px solid transparent;
    background-color: #ffffff;
}
 
a.hotspotText:hover {
    border: 5px solid transparent;
    top: -5px;
    left: -5px;
}
 
a.hotspotTextImage:hover {
    border: 5px solid #fff;
}
 
a.hotspotTextImage .hotspotBigImageContainer,
a.hotspotTextImage .hotspotBigContentContainer {
    height: 0;
    overflow: hidden;
}

    JavaScript:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

    // Hotspot Text
$(document).ready(function() {
    
    $('.hotspotText').mouseover(function() {
        $(this).stop().animate({
            borderTopColor: "#ffffff",
            borderRightColor: "#ffffff",
            borderBottomColor: "#ffffff",
            borderLeftColor: "#ffffff"
        }, 100);
    });
    
    $('.hotspotText').mouseout(function() {
        $(this).stop().animate({
            borderTopColor: "transparent",
            borderRightColor: "transparent",
            borderBottomColor: "transparent",
            borderLeftColor: "transparent"
        }, 100);
    });
    
    $('.hotspotTextMainContainer').mouseover(function() {
        $(this).stop().animate({
            paddingRight: '142px'
        }, 200, function() {
            // Animation complete.
        });
 
        $(this).css({
            backgroundColor: '#eaeeed'
        }, function() {
            // Animation complete.
        }); 
    });
 
    $('.hotspotTextMainContainer').mouseout(function() {
        $(this).stop().animate({
            paddingRight: '11px'
        }, 200, function() {
            $(this).css({
                backgroundColor: '#ffffff'
            }, function() {
                // Animation complete.
            });
        });
    });
 
});
 
// Hotspot Text Bild
$(document).ready(function() {
    
    $('.hotspotTextImage').mouseover(function() {
            $(this).css({
                top: '-5px',
                left: '-5px'
            }); 
    
            $(this).stop().animate({
                width: '211px'
            }, 500, function() {
                $('.hotspotBigImageContainer').stop().animate({
                    height: '99px'
                });
                $('.hotspotBigContentContainer').stop().animate({
                    height: '99px'
                });
                $('.hotspotBigContentContainer').css({
                    padding: '0px 10px 10px 10px'
                }); 
            });
    });
    
    $('.hotspotTextImage').mouseout(function() {
            $(this).css({
                top: '0px',
                left: '0px'
            });
            
            $(this).find('.hotspotBigContentContainer').css({
                padding: '20px'
            });
            
            $(this).find('.hotspotBigImageContainer').stop().animate({
                height: '0px'
            });
 
            $(this).find('.hotspotBigContentContainer').stop().animate({
                height: '0px'
            });
            
            
    });
    
});

    Das Problem macht momentan das Mouseout, es reagiert nicht wie das Mouseover (nur umgekehrt).

    Und im Gegensatz zum VW Vorbild klappt das Ganze bei Mouseover nach unten auf, anstelle das der Link an der selben Stelle bleibt

    Habt Ihr vielleicht Tipps?
    Gruß Ahmet
     
    Zitieren Zitieren
  2. 17.06.11 10:48 #2
    CPoly CPoly ist gerade online Mitglied Weizenbier
    tutorials.de Premium-User
    Registriert seit
    Sep 2009
    Beiträge
    2.445
    Bei einem Problem kann ich dir schon mal helfen. Da die nativen mouseover und mouseout Events doof sind, gibt es bei jQuery mouseenter und mouseleave. Wenn du die stattdessen benutzt, sollten die Probleme schon mal weg sein.

    Für das andere gibt es bestimmt mehrere Lösungen. Spontan würde ich overflow:hidden benutzen, dann den äußeren Kasten schrumpfen und scrollen, damit der Link zentriert ist. Beim animieren musst du natürlich absolute positionierung benutzen und "top" gleichzeitig mit "height" animieren, damit der Link an seiner Stelle bleibt.
     
    Zitieren Zitieren
  3. 20.06.11 15:32 #3
    Avatar von Weissnix81
    Weissnix81 Weissnix81 ist offline Grünschnabel
    Registriert seit
    Jun 2011
    Ort
    Kleve
    Beiträge
    3
    vielen Dank für den Tipp, damit habe ich nun eine Version machen können, welche funktioniert aber optisch nicht ganz so klappt. Das mit den absoluten Positionieren und der Linkgröße bekomme ich nicht in Einklang
     
    Zitieren Zitieren
« JavaScript Garden - nützliche Erklärungen zum Umgang mit JavaScript | Drag und Drop mit JQuery »

Ähnliche Themen

  1. scriptaculous, Aktion am Ende des Effektes?
    Von trage im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 29.05.09, 20:25
  2. Nachbau eines iphones
    Von 1manni1 im Forum Flash Plattform
    Antworten: 13
    Letzter Beitrag: 21.08.07, 16:55
  3. Brauche Hilfe bezüglich eines Effektes
    Von jojoba im Forum Photoshop
    Antworten: 5
    Letzter Beitrag: 09.02.05, 23:09
  4. Problem beim nachbau eines Tutorials für feuer mit Blur´s electric
    Von Jan-Frederik Stieler im Forum 3D Studio Max
    Antworten: 5
    Letzter Beitrag: 13.12.04, 20:13
  5. Nachbau eines Designs
    Von MrThomas im Forum HTML-Editoren
    Antworten: 2
    Letzter Beitrag: 30.05.02, 00:44

Stichworte