Animierte CSS3

17.05.2018 06:31 (zuletzt bearbeitet: 20.05.2018 12:32)
avatar  mic mou
#1
mi

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.

1
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


 Antworten

 Beitrag melden
18.05.2018 13:01
avatar  mic mou
#2
mi

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

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
 
//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 &gt; 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">
//<![CDATA[
 
 

1
 

 




Ergebnis:
Wenn ich dies einfach mal teste, lautet der Fehler NICHT HTTPS kompatibel.

Schade, schade schade...


 Antworten

 Beitrag melden
18.05.2018 13:19 (zuletzt bearbeitet: 20.05.2018 12:31)
avatar  mic mou
#3
mi

Sorry vergass natürlich vorher den Head bearbeiten wie unter von Redesign-Berlin.de beschrieben

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 

<script src="//code.jquery.com/jquery-1.12.0.min.js" type="text/javascript">
 
</script>
 
<script src="https://redesign-berlin.lima-city.de/__test/designtest-florence/animation.js" type="text/javascript">
</script>

<script type="text/javascript">
//<![CDATA[
//noconflict
jQuery(function ($) {
$(document).ready(function () {
$(window).load(function () {
//insert all your ajax callback code here.
//Which will run only after page is fully loaded in background.
// $('.powrMark').css('display', 'none');
});
 
 


 Antworten

 Beitrag melden
20.05.2018 12:36 (zuletzt bearbeitet: 20.05.2018 12:40)
avatar  az_
#4
avatar
az_

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


 Antworten

 Beitrag melden
23.05.2018 05:44
avatar  mic mou
#5
mi

Hi AZ,

unter

CSS Animation erst im Viewport

hattest du deine Skripte vorgestellt.

Leider sind die HTML / Widgets nicht mehr HTTPS kompatibel.

LZ MM


 Antworten

 Beitrag melden
24.05.2018 10:05 (zuletzt bearbeitet: 24.05.2018 10:06)
avatar  az_
#6
avatar
az_

...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


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!