… bevor der Winter jetzt wirklich anfängt,
anbei nochmal ein paar Sätze zu dem Snow-Script.
Ich habe auf www.aeternus.org/snowscript/ mal ein paar funktionierende Beispiele dargestellt, und zwar:
1.die komplette Seite wird mit Schnee vershen;
2. nur der Header / eyecatcher wird mit Schnee versehen.
3. ein kleines Bild wird mit Schnee versehen.
4. ein großes Bild wird mit Schnee versehen.
Funktionierend bedeutet:
-- 100% responsiv, also auch wenn man z.B. die Browser-Breite ändern würde, bleibt sa betreffende Bild inkl. Schnee intakt.
-- getestet und OK mit den folgenden Browsern: Explorer, Edge, Chrome, Firefox, Opera und Safari.
Für Beispiel 1, muß zuerst auf der betreffenden Seite unbedingt die folgende Code am Ende des Body-Bereiches eintragen werden:
<script type="text/javascript" src="/js/ador_snow_p.js"></script>
<script>
$( document ).ready(function() { goAdorSnow('', 100000, './wolken1.png', false, true, false, 0.7, 0.5, 0.4); });
</script>
Für Beispiel 2, muß zuerst auf der betreffenden Seite unbedingt die folgende Code am Ende des Body-Bereiches eintragen werden:
<script type="text/javascript" src="/js/ador_snow_p.js"></script>
<script>
$( document ).ready(function() { goAdorSnow('eyecatcher', 100000, './wolken6.png', false, true, false, 0.7, 0.5, 0.4); });
</script>
Für Beispiel 3 und 4, muß zuerst auf der betreffenden Seite unbedingt die folgende Code am Ende des Body-Bereiches eintragen werden:
<script type="text/javascript" src="/js/ador_snow_p.js"></script>
<script>
$( document ).ready(function() { goAdorSnow('schnee', 100000, './wolken1.png', false, true, false, 0.7, 0.5, 0.4); });
</script>
Für Beispiel 1 (komplette Seite mit Schnee versehen), braucht auf der betreffenden Seite weiters nichts mehr gemacht zu werden.
Für Beispiel 2 (Header/eyecatcher mit Schnee versehen), auf der betreffenden Seite die folgende CSS/HTML code in einem HTML-Absatz eintragen.
<style>
.snow {
position:absolute;
top: 0%;
right: 0%;
left: 0%;
bottom: 0%;
opacity: 0;
width: auto;
height: auto;
}
.picture {
display: block;
max-width: 100%;
width: auto;
height: auto;
}
container {
position: relative;
width: 50%;
margin: 1% 3% 2% 0%;
float: left;
}
</style>
<div>
<div class='snow' id="eyecatcher" ></div>
</div>
Für Beispiel 3 (kleines Bild mit Schnee versehen), auf der betreffenden Seite die folgende CSS/HTML code in einem HTML-Absatz eintragen.
Dabei kann natürlich auch ein anderes Bild genommen werden ...
<style>
.snow {
position:absolute;
top: 0%;
right: 0%;
left: 0%;
bottom: 0%;
opacity: 0;
width: auto;
height: auto;
}
.picture {
display: block;
max-width: 100%;
width: auto;
height: auto;
}
container {
position: relative;
width: 50%;
margin: 1% 3% 2% 0%;
float: left;
}
</style>
<container>
<img class="picture" src="https://www.aeternus.org/images/snowtest_earth.jpg" >
<div class='snow' id="schnee" ></div>
</container>
Für Beispiel 4 (großes Bild mit Schnee versehen), auf der betreffenden Seite die folgende CSS/HTML code in einem HTML-Absatz eintragen.
Dabei kann natürlich auch ein anderes Bild genommen werden ...
<style>
.snow {
position:absolute;
top: 0%;
right: 0%;
left: 0%;
bottom: 0%;
opacity: 0;
width: auto;
height: auto;
}
.picture {
display: block;
max-width: 100%;
width: auto;
height: auto;
}
container {
position: relative;
width: 100%;
margin: 0% 0% 2% 0%;
float: left;
}
</style>
<container>
<img class="picture" src="https://www.aeternus.org/images/snowtest_krokussen.jpg" >
<div class='snow' id="schnee" ></div>
</container>
Have fun !!! Piotr
.
