samuel-p/samuel-philipp.de
samuel-p/samuel-philipp.de
1
0
Fork 0
Code Issues Pull requests 8 Releases Activity Actions

icon added

Browse source 
noscript version added
This commit is contained in:
Samuel Philipp 2016-11-23 00:56:21 +01:00
parent 3925697c10
commit 57e0a03428
4 changed files with 104 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
index.html
View file

@ -9,14 +9,15 @@
<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"/>
<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.flip.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">
jQuery(function ($) {
$(document).ready(function () {
$.supersized({
// Functionality
slideshow: 1, // Slideshow on/off
@ -65,6 +66,64 @@
});
});
</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 -->
<script type="text/javascript">
var _paq = _paq || [];
@ -76,7 +135,11 @@
_paq.push(['setTrackerUrl', u + 'piwik.php']);
_paq.push(['setSiteId', '2']);
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>
<noscript><p><img src="//piwik.sp-codes.de/piwik.php?idsite=2" style="border:0;" alt=""/></p></noscript>
@ -84,7 +147,28 @@
</head>
<body>
<!--Arrow Navigation-->
<a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>
<a id="prevslide" class="load-item hide"></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>
</html>

18
js/vendor/jquery-1.6.1.min.js vendored
View file

File diff suppressed because one or more lines are too long

4
js/vendor/jquery-2.2.4.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

6
js/vendor/jquery.flip.min.js vendored Normal file
View 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