FLOWER POWER SPRING ANIMATION

Moderator: HTML-Laie

Antworten
Benutzeravatar
Hape
Administrator
Beiträge: 336
Registriert: Fr 22. Mai 2020, 00:33

FLOWER POWER SPRING ANIMATION

Beitrag von Hape »

Fügen Sie mit dieser charmanten, süßen und kostenlosen JavaScript-Animation den Frühling auf Ihrer gesamten Webseite hinzu. Bezaubernde Art,
Ihre Besucher zu begrüßen und sie zum Blühen zu bringen. Einfache Konfiguration von Blütenanzahl und Geschwindigkeit.

Speichern Sie die sechs Bilder unten und legen Sie sie in denselben Ordner wie Ihre Webseite. Ändern Sie ihre Namen nicht!

Öffnen Sie Ihre Webseite, gehen Sie zum Anfang des Skripts und konfigurieren Sie die Anzahl der Blüten, die Geschwindigkeit der Animation und die Sichtbarkeitszeit der Blüte (siehe roten Code unten):

// // Anzahl der Blüten
var Anzahl der Blüten = 10

Geschwindigkeit Animation (höher bedeutet langsamer)
var openblossomspeed=80

Wie lange soll die Blüte nach dem Öffnen sichtbar sein? Antwort in Sekunden
var showblossomstime=2

Code: Alles auswählen

<script>
// CREDITS:
// Free JavaScript FlowerPower: put springtime on your website
// by Peter Gehrig 
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com.

// IMPORTANT: 
// If you add this script to a script-library or a script-archive 
// you have to insert a highly visible link to http://www.fabulant.com right into the 
// webpage where the script will be displayed.

// number of blossoms
var numberofblossoms=20

// speed of blossom animation (higher means slower)
var openblossomspeed=100

// how long shall the blossom be visible after being opened? Answer in seconds
var showblossomstime=2

// do not edit the variables below
var frame=new Array()
frame[0]=new Image()
frame[0].src="frame1.gif"
frame[1]=new Image()
frame[1].src="frame2.gif"
frame[2]=new Image()
frame[2].src="frame3.gif"
frame[3]=new Image()
frame[3].src="frame4.gif"
frame[4]=new Image()
frame[4].src="frame5.gif"
frame[5]=new Image()
frame[5].src="frame6.gif"

var i_nownumberofframes=0
var i_maxnumberofframes=5
var i_numberofblossoms=0

var marginleft=0
var margintop=0
var marginbottom
var marginright

var timer
var thisblossom

showblossomstime=showblossomstime*1000

function positionblossoms() {
	marginbottom=document.body.clientHeight-40
    marginright=document.body.clientWidth-40    
	for (i=0;i<=numberofblossoms;i++) {     
		var randx=Math.floor(marginright*Math.random())
		var randy=Math.floor(marginbottom*Math.random())
		thisblossom=eval("document.getElementById('blossom"+i+"').style")
		thisblossom.left=randx
		thisblossom.top=randy
		thisblossom.visibility="visible"
	}
	thisblossom=eval("blossom0")
	openblossoms()
}

function openblossoms() {
	clearTimeout(timer)
	if (i_nownumberofframes<=i_maxnumberofframes) {
		thisblossom.innerHTML="<img src='"+frame[i_nownumberofframes].src+"'>"
		i_nownumberofframes++
		timer=setTimeout("openblossoms()",openblossomspeed)
	}
	else  {
		clearTimeout(timer)
		i_nownumberofframes=0
		switchtonextblossom()
	}
}

function switchtonextblossom() {
	i_numberofblossoms++
	if (i_numberofblossoms<=numberofblossoms) {
		thisblossom=eval("blossom"+i_numberofblossoms)
		openblossoms()
	}
	else {
		setTimeout("hideblossoms()",showblossomstime)
	}
}

function hideblossoms() {
	for (i=0;i<=numberofblossoms;i++) {     
		thisblossom=eval("document.getElementById('blossom"+i+"').style")
		thisblossom.visibility="hidden"
	}
}


for (i=0;i<=numberofblossoms;i++) {
	document.write("<div id='blossom"+i+"' style='position:absolute;top:0px;left:0px;visibility:hidden;'><img name='blossomimg"+i+"' src='frame1.gif'></div>")
	document.clear()
}
window.onresize=positionblossoms
window.onload=positionblossoms
</script>
Demoseite dazu hier: Flower Spring Animation

flowers.zip
(2.23 KiB) 182-mal heruntergeladen

Antworten