icon added
noscript version added
This commit is contained in:
parent
3925697c10
commit
57e0a03428
4 changed files with 104 additions and 28 deletions
94
index.html
94
index.html
|
|
@ -9,14 +9,15 @@
|
||||||
<link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen"/>
|
<link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen"/>
|
||||||
<link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen"/>
|
<link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen"/>
|
||||||
|
|
||||||
<script type="text/javascript" src="js/vendor/jquery-1.6.1.min.js"></script>
|
<script type="text/javascript" src="js/vendor/jquery-2.2.4.min.js"></script>
|
||||||
<script type="text/javascript" src="js/vendor/jquery.easing.min.js"></script>
|
<script type="text/javascript" src="js/vendor/jquery.easing.min.js"></script>
|
||||||
|
<script type="text/javascript" src="js/vendor/jquery.flip.min.js"></script>
|
||||||
|
|
||||||
<script type="text/javascript" src="js/vendor/supersized.3.2.7.min.js"></script>
|
<script type="text/javascript" src="js/vendor/supersized.3.2.7.min.js"></script>
|
||||||
<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
|
<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
jQuery(function ($) {
|
$(document).ready(function () {
|
||||||
$.supersized({
|
$.supersized({
|
||||||
// Functionality
|
// Functionality
|
||||||
slideshow: 1, // Slideshow on/off
|
slideshow: 1, // Slideshow on/off
|
||||||
|
|
@ -65,6 +66,64 @@
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
$('.list').addClass('hide');
|
||||||
|
|
||||||
|
var card = $('#card');
|
||||||
|
card.css('cursor', 'pointer');
|
||||||
|
card.find('.back').removeClass('hide');
|
||||||
|
card.flip({
|
||||||
|
trigger: 'click',
|
||||||
|
speed: 500,
|
||||||
|
reverse: true
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
max-width: 128px;
|
||||||
|
max-height: 128px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #222222;
|
||||||
|
}
|
||||||
|
|
||||||
|
#icon {
|
||||||
|
position: fixed;
|
||||||
|
right: 1rem;
|
||||||
|
bottom: 1rem;
|
||||||
|
width: 128px;
|
||||||
|
height: 128px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
margin: 5% auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list .item {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list .item img {
|
||||||
|
width: 256px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
-webkit-border-radius: 7px;
|
||||||
|
-moz-border-radius: 7px;
|
||||||
|
border-radius: 7px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<!-- Piwik -->
|
<!-- Piwik -->
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var _paq = _paq || [];
|
var _paq = _paq || [];
|
||||||
|
|
@ -76,7 +135,11 @@
|
||||||
_paq.push(['setTrackerUrl', u + 'piwik.php']);
|
_paq.push(['setTrackerUrl', u + 'piwik.php']);
|
||||||
_paq.push(['setSiteId', '2']);
|
_paq.push(['setSiteId', '2']);
|
||||||
var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
|
var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
|
||||||
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
|
g.type = 'text/javascript';
|
||||||
|
g.async = true;
|
||||||
|
g.defer = true;
|
||||||
|
g.src = u + 'piwik.js';
|
||||||
|
s.parentNode.insertBefore(g, s);
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
<noscript><p><img src="//piwik.sp-codes.de/piwik.php?idsite=2" style="border:0;" alt=""/></p></noscript>
|
<noscript><p><img src="//piwik.sp-codes.de/piwik.php?idsite=2" style="border:0;" alt=""/></p></noscript>
|
||||||
|
|
@ -84,7 +147,28 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!--Arrow Navigation-->
|
<!--Arrow Navigation-->
|
||||||
<a id="prevslide" class="load-item"></a>
|
<a id="prevslide" class="load-item hide"></a>
|
||||||
<a id="nextslide" class="load-item"></a>
|
<a id="nextslide" class="load-item hide"></a>
|
||||||
|
|
||||||
|
<div class="list">
|
||||||
|
<div class="item">
|
||||||
|
<a href="https://www.sp-magic.de"><img src="img/sp-magic.png"/></a>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<a href="https://www.sp-codes.de"><img src="img/sp-codes.png"/></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="icon">
|
||||||
|
<div id="card">
|
||||||
|
|
||||||
|
<div class="front">
|
||||||
|
<img class="logo" src="img/samuel.png">
|
||||||
|
</div>
|
||||||
|
<div class="back hide">
|
||||||
|
<img class="logo" src="img/samuel.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
18
js/vendor/jquery-1.6.1.min.js
vendored
18
js/vendor/jquery-1.6.1.min.js
vendored
File diff suppressed because one or more lines are too long
4
js/vendor/jquery-2.2.4.min.js
vendored
Normal file
4
js/vendor/jquery-2.2.4.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
6
js/vendor/jquery.flip.min.js
vendored
Normal file
6
js/vendor/jquery.flip.min.js
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
/*! flip - v1.1.1 - 2016-05-25
|
||||||
|
* https://github.com/nnattawat/flip
|
||||||
|
* Copyright (c) 2016 Nattawat Nonsung; Licensed MIT */
|
||||||
|
|
||||||
|
!function(a){var b=function(){var a,b=document.createElement("fakeelement"),c={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(a in c)if(void 0!==b.style[a])return c[a]},c=function(b,c,d){this.setting={axis:"y",reverse:!1,trigger:"click",speed:500,forceHeight:!1,forceWidth:!1,autoSize:!0,front:".front",back:".back"},this.setting=a.extend(this.setting,c),"string"!=typeof c.axis||"x"!==c.axis.toLowerCase()&&"y"!==c.axis.toLowerCase()||(this.setting.axis=c.axis.toLowerCase()),"boolean"==typeof c.reverse&&(this.setting.reverse=c.reverse),"string"==typeof c.trigger&&(this.setting.trigger=c.trigger.toLowerCase());var e=parseInt(c.speed);isNaN(e)||(this.setting.speed=e),"boolean"==typeof c.forceHeight&&(this.setting.forceHeight=c.forceHeight),"boolean"==typeof c.forceWidth&&(this.setting.forceWidth=c.forceWidth),"boolean"==typeof c.autoSize&&(this.setting.autoSize=c.autoSize),("string"==typeof c.front||c.front instanceof a)&&(this.setting.front=c.front),("string"==typeof c.back||c.back instanceof a)&&(this.setting.back=c.back),this.element=b,this.frontElement=this.getFrontElement(),this.backElement=this.getBackElement(),this.isFlipped=!1,this.init(d)};a.extend(c.prototype,{flipDone:function(a){var c=this;c.element.one(b(),function(){c.element.trigger("flip:done"),"function"==typeof a&&a.call(c.element)})},flip:function(a){if(!this.isFlipped){this.isFlipped=!0;var b="rotate"+this.setting.axis;this.frontElement.css({transform:b+(this.setting.reverse?"(-180deg)":"(180deg)"),"z-index":"0"}),this.backElement.css({transform:b+"(0deg)","z-index":"1"}),this.flipDone(a)}},unflip:function(a){if(this.isFlipped){this.isFlipped=!1;var b="rotate"+this.setting.axis;this.frontElement.css({transform:b+"(0deg)","z-index":"1"}),this.backElement.css({transform:b+(this.setting.reverse?"(180deg)":"(-180deg)"),"z-index":"0"}),this.flipDone(a)}},getFrontElement:function(){return this.setting.front instanceof a?this.setting.front:this.element.find(this.setting.front)},getBackElement:function(){return this.setting.back instanceof a?this.setting.back:this.element.find(this.setting.back)},init:function(a){var b=this,c=b.frontElement.add(b.backElement),d="rotate"+b.setting.axis,e=2*b.element["outer"+("rotatex"===d?"Height":"Width")](),f={perspective:e,position:"relative"},g={transform:d+"("+(b.setting.reverse?"180deg":"-180deg")+")","z-index":"0"},h={"backface-visibility":"hidden","transform-style":"preserve-3d",position:"absolute","z-index":"1"};b.setting.forceHeight?c.outerHeight(b.element.height()):b.setting.autoSize&&(h.height="100%"),b.setting.forceWidth?c.outerWidth(b.element.width()):b.setting.autoSize&&(h.width="100%"),(window.chrome||window.Intl&&Intl.v8BreakIterator)&&"CSS"in window&&(f["-webkit-transform-style"]="preserve-3d"),b.element.css(f),b.backElement.css(g),c.css(h).find("*").css({"backface-visibility":"hidden"}),setTimeout(function(){var d=b.setting.speed/1e3||.5;c.css({transition:"all "+d+"s ease-out"}),"function"==typeof a&&a.call(b.element)},20),b.attachEvents()},clickHandler:function(b){b||(b=window.event),this.element.find(a(b.target).closest('button, a, input[type="submit"]')).length||(this.isFlipped?this.unflip():this.flip())},hoverHandler:function(){var b=this;b.element.off("mouseleave.flip"),b.flip(),setTimeout(function(){b.element.on("mouseleave.flip",a.proxy(b.unflip,b)),b.element.is(":hover")||b.unflip()},b.setting.speed+150)},attachEvents:function(){var b=this;"click"===b.setting.trigger?b.element.on(a.fn.tap?"tap.flip":"click.flip",a.proxy(b.clickHandler,b)):"hover"===b.setting.trigger&&(b.element.on("mouseenter.flip",a.proxy(b.hoverHandler,b)),b.element.on("mouseleave.flip",a.proxy(b.unflip,b)))},flipChanged:function(a){this.element.trigger("flip:change"),"function"==typeof a&&a.call(this.element)},changeSettings:function(a,b){var c=this,d=!1;if(void 0!==a.axis&&c.setting.axis!==a.axis.toLowerCase()&&(c.setting.axis=a.axis.toLowerCase(),d=!0),void 0!==a.reverse&&c.setting.reverse!==a.reverse&&(c.setting.reverse=a.reverse,d=!0),d){var e=c.frontElement.add(c.backElement),f=e.css(["transition-property","transition-timing-function","transition-duration","transition-delay"]);e.css({transition:"none"});var g="rotate"+c.setting.axis;c.isFlipped?c.frontElement.css({transform:g+(c.setting.reverse?"(-180deg)":"(180deg)"),"z-index":"0"}):c.backElement.css({transform:g+(c.setting.reverse?"(180deg)":"(-180deg)"),"z-index":"0"}),setTimeout(function(){e.css(f),c.flipChanged(b)},0)}else c.flipChanged(b)}}),a.fn.flip=function(b,d){return"function"==typeof b&&(d=b),"string"==typeof b||"boolean"==typeof b?this.each(function(){var c=a(this).data("flip-model");"toggle"===b&&(b=!c.isFlipped),b?c.flip(d):c.unflip(d)}):this.each(function(){if(a(this).data("flip-model")){var e=a(this).data("flip-model");!b||void 0===b.axis&&void 0===b.reverse||e.changeSettings(b,d)}else a(this).data("flip-model",new c(a(this),b||{},d))}),this}}(jQuery);
|
||||||
|
//# sourceMappingURL=jquery.flip.min.js.map
|
||||||
Loading…
Reference in a new issue