<div class="one" id="one">
<div class="stage">
<div class="spinner">
<div class="diy-slideshow">
<figure class="show">
<img src="http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg" width="100%" /><figcaption>"Snowying" by <a href="http://www.flickr.com/photos/fiddleoak/8511209344/">fiddleoak</a>.</figcaption>
<div class="description">
<h2>No man, I don't eat pork</h2>
<p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass house, fuckin' up the way the nigger talks.He do that shit to me, he better paralyze my ass, 'cause I'll kill the silly sausage, know what I'm sayin'? </p>
</div>
</figure>
<figure>
<img src="http://themarklee.com/wp-content/uploads/2013/12/starlight.jpg" width="100%" /><figcaption>"Starlight" by <a href="http://www.flickr.com/photos/chaoticmind75/10738494123/in/set-72157626146319517">ChaoticMind75</a>.</figcaption> <div class="description">
<h2>Hold on to your behind</h2>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends. </p>
</div>
</figure>
<figure>
<img src="http://themarklee.com/wp-content/uploads/2013/12/snowstorm.jpg" width="100%" /><figcaption>"Snowstorm" by <a href="http://www.flickr.com/photos/tylerbeaulawrence/8539457508/">Beaulawrence</a>.</figcaption> <!-- start slipsum code -->
<div class="description">
<h2>I'm serious as a heart attack</h2>
<p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee. </p>
</div>
</figure>
<figure>
<img src="http://themarklee.com/wp-content/uploads/2013/12/misty-winter-afternoon.jpg" width="100%" /><figcaption>"Misty winter afternoon" by <a href="http://www.flickr.com/photos/22746515@N02/5277611659/">Bert Kaufmann</a>.</figcaption> <!-- start slipsum code -->
<div class="description">
<h2>I'm serious as a heart attack</h2>
<p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee. </p>
</div>
</figure>
<figure>
<img src="http://themarklee.com/wp-content/uploads/2013/12/good-morning.jpg" width="100%" /><figcaption>"Good Morning!" by <a href="http://www.flickr.com/photos/frank_wuestefeld/4306107546/">Frank Wuestefeld</a>.</figcaption><div class="description">
<h2>Hold on to your behind</h2>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends. </p>
</div>
</figure>
<figure>
<img src="http://themarklee.com/wp-content/uploads/2013/12/driving-home-for-christmas.jpg" width="100%" /><figcaption>"Driving home for Christmas" by <a href="http://www.flickr.com/photos/22746515@N02/5292186041/">Bert Kaufmann</a>.</figcaption> <!-- start slipsum code -->
<div class="description">
<h2>I'm serious as a heart attack</h2>
<p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee. </p>
</div>
</figure>
<span class="prev">«</span>
<span class="next">»</span>
</div>
</div>
</div></div><div id="close" class="spinnerwiggle"><p>X</p></div> @import "compass/css3";
// Config ----------------------------------
$spinner-size: 1600px; // 200px
$spinner-thickness: 20%; // 4px
$spinner-speed: 3.2s; // 1.2s
$spinner-3d: true; // true
$spinner-loops: infinite; // infinite (be careful, save the batteries!)
// Page ----------------------------------
body {
background: #111;
background: hsl(200,30%,6%);
background: radial-gradient( hsl(200,40%,20%), hsl(200,30%,6%)) ;
display: flex;
padding: 50px;
box-sizing: border-box;
margin: 0; background-clip:border-box;
}
html, body { height: 100%;overflow:hidden; }
@import url(https://fonts.googleapis.com/css?family=Supermercado+One);
.spinner h1 {
margin:auto;font-size:80px;
width:100%;height:calc(100%);
text-align:center;
top: 0%;
left: -100%;
margin: auto;
padding-right:5%; background: rgba(255,255,255,1);
-webkit-mask: linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,0%,1) 90% );
transform-origin: 50% 55%;
transform: perspective($spinner-size) rotateX(-6deg);
transform: perspective($spinner-size) rotateX(-6deg);
animation: spinner-wiggle $spinner-speed $spinner-loops;
-webkit-transition: width 2s, box-shadow 3s,
border 3s, background-color 4s, height 2s, border-radius 2s;
-moz-transition: width 2s, box-shadow 3s,
border 3s, background-color 4s, height 2s, border-radius 2s;
-o-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s;
-ms-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s;
transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s;
}
body:hover .active {
background: rgba(100,100,100,1);
border-color:rgba(100,100,100,0.5);
box-shadow:
0 2px 35px 15px rgba(0,0,0,0.3),
0 12px 15px 15px rgba(0,0,0,0.4),
0 -5px 5px 15px rgba(64,128,180,0.0),//#4A8ACC,
inset 0 -5px 15px 0px rgba(64,128,180,0.0),//rgba(0,0,0,0.3),
inset 0 0 50px 0px rgba(0,0,0,0.4);
}
body:hover .active h1 {opacity:1;
//animation-delay: $spinner-speed * 1.55;
}
body:hover .active:hover h1:hover {opacity:1;}
body:hover .active:hover h1:hover {
-webkit-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s;
-moz-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s;
-o-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s;
-ms-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s;
transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s;
}
img {border-radius:10%;border: 6px solid rgba(0,0,0,0.5);}
.one, .one:hover,
.display
.spinner h1:hover,
.display .spinner h1 {
-webkit-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s;
-moz-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s;
-o-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s;
-ms-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s;
transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s;
}
.one {max-width:1600px !important;
position: absolute; margin: auto;
top: 0; left: 0; right: 0; bottom: 0; width: 50px; height: 50px;
background-color: #4A8ACC; border: 0px solid #4A8ACC;
border-radius:50%; cursor: pointer;
box-shadow:
0 4px 30px 10px rgba(0,0,0,0.3),
0 12px 40px 10px rgba(0,0,0,0.4),
0 -4px 30px 5px rgba(64,128,180,0.9),//#4A8ACC,
inset 0 24px 10px 10px rgba(0,0,0,0.1),
inset 0 0 22px -2px rgba(0,0,0,0.4);
background-clip:border-box;
}
.one.active:hover {
box-shadow:
0 2px 35px 15px rgba(0,0,0,0.3),
0 12px 15px 15px rgba(0,0,0,0.4),
0 -5px 5px 15px rgba(64,128,180,0.0),//#4A8ACC,
inset 0 -5px 15px 0px rgba(64,128,180,0.0),//rgba(0,0,0,0.3),
inset 0 0 50px 0px rgba(0,0,0,0.4);
}
.one:hover {
width: 200px; height:200px;
border: 0px solid #FF9147;
background-color:#FF9147;
box-shadow:
0 20px 30px 15px rgba(128,64,40,0.1),
0 60px 30px 0px rgba(0,0,0,0.3),
0 0px 30px 10px rgba(150,74,60,0.9),
inset 0 24px 18px -10px rgba(128,64,40,0.5),
inset 0 0 22px -2px rgba(0,0,0,0.4);
border-radius:50%;
}
body .active {
width: 90%; height:90%;
border: 0px solid #4A8ACC;
background-color: #4A8ACC;
border-radius:50px;
-webkit-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s;
-moz-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s;
-o-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s;
-ms-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s;
transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s;
}
body:hover .active:hover {
width: 90%; height:90%;
border: 0px solid #4A8ACC;
background-color: #4A8ACC;
border-radius:50px;
box-shadow:
0 2px 35px 15px rgba(0,0,0,0.3),
0 12px 15px 15px rgba(0,0,0,0.4),
0 -5px 5px 15px rgba(64,128,180,0.0),//#4A8ACC,
inset 0 -5px 15px 0px rgba(64,128,180,0.0),//rgba(0,0,0,0.3),
inset 0 0 50px 0px rgba(0,0,0,0.4);
}
.one .stage{
width: 100%; height:100%;
border:0px solid #4A8ACC;// #FF9147;
background-color:transparent;opacity:0;
border-radius:inherit;display:none;
}
.stage.display{
width: 100%; height:100%;
border:0px solid #4A8ACC;
background-color:transparent;opacity:1;
border-radius:inherit;display:inline-block;
}
// Spinner ----------------------------------
.one .spinner {max-width:1600px !important;
opacity:0.5;
-webkit-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s opacity 2s;
-moz-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s opacity 2s;
-o-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s opacity 2s;
-ms-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s opacity 2s;
transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s opacity 2s;}
.stage.display .spinner:hover {opacity:1;}
.stage.display .spinner {max-width:1600px !important;
opacity:0.5;
-webkit-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s opacity 2s;
-moz-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s opacity 2s;
-o-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s opacity 2s;
-ms-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s opacity 2s;
transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s opacity 2s;}
.spinner {
background: rgba(255,255,255,0.9);
position: absolute;left:5%;top:0%;
margin: auto;
box-sizing: border-box;
background-clip: padding-box;
width: calc(90%);
height: calc(95%);
border-radius: $spinner-thickness/1.9;
//border: $spinner-thickness*20 solid hsla(0,100%,100%,.5);
@if ($spinner-3d) {
-webkit-mask: linear-gradient(rgba(0, 0, 0, 1) 97%, rgba(0, 0, 0, 0.1) 101%) ;
transform-origin: 50% 50%;
transform: perspective($spinner-size/1.1) rotateX(6deg);
animation: spinner-wiggle $spinner-speed $spinner-loops;
}
-webkit-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s;
-moz-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s;
-o-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s;
-ms-transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s;
transition: width 2s, box-shadow 3s, border 3s,
background-color 4s, height 2s, border-radius 2s;
}
.display .spinner h1 {float:left;margin-top:0%;border-radius:50px;
}
.display .spinner h1:hover {
background: rgba(255,255,255,1);
}
// keyframes ----------------------------------
@keyframes spinner-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes spinner-fade {
0% { opacity: 1; }
25% { opacity: 1; }
50% { opacity: 1; }
75% { opacity: 1; }
100% { opacity: 1; }
}
@keyframes fadeout {
100% { opacity: 0; }
}
@keyframes fadein {
100% { opacity: 1; }
}
@keyframes spinner-wiggle {
30% { transform: perspective($spinner-size) rotateX(10deg); }
40% { transform: perspective($spinner-size) rotateX(7deg); }
50% { transform: perspective($spinner-size) rotateX(10deg); }
60% { transform: perspective($spinner-size) rotateX(8deg); }
}
// JUNK EFFECTS FOR LATER! ----------------------------------
//box-sizing: border-box;
//background-clip:padding-box;
//border-radius: 75% $spinner-thickness/1.2%;
//border: $spinner-thickness*20 solid hsla(0,0%,100%,.5);
// for the h1:hover --
//position: absolute;
//margin: auto;
//box-sizing: border-box;
//background-clip: padding-box;
//width: $spinner-size*1;
//height: $spinner-size*1;
//border-radius: 100px; //$spinner-thickness/2.2;
//border: $spinner-thickness/0.5 solid hsla(0,0%,100%,.1);
//@if ($spinner-3d) {
// mask smoothens out the anti-aliasing artifacts in the back.
// -webkit-mask: linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,0%,1) 90% );
// transform-origin: 50% 50%;
// transform: perspective($spinner-size) rotateX(66deg);
// }
// animation: spinner-spin $spinner-speed cubic-bezier(.6,.2,0,.8) $spinner-loops,
// spinner-fade $spinner-speed linear $spinner-loops,
// spinner-wiggle $spinner-speed $spinner-loops;
.diy-slideshow{
position: relative;
display: block;
overflow: hidden;z-index:1000;
}
figure{
position: absolute;
opacity: 0;
transition: 1s opacity;height:100%;
}
figcaption {
position: fixed;
font-family: sans-serif;
font-size: .8em;
top: 4em;
padding: .5em;
margin-right: 2em;
color: #fff;
background: rgba(0, 0, 0, 0.75);
border-radius: 8px;
text-align: right;
width: Auto;
float: right;
opacity: 0.5;
z-index: 1001;
right: 4em;}
figcaption a{
color: #fff;
}
figure.show{
opacity: 1;
position: static;
transition: 1s opacity;
}
.next, .prev{
color: #fff;
position: absolute;
background: rgba(0,0,0, .6);
top: 50%;
z-index: 1;
font-size: 2em;
margin-top: -.75em;
opacity: .3;
user-select: none;z-index:1000;
}
.next:hover, .prev:hover, figcaption:hover, #close:hover {
cursor: pointer;
opacity: 1 !important;
}
.next{
right: 0;
padding: 10px 5px 15px 10px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;z-index:1000;
}
.prev{
left: 0;
padding: 10px 10px 15px 5px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;z-index:1000;
}
p, h2{
margin: 10px 20px;
color: #fff;
text-shadow: 0 5px 6px rgba(0,0,0,0.3),
0 2px 3px rgba(0,0,0,.9);
}
.description h2 { // mart additions
color:white;
margin-top:5%;
padding: 1.5em;
margin-right:2em;
padding-left:0em;
font-size:4em;
font-family:'Supermercado One';
text-shadow: 0 1px 0 #ccc,
0 2px 0 #bbb,
0 3px 0 #aaa,
0 4px 0 #999,
0 5px 0 #888,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
a{color:#eef;}
.description {
position:absolute;
top:-10%;left:0;right:0;bottom:0;
padding-left:2em;padding-right:2em;
display:none;
opacity:0 !important;overflow:visible; height:100%;
}
.showme {display:block;opacity:1 !important;}
#close.showme {display:block;opacity:0.5 !important;}
#close.showme:hover {opacity:1 !important;}
#close, .close{
position: absolute;
font-family: sans-serif;
font-size: .8em;
top: 5px;
left:0em;
right:0em;
bottom: 0em;
padding: .1em; margin-left:5px;margin-top:5px;
color: #fff;
background: rgba(0,0,0, .75);
border-radius: 50%;
text-align:right;
width:32px;height:32px;
opacity:0;z-index:2001;
-webkit-mask: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,1) 90% );
}
#close p, .close p {margin-left:1em;margin-top:0.6em;}
// Making some stuff for my website:- http://www.designmechanics.com - and seeing as copepen has inspired me with its great contributors ideas and examples, I'd be a fool not to share in return!
// Original "simple animation" orb from https://codepen.io/HarrisCarney/pen/LrvDk , slideshow code originally from https://codepen.io/leemark/pen/DLgbr , and the shocking PULP FICTION copytext from slipsum.com
// INTERFACE ----------------------------------
// Primary Button
$('#one').click(function(){
$('#one.one').addClass('active');
$('.stage').addClass('display');
$('#close').addClass('showme');
$('#close').css({'display':'inline-block'});
});
// UI Reset (click on background)
//('body').click(function(){
// if($('body #one.active').length) $('body #one.active').removeClass('active');
//});
// UI Buttons
//$('figcaption').click(function(){
// $('.description').toggleClass('showme');
//});
$('figcaption').on('click', function(e) {
e.preventDefault();
$('figure.show .description').toggleClass('showme');
});
$('#close').on('click', function(e) {
e.preventDefault();
$('#one.one').removeClass('active');
$('.stage').removeClass('display');
$('#close').removeClass('showme');
$('#close').css({'display':'none'});
});
$('#button1').click(
function(){
$('#myEltId span').css({
'border-width' : '0',
'border-style' : 'none',
'border-color' : 'transparent'
});
});
$('#fullscreen').click(function(){
$('#one').toggleClass('fullscreen');
});
$("li").bind('click', function(){
// remove the active class if it's there
if($("li.active").length) $("li.active").removeClass('active');
// add the active class to the clicked element
$(this).addClass('active');
});
// FONT ----------------------------------
// headline fontsize reset (add set on width - use .live()
//$(".spinner h1").css({
// fontSize: 20
//});
//
//$(".spinner h1").animate({'font-size':width.perc+'%'});
// SLIDESHOW ----------------------------------
var counter = 0, // to keep track of current slide
$items = $('#one .diy-slideshow figure'), // a collection of all of the slides, caching for performance
numItems = $items.length; // total number of slides
// this function is what cycles the slides, showing the next or previous slide and hiding all the others
var showCurrent = function(){
var itemToShow = Math.abs(counter%numItems);// uses remainder (aka modulo) operator to get the actual index of the element to show
$items.removeClass('show'); // remove .show from whichever element currently has it
$items.eq(itemToShow).addClass('show');
};
// add click events to prev & next buttons
$('.next').on('click', function(){
counter++;
showCurrent();
});
$('.prev').on('click', function(){
counter--;
showCurrent();
});
// if touch events are supported then add swipe interactions using TouchSwipe https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
if('ontouchstart' in window){
$('.diy-slideshow').swipe({
swipeLeft:function() {
counter++;
showCurrent();
},
swipeRight:function() {
counter--;
showCurrent();
}
});
}
External CSS
This Pen doesn't use any external CSS resources.