diedVIPs

html knowhow

Bilderrotation einbauen










Bild dreht sich permanent

Das

So sieht´s aus


meinsolargarten





Quellcode
<html>
<head>

<style type="text/css">
#loading {-webkit-animation: rotation 20s infinite linear;}
@-webkit-keyframes rotation {from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(359deg); } }
</style>
<head>

<body >
<img alt="meinsolargarten" class="auto-style24" id="loading" src="../Bilder/W-MSG.jpg" style="height: auto" width="15%" />
</body>
</html>



Bild dreht sich schrittweise um die eigene Achse

Das

So sieht´s aus


meinsolargarten


Quellcode
<html>
<head>

<style type="text/css">
#myDIV {
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {transform: rotate(180deg);}
}
</style>
<head>

<body >
<div id="myDIV">
<img alt="meinsolargarten" class="auto-style24" id="loading" src="../Bilder/W-Ovoice.jpg" style="height: auto" width="15%" />
</div>

</body>
</html>




Bild dreht sich bei hover rotierend

Das

So sieht´s aus




Quellcode
<html>
<head>
<script>
<!--
var x,y,n=0,ny=0,rotINT,rotYINT
function rotateDIV()
{
x=document.getElementById("rotate2D")
clearInterval(rotINT)
rotINT=setInterval("startRotate()",10)
}
function startRotate()
{
n=n+1
x.style.transform="rotate(" + n + "deg)"
x.style.webkitTransform="rotate(" + n + "deg)"
x.style.OTransform="rotate(" + n + "deg)"
x.style.MozTransform="rotate(" + n + "deg)"
if (n==360 || n==360)
{
clearInterval(rotINT)
if (n==360){n=0}
}
}
//-->
</script>

<style type="text/css">
Hier nichts
</style>
<head>

<body >
<center><div onmouseover="rotateDIV()" id="rotate2D">
<a href="http://www.meinsolargarten.de">
<img src="Bilder/W-MSG.jpg" alt="meinsolargarten" height="250" width="200" class="auto-style54"/></a></div></center>

</body>
</html>



Bild dreht sich bei hover horizontal

Das

So sieht´s aus


Avatar
Avatar


Quellcode
<html>
<head>
Hier nichts

<style type="text/css">
.flip-card {background-color: transparent;width: 28%;height: 300px;perspective: 500px;}
.flip-card-inner {position: absolute;width: 60%;height: 100%;text-align: center;transition: transform 0.6s;transform-style: preserve-3d;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);}
.flip-card:hover .flip-card-inner {transform: rotateY(180deg);}
.flip-card-front, .flip-card-back {position: absolute;width: 100%;height: 100%;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
.flip-card-front {background-color: #bbb;color: black;}
.flip-card-back {background-color: #2980b9;color: white;transform: rotateY(180deg);}
</style>
<head>

<body >
<center><div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front"><a href="http://ovoice.de"><img src="Bilder/W-ovoice.jpg" alt="Avatar" style="width:140%;height:100%;" /></a></div>
<div class="flip-card-back"><a href="http://ovoice.de"><img src="Bilder/W-ovoice.jpg" alt="Avatar" style="width:140%;height:100%;" class="auto-style54" /></a></div>
</div></div></center>

</body>
</html>



Bild schiebt sich über Bild

Das

So sieht´s aus


Avatar
Kaufen Sie bei meinem Werbepartner


Quellcode
<html>
<head>
Hier nichts

<style type="text/css">
.container {position: relative;width: 50%;left: 30%;}
.image {display: block;width: 80%;height: auto;}
.overlay {position: absolute;bottom: 100%;left: 0;right: 0;background-color: #008CBA;overflow: hidden;width: 50%;height:0;transition: .5s ease;}
.container:hover .overlay {bottom: 0;height: 100%;}
.text {color: white;font-size: 20px;position: absolute;top: 50%;left: 50%;
-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);text-align: center;}

</style>
<head>

<body >
<div class="container"><img src="bilder/w-hbart.jpg" style="width:50%;height:auto;"alt="Avatar" class="image" z-index=" 5" />
<div class="overlay"><div class="text">Kaufen Sie bei meinem Werbepartner</div></div></div>
</body>

</html>



Wenn Sie eine Website mit vielen Seiten haben, möchten Sie möglicherweise jeder Seite eine Art Nummerierung hinzufügen.
So sieht´s aus




Quellcode
<html>
<head>
<script>document.addEventListener('DOMContentLoaded', function () {
// Auswahl des Bildwechslers und seiner Kindelemente
var changer = document.querySelector('#gallery'),
children = changer.querySelectorAll('figure'),
container = document.querySelector('#container'),
newWidth = (children.length * 100) + '%';
// sets container, puts figure-elements horizontal
container.classList.add('container');
changer.classList.add('changer');
changer.style.width = newWidth;
var newMargin = ((children.length - 1) * -16) + '%';
// animate changer
var marquee = changer.animate(
[
{
marginLeft: '110%'
}, {
marginLeft: newMargin
}
], {
duration: children.length * 1500,
direction: 'alternate',
iterations: Infinity
});
// now for the playing/pausing
changer.addEventListener('mouseenter', pauseMarquee, false);
changer.addEventListener('mouseleave', playMarquee, false);
// pretty self-explanatory
function playMarquee() {
if (marquee.playState === 'paused') marquee.play();
}
// pretty self-explanatory
function pauseMarquee() {
if (marquee.playState === 'running') marquee.pause();
}
});
</script>


<style type="text/css">
#gallery {}
#gallery figure {position: relative;width: 10em;margin: 0;padding: 0;}
#gallery figcaption {position: absolute;left: 0em;top: 12em;font-size:1.3em;color: black;}
#gallery img {width: 100%;margin: 0;padding: 0;}
.changer {position: relative;display:flex; align-items: -1em;justify-content: -1em;width: 100%;}
.changer figure {display: block;width: 0em;}
</style>
<head>

<body >
<div id="container"><div id="gallery">
<figure><a target="_self" href="#"><img src="Bilder/W-HBart.jpg" alt="Peru" /></a><figcaption></figcaption></figure>
<figure><a target="_self" href="#"><img src="Bilder/W-Hdil.jpg" alt="Peru" /></a><figcaption></figcaption></figure>
<figure><a target="_self" href="#"><img src="Bilder/W-htmlKN.png" alt="Peru" /></a><figcaption></figcaption></figure>
<figure><a target="_self" href="#"><img src="Bilder/W-Likeur.jpg" alt="Peru 2007" /></a><figcaption></figcaption></figure>
<figure><a target="_self" href="#"><img src="Bilder/W-MSG.jpg" alt="Peru" /></a><figcaption></figcaption></figure>
<figure><a target="_self" href="#"><img src="Bilder/W-MSGS.jpg" alt="Peru" /></a><figcaption></figcaption></figure>
<figure><a target="_self" href="#"><img src="Bilder/W-Ovoice.jpg" alt="Peru" /></a><figcaption></figcaption></figure>
<figure><a target="_self" href="#"><img src="Bilder/W-ReuFi.jpg" alt="Peru" /></a><figcaption></figcaption></figure>
</div></div>
</body>

</html>










Kontakt    Datenschutz    Impressum