FLOATING BACKGROUND IMAGES
Verfasst: So 2. Apr 2023, 22:01
Du kannst diesen seltsamen Skriptnamen nicht verstehen? Mach dir keine Sorgen! Führen dieses kostenlose JavaScript aus und du wirst eine neue Art der Diashow entdecken, um den Hintergrund mit nur einem Bild und fast ohne Konfiguration zum Leben zu erwecken!
Demoseite hier: Floating Background Images
Code: Alles auswählen
<script>
// CREDITS:
// Floating Background Image JavaScript
// 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/fast/index.html
// IMPORTANT:
// If you add this script to a script-library or a script-archive
// you have to insert a link to http://www.fabulant.com
// right into the webpage where the script will be displayed.
// START OF CONFIGURATION ZONE ///////////////////////////////////////////
// number of floating images
var numberofimages=4
// URL of your background-image
var imgurl="bgimgfloat.jpg"
// maximum width of the floating objects (pixels
var clipwidthmax=180
// maximum height of the floating objects (pixels)
var clipheightmax=120
// END OF CONFIGURATION ZONE ///////////////////////////////////////////
// do not edit the variables below
var floatingspeed=20
var clipleft=new Array()
var clipright=new Array()
var cliptop=new Array()
var clipbottom=new Array()
var clipwidth=new Array()
var clipheight=new Array()
var preloadimage=new Image()
preloadimage.src=imgurl
var tempo=50
numberofimages=numberofimages-1
var shift_x=Math.floor(numberofimages/2)*-1
var shift_y=Math.floor(numberofimages/2)*-1
var stepx=new Array()
var stepy=new Array()
for (i=0;i<=numberofimages;i++) {
stepx[i]=randommaker(floatingspeed)
stepy[i]=randommaker(floatingspeed)
}
var imgwidth=new Array()
var imgheight=new Array()
var marginbottom=0
var marginleft=0
var margintop=0
var marginright=0
var timer
function setValues() {
marginleft=0
margintop=0
marginbottom=document.body.clientHeight
marginright=document.body.clientWidth
for (i=0;i<=numberofimages;i++) {
clipheight[i]=randommaker(clipheightmax)+50
clipwidth[i]=randommaker(clipwidthmax)+50
clipleft[i]=randommaker(marginright)-clipwidth[i]
cliptop[i]=randommaker(marginbottom)-clipheight[i]
}
for (i=0;i<=numberofimages;i++) {
var opacitystrength=randommaker(80)
var opacitystrengthff=opacitystrength/100
var thisspan=eval("document.getElementById('flyimage"+(i)+"')")
thisspan.innerHTML="<img src='"+imgurl+"' width='"+marginright+"' height='"+marginbottom+"' style='filter:alpha(opacity="+opacitystrength+");'>"
thisspan=eval("document.getElementById('flyimage"+(i)+"').style")
thisspan.left=0
thisspan.top=0
thisspan.opacity=opacitystrength/100
thisspan.visibility="visible"
}
checkmovement()
}
function randommaker(range) {
rand=Math.floor(range*Math.random())
if (rand==0) {rand=Math.ceil(range/2)}
return rand
}
function checkmovement() {
checkposition()
movepictures()
timer=setTimeout("checkmovement()",tempo)
}
function movepictures() {
for (i=0;i<=numberofimages;i++) {
var thisspan=eval("document.getElementById('flyimage"+(i)+"').style")
clipleft[i]+=stepx[i]
clipright[i]=clipleft[i]+clipwidth[i]
cliptop[i]+=stepy[i]
clipbottom[i]=cliptop[i]+clipheight[i]
thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")"
}
}
function checkposition() {
for (i=0;i<=numberofimages;i++) {
var thisspan=eval("document.getElementById('flyimage"+(i)+"').style")
if (clipright[i]>marginright) {
clipleft[i]-=Math.abs(stepx[i])
clipright[i]=clipleft[i]+clipwidth[i]
thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")"
stepx[i]=randommaker(floatingspeed)*-1
}
if (clipleft[i]<marginleft) {
clipleft[i]+=Math.abs(stepx[i])
clipright[i]=clipleft[i]+clipwidth[i]
thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")"
stepx[i]=randommaker(floatingspeed)
}
if (clipbottom[i]>marginbottom) {
cliptop[i]-=Math.abs(stepy[i])
clipbottom[i]=cliptop[i]+clipheight[i]
thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")"
stepy[i]=randommaker(floatingspeed)*-1
}
if (cliptop[i]<margintop) {
cliptop[i]+=Math.abs(stepy[i])
clipbottom[i]=cliptop[i]+clipheight[i]
thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")"
stepy[i]=randommaker(floatingspeed)
}
}
}
for (i=0;i<=numberofimages;i++) {
document.write("<DIV id='flyimage"+i+"' style='position:absolute;visibility:hidden'></DIV>")
}
window.onload=setValues
</script>