Bitte geben Sie einen Grund für die Verwarnung an
Der Grund erscheint unter dem Beitrag.Bei einer weiteren Verwarnung wird das Mitglied automatisch gesperrt.
Animierte CSS3
Hallo zusammen,
ich bin neu und überlege mir bei JIMDO eine Seite anzulegen, allerdings bin ich mir nicht sicher, ob und wie animierte CSS3 Animation bei Jimdo funktionieren.
Beispiele unter:
"http://jackonthe.net/css3animateit/"
Eine "einfache" Animation der Überschrift oder eines Textes würde reichen.
2
3
(<div class='animatedParent'>
<h2 class='animated bounceInDown'>It Works!</h2>
</div>)
Was müsste im Head eingetragen werden?
was müsste im Html / Widget eingetragen werden, damit dies funktioniert
Wer hat schon Erfahrungen gesammelt und möchte seinen Code teilen?
Würde dies dann auf einer Jimdoseite ausprobieren und hier vorstellen
Lieben Dank im Voraus
mic
Hi, ich glaubte, ich hab mehr verstanden, hatte noch ein paar Beiträge gesehen und von AZ den Quellcode sowie seine Skripte unter Beitrag "CSS Animation erst im Viewport" gelesen.
Also Beispielcode bei Jimdo unter HTML/Widget eingetragen
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
//Code von www.Redesign-Berlin.de für Jimdo//
//noconflict
jQuery(function ($) {
// addClass on event
$(function () {
$('#event1').parent().prev().addClass('fadeInLeft slow padded go');
});
});
//eof noconflict
//]]>
</script></div><div id="cc-m-12226186224" class="j-module n j-spacing ">
<div class="cc-m-spacer" style="height: 50px;">
</div>
</div><div id="cc-m-14398673324" class="j-module n j-text "><h2 class="onhover animated growIn slow padded go" style="text-align: center;">
Animationen für Jimdo Standard-Elemente
</h2></div><div id="cc-m-14398687024" class="j-module n j-htmlCode "><p class="hide">
animate upper element on Hover
</p>
<script type="text/javascript">
//<![CDATA[
$(".onhover").hover(function(){
$(".onhover").toggleClass('in-view'); //Toggle the active class to the area is hovered
});
//]]>
</script></div><div id="cc-m-12226186924" class="j-module n j-hgrid "> <div class="cc-m-hgrid-column" style="width: 58.46%;">
<div id="cc-matrix-3425425124"><div id="cc-m-12226187124" class="j-module n j-text "><div class="animated">
<h2>
Überschrift (h2)
</h2>
<p>
<strong>...in Textelement (zusätzliche Optionen > html-Modus)</strong>
</p>
<p>
Lorem ipsum dolor sit amet, ullum nullam es possim sed et. Virtute ancillae mel ne, quo ean adhuc del principes persequeris, ius alii pro priae maxima accommodare ea. Zril aliquam fabulas mei
in. Epicurei adipisci pro ex, vidisse minimum volupta ius eu vero eos et accusam et justo duo dolores.
</p>
<p>
</p>
<p>
Eros quaestio explicari ut per. No quo amet necessitatibus, sit ei putent appetere. Lobortis urbanitas efficiantur ut has. Has at modus nemore prodesset. Eleifend abhorreant ullamcorper per
cu. Sea vide graeco possim.
</p>
</div></div><div id="cc-m-14397411824" class="j-module n j-htmlCode "><p class="hide">
event2 - animate upper element
</p>
<div id="event2">
</div>
<script type="text/javascript">
//<
Zitat
...wie (unter) von Redesign-Berlin.de beschrieben
...wo denn? Auf https://designtest-florence.jimdo.com/ kannst Du sehen, dass es funktioniert, aber es gibt kein Tutorial. hab ich tatsächllich mal eines veröffentlicht?
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
Hi AZ,
unter
CSS Animation erst im Viewport
hattest du deine Skripte vorgestellt.
Leider sind die HTML / Widgets nicht mehr HTTPS kompatibel.
LZ MM

...doch, die sind schon noch https:// -kompatibel. Wenn Du eine Fehlermeldung bekommst, muss das an was anderem liegen.
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
- Allgemeines
- Regeln für die Benutzung des Forums
- HowToDo ( = so geht´s)
- Jimdo User-Forum
- Eure Jimdo-Webseiten - Vorstellungsrunde
- Bugs, Workarounds und Anregungen
- Jimdo-Elemente
- Allgemeines
- Jimdo-Shop
- Jimdo-Specials (Tools, Widgets, HTML und CSS)
- Suchmaschinenoptimierung (SEO)
- Sonstiges
- Tutorials
- "OffTopic"-Themen
- "Übernahme" von Beiträgen aus dem offiziellen Jimdo-Forum...
- Nutzungsbedingungen und Haftungsausschluss
- Jimdo-Blog
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!