Animated wheel navigation
Animierte JavaScript-Bibliothek für die Radnavigation basierend auf Ra phaël.js (SVG / VML). Es funktioniert auf allen gängigen Desktop- und mobilen Browsern. Mögliche Verwendungen:
Download-Archiv
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/wheelnav@1.7.1/js/dist/raphael.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/wheelnav@1.7.1/js/dist/wheelnav.min.js"></script>
<style>
.wheelNav {
height: 350px;
width: 350px;
margin: auto;
-moz-transition: ease 1s;
-o-transition: ease 1s;
-webkit-transition: ease 1s;
transition: ease 1s;
}
.wheelNav > svg {
width: 100%;
height: 100%;
}
@media (max-width: 1080px) {
.wheelNav {
height: 300px;
width: 300px;
}
}
@media (max-width: 880px) {
.wheelNav {
height: 250px;
width: 250px;
}
}
@media (max-width: 480px) {
.wheelNav {
height: 200px;
width: 200px;
}
}
</style>
</head>
<body>
<div id="divWheelnav" class="wheelNav"></div>
<div name="test" class="wheelNav"></div>
<div name="test" class="wheelNav"></div>
<div class="wheelNav withoutid"></div>
<script>
//Initialize wheelnav by id
var myWheelnav = new wheelnav("divWheelnav");
myWheelnav.createWheel(["id","id","id","id"]);
//Wrapper function for element without an ID attribute
var wheelnavWrapper = function (elementwithoutid) {
var fakeid = "wheelnav";
var counter = 0;
while (document.getElementById(fakeid + counter.toString()) !== null) {
counter++;
}
if (elementwithoutid != null) {
if (!elementwithoutid.hasAttribute("id")) {
elementwithoutid.setAttribute("id", fakeid + counter.toString());
}
return new wheelnav(elementwithoutid.id);
}
};
//Initialize wheelnav by element
var elementsbyname = document.querySelectorAll("div[name=test]");
var wheelnav0 = wheelnavWrapper(elementsbyname[0]);
wheelnav0.createWheel(["name","name","name","name"]);
var wheelnav1 = wheelnavWrapper(elementsbyname[1]);
wheelnav1.createWheel(["name","name","name","name"]);
var elementbyclass = document.querySelector("div.wheelNav.withoutid");
var wheelnav2 = wheelnavWrapper(elementbyclass);
wheelnav2.createWheel(["class","class","class","class"]);
</script>
</body>
</html>