[ERLEDIGT] Html, CSS, slide up effekt problem

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Rouge_X

Neues Mitglied
12 Oktober 2019
9
0
1
20
Hallo,
ich habe einen html Code für eine slide-up Animation gefunden.
Nun funktioniert dieser leider nicht bei Tabletts oder Handys was muss ich bei meinem Code ändern damit es funktioniert ?
Ich bin noch ziemlicher Anfänger und ich freue mich über jede Antwort. :-D
 

Anhänge

basti1012

Senior HTML'ler
26 November 2017
1.350
137
63
39
Minden
sebastian1012.bplaced.net
Kannst du deinen Code mal in Text posten und nicht als Bild ?
Die meisten Leute hier kopieren dann den Code und testen ihn ,dann kann man dir besser helfen.
Keiner schreibt den Code aus den Bild ab damit man das testen kann.

Was heißt den slideup ?
Irgendwas muß das sliden aktivieren , wie hover oder click .
Bei dir scheint mir das so das der slide direkt beim betretten der Seite laufen soll ?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.933
370
83
67
Ich denke, das kann man schon beim Überfliegen erkennen: Das Slideup wird durch Hover getriggert und das gibt es nicht bei Touch-Geräten.
 

Rouge_X

Neues Mitglied
12 Oktober 2019
9
0
1
20
Natürlich,

Der Code:

<html>
<div class="boxen">
hallo
<div class="hid-boxen">
<h1>Lektion1 Vokabel1</h1>
<p>This is a quick demo of slide-up effect using CSS animation when hover the box. No JS required!</p>
</div>
</div>


<style>
h1 {
margin: 0
}
.boxen {
height: 210px;
width: 310px;
overflow: hidden;
border: 1px solid black;
background: #F2F2F2;
}
.hid-boxen {
top: 100%;
position: relative;
transition: all .6s ease-out;
background: #D6DBE9;
height: 100%;
margin-top:5%;
border:1px solid black ;
}

.boxen:hover > .hid-boxen{
top: 0;
}


</style>

</html>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.933
370
83
67
Zusätzlich zum Hover einen Eventlistener für 'touchstart' registrieren und darin die top-Position ebenfalls auf 0 setzen.
Ich habe beobachtet, dass viele mobile Browser das Hover nachbilden und die entspr. Aktion beim Touch aktivieren und bei einem erneuten Touch irgend wo anders wieder rückgängig machen, aber in diesem Fall ist das wohl nicht der Fall.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.933
370
83
67
Gerade getestet: Die beschriebene Nachbildung des Hover funktioniert bei mir auf dem Samsung S4 mit dem Android- und Chrome-Browser. Ich vermute Mal, dass dies nicht alle Browser implementiert haben.
 

basti1012

Senior HTML'ler
26 November 2017
1.350
137
63
39
Minden
sebastian1012.bplaced.net
Wie wäre es wenn du das sliden ausführen tust beim berühren der Box , und beim loslassen slidet er wieder zurück ?
Dann könnte das auch ohne Javascript gehen .
EDIT:
Ehm...,komisch.
Bitte mal testen
Durch das :active ,habe ich auf mein Handy das Resultat.

Ich klicke auf die Box und es wird hoch geslidet.
Es bleibt solange oben bis ich wieder neben die Box klicke.
Gibt es dafür eine erklärung ?
Ich dachte das :active solange funktioniert bis man loslassen tut , zuimindest wahr es ja immer so beim Deskop Pc
 
Zuletzt bearbeitet:
Werbung: