première livraison
This commit is contained in:
commit
4f58d2d8ce
8 changed files with 622 additions and 0 deletions
220
_left-social-media-popup-v2.html
Normal file
220
_left-social-media-popup-v2.html
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Social Media Popup</title>
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/style-left.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="socialHolder">
|
||||
<div id="holder">
|
||||
<div id="nameHolder">
|
||||
</div>
|
||||
<div id="iconBox">
|
||||
<div id="canvasHolder">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<div id="icons">
|
||||
|
||||
</div>
|
||||
<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 140 140" style="enable-background:new 0 0 140 140;" xml:space="preserve">
|
||||
<path id="square" d="M120,120H70H20V70V20h50h50v50V120z"/>
|
||||
<path id="littleLeft" d="M120,20c0,0-6.5,19-6.5,50s6.5,50,6.5,50H70H20c0,0-5.8-19-5.8-50S20,20,20,20h50H120z"/>
|
||||
<path id="littleRight" d="M20,120c0,0,6.5-19,6.5-50S20,20,20,20h50h50c0,0,5.8,19,5.8,50s-5.8,50-5.8,50H70H20z"/>
|
||||
<path id="bigRight" d="M20,120c0,0,6.6-13.1,6.6-50.2S20,20,20,20h50h50c0,0,17.9,12.7,17.9,49.8S120,120,120,120H70H20z"/>
|
||||
<path id="bigLeft" d="M120,20c0,0-6.6,13.1-6.6,50.2S120,120,120,120H70H20c0,0-17.9-12.7-17.9-49.8S20,20,20,20h50H120z"/>
|
||||
<path id="littleUp" d="M120,120c0,0-19-6.6-50-6.6S20,120,20,120V70V20c0,0,19-6.5,50-6.5s50,6.5,50,6.5v50V120z"/>
|
||||
<path id="bigDown" d="M20,20c0,0,12.8,6.6,50,6.6s50-6.6,50-6.6v50v50c0,0-12.8,18.3-50,18.3S20,120,20,120V70V20z"/>
|
||||
<path id="bigUp" d="M120,120c0,0-12.8-6.6-50-6.6S20,120,20,120V70V20c0,0,12.8-18.3,50-18.3S120,20,120,20v50V120z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||
<script src="assets/js/MorphSVGPlugin.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
// Default values ============
|
||||
var settings = {
|
||||
"options": {
|
||||
"pauseTime": "0",
|
||||
"inbetweenPauseTime": "0"
|
||||
},
|
||||
"colors": {
|
||||
"iconBoxColor": "rgba(0, 0, 0, 1)",
|
||||
"textBoxColor": "rgba(255, 255, 255, 1)",
|
||||
"iconColor": "rgba(255, 255, 255, 1)",
|
||||
"fontColor": "rgba(0, 0, 0, 1)"
|
||||
},
|
||||
"fonts": {
|
||||
"primaryFont": "Montserrat",
|
||||
"fontWeight": "400",
|
||||
"fontSize": "56",
|
||||
"textYOffset": "20"
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<script src="settings-and-images/settings.js"></script>
|
||||
<script src="settings-and-images/dataValues.js"></script>
|
||||
|
||||
<script>
|
||||
console.clear();
|
||||
|
||||
// Appearence values ============
|
||||
|
||||
var badgeObject,
|
||||
imageLoaded = false;
|
||||
|
||||
var canvas,
|
||||
canvasWidth = 120,
|
||||
canvasHeight,
|
||||
ctx;
|
||||
|
||||
for (var i = 0; i < values.values.length ; i++) {
|
||||
$("#nameHolder").append('<span class="name">' + values.values[i] + '</span>');
|
||||
}
|
||||
|
||||
var boxTime = .4;
|
||||
|
||||
var tl = new TimelineMax({repeat: -1});
|
||||
tl.timeScale(1);
|
||||
var square = document.getElementById("square");
|
||||
|
||||
// Get and set widths
|
||||
var nameHolderW,
|
||||
fullWidth;
|
||||
|
||||
function animate(){
|
||||
tl.to("body", 0, {opacity: 1, delay: .3});
|
||||
// // fade in the box
|
||||
tl.fromTo("#iconBox", .6, {opacity: 0}, {opacity:1});
|
||||
|
||||
// // move right and left
|
||||
tl.to("#canvasHolder", .1, {x:"-=20"})
|
||||
tl.to(square, .2, {morphSVG:"#bigLeft"}, "-=.1")
|
||||
tl.to("#iconBox", .2, {x:"-=" + nameHolderW}, "-=.2")
|
||||
|
||||
tl.to("#canvasHolder", .1, {x:"+=40"})
|
||||
tl.to(square, .2, {morphSVG:"#bigRight"}, "-=.1")
|
||||
tl.to("#iconBox", .3, {x: 30}, "-=.2")
|
||||
tl.from("#nameHolder", .1, {opacity: 0, scaleX: 0, transformOrigin: "left center"}, "-=.2")
|
||||
|
||||
tl.to("#canvasHolder", .1, {x:"-=20"})
|
||||
tl.to(square, .2, {morphSVG:"#littleLeft"}, "-=.1")
|
||||
tl.to("#iconBox", .2, {x:"-=30"}, "-=.2")
|
||||
|
||||
tl.to(square, .2, {morphSVG:"#square"})
|
||||
|
||||
// Move Up and Down
|
||||
for (var i = 0; i < values.values.length -1 ; i++) {
|
||||
tl.to("#canvasHolder", .1, {y:"-=20", delay: settings.options.pauseTime})
|
||||
tl.to(square, .2, {morphSVG:"#bigUp"}, "-=.1")
|
||||
tl.to("#iconBox", .2, {y:"-=20"}, "-=.2")
|
||||
|
||||
tl.to("#canvasHolder", .1, {y:"+=35"})
|
||||
tl.to(square, .2, {morphSVG:"#bigDown"}, "-=.1")
|
||||
tl.to("#iconBox", .2, {y:"+=40"}, "-=.2")
|
||||
tl.to(".name", 0, {y:"-=100"}, "-=.1")
|
||||
tl.to("#canvas", 0, {y:"-=120"}, "-=.1")
|
||||
tl.to("#holder", .2, {y:"+=8"}, "-=.1")
|
||||
|
||||
tl.to("#holder", .2, {y:"-=8"}, "-=0")
|
||||
|
||||
|
||||
tl.to(square, .2, {morphSVG:"#square"}, "-=.1")
|
||||
tl.to("#iconBox", .2, {y:"-=20"}, "-=.2")
|
||||
tl.to("#canvasHolder", .1, {y:"-=15"}, "-=.2")
|
||||
}
|
||||
|
||||
tl.to("#canvasHolder", .1, {x:"+=10", delay: settings.options.pauseTime})
|
||||
tl.to(square, .2, {morphSVG:"#littleRight"},"-=.1")
|
||||
tl.to("#iconBox", .2, {x:"+=30"}, "-=.2")
|
||||
|
||||
tl.to("#canvasHolder", .1, {x:"-=20"})
|
||||
tl.to(square, .2, {morphSVG:"#bigLeft"}, "-=.1")
|
||||
tl.to("#iconBox", .3, {x:"-=" + fullWidth}, "-=.2")
|
||||
tl.to("#nameHolder", .2, {opacity: 0, scaleX: 0, transformOrigin: "left center"}, "-=.3")
|
||||
|
||||
tl.to("body", 0, {opacity: 0, delay: settings.options.inbetweenPauseTime});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Initialize Canvas and Bind Events for canvas ======================
|
||||
|
||||
function init() {
|
||||
canvas = document.getElementById("canvas");
|
||||
ctx = canvas.getContext("2d");
|
||||
} // end of init
|
||||
|
||||
function changeBadge() {
|
||||
imageURL = "settings-and-images/icon-sheet.png";
|
||||
|
||||
// Create image
|
||||
badgeObject = new Image();
|
||||
|
||||
// When image loads, draw it
|
||||
badgeObject.onload = function() {
|
||||
imageLoaded = true;
|
||||
draw();
|
||||
};
|
||||
|
||||
// Load it
|
||||
badgeObject.src = imageURL;
|
||||
}
|
||||
changeBadge();
|
||||
|
||||
// Draw Canvas Elements
|
||||
function draw() {
|
||||
canvasHeight = badgeObject.height;
|
||||
ctx.canvas.width = canvasWidth;
|
||||
ctx.canvas.height = canvasHeight;
|
||||
|
||||
ctx.fillStyle = settings.colors.iconColor;
|
||||
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
|
||||
ctx.globalCompositeOperation = "destination-atop";
|
||||
ctx.drawImage(badgeObject, 0, 0);
|
||||
}
|
||||
|
||||
if(settings.fonts.primaryFont==""){
|
||||
settings.fonts.primaryFont = "Montserrat";
|
||||
}
|
||||
|
||||
WebFont.load({
|
||||
google: {
|
||||
families: [settings.fonts.primaryFont + ": 100,200,300,400,500,600,700,800,900"]
|
||||
},
|
||||
active: function() {
|
||||
fontLoaded = true;
|
||||
if(imageLoaded) {
|
||||
$("#holder").css("font-family",settings.fonts.primaryFont);
|
||||
nameHolderW = $("#nameHolder").width() + 80;
|
||||
fullWidth = nameHolderW +240;
|
||||
$("#holder").width(nameHolderW);
|
||||
animate();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Launch on load
|
||||
window.onload = init();
|
||||
|
||||
// Set Appearence ======================
|
||||
|
||||
$("#svg").css("fill",settings.colors.iconBoxColor);
|
||||
$("#nameHolder").css("background",settings.colors.textBoxColor);
|
||||
$(".name").css("color",settings.colors.fontColor);
|
||||
$(".name").css("font-size",settings.fonts.fontSize +"px");
|
||||
$(".name").css("top",settings.fonts.textYOffset +"px");
|
||||
$(".name").css("font-weight",settings.fonts.fontWeight);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
220
_right-social-media-popup-v2.html
Normal file
220
_right-social-media-popup-v2.html
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Social Media Popup</title>
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="socialHolder">
|
||||
<div id="holder">
|
||||
<div id="nameHolder">
|
||||
</div>
|
||||
<div id="iconBox">
|
||||
<div id="canvasHolder">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<div id="icons">
|
||||
|
||||
</div>
|
||||
<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 140 140" style="enable-background:new 0 0 140 140;" xml:space="preserve">
|
||||
<path id="square" d="M120,120H70H20V70V20h50h50v50V120z"/>
|
||||
<path id="littleLeft" d="M120,20c0,0-6.5,19-6.5,50s6.5,50,6.5,50H70H20c0,0-5.8-19-5.8-50S20,20,20,20h50H120z"/>
|
||||
<path id="littleRight" d="M20,120c0,0,6.5-19,6.5-50S20,20,20,20h50h50c0,0,5.8,19,5.8,50s-5.8,50-5.8,50H70H20z"/>
|
||||
<path id="bigRight" d="M20,120c0,0,6.6-13.1,6.6-50.2S20,20,20,20h50h50c0,0,17.9,12.7,17.9,49.8S120,120,120,120H70H20z"/>
|
||||
<path id="bigLeft" d="M120,20c0,0-6.6,13.1-6.6,50.2S120,120,120,120H70H20c0,0-17.9-12.7-17.9-49.8S20,20,20,20h50H120z"/>
|
||||
<path id="littleUp" d="M120,120c0,0-19-6.6-50-6.6S20,120,20,120V70V20c0,0,19-6.5,50-6.5s50,6.5,50,6.5v50V120z"/>
|
||||
<path id="bigDown" d="M20,20c0,0,12.8,6.6,50,6.6s50-6.6,50-6.6v50v50c0,0-12.8,18.3-50,18.3S20,120,20,120V70V20z"/>
|
||||
<path id="bigUp" d="M120,120c0,0-12.8-6.6-50-6.6S20,120,20,120V70V20c0,0,12.8-18.3,50-18.3S120,20,120,20v50V120z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||
<script src="assets/js/MorphSVGPlugin.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
// Default values ============
|
||||
var settings = {
|
||||
"options": {
|
||||
"pauseTime": "0",
|
||||
"inbetweenPauseTime": "0"
|
||||
},
|
||||
"colors": {
|
||||
"iconBoxColor": "rgba(0, 0, 0, 1)",
|
||||
"textBoxColor": "rgba(255, 255, 255, 1)",
|
||||
"iconColor": "rgba(255, 255, 255, 1)",
|
||||
"fontColor": "rgba(0, 0, 0, 1)"
|
||||
},
|
||||
"fonts": {
|
||||
"primaryFont": "Montserrat",
|
||||
"fontWeight": "400",
|
||||
"fontSize": "56",
|
||||
"textYOffset": "20"
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<script src="settings-and-images/settings.js"></script>
|
||||
<script src="settings-and-images/dataValues.js"></script>
|
||||
|
||||
<script>
|
||||
console.clear();
|
||||
|
||||
// Appearence values ============
|
||||
|
||||
var badgeObject,
|
||||
imageLoaded = false;
|
||||
|
||||
var canvas,
|
||||
canvasWidth = 120,
|
||||
canvasHeight,
|
||||
ctx;
|
||||
|
||||
for (var i = 0; i < values.values.length ; i++) {
|
||||
$("#nameHolder").append('<span class="name">' + values.values[i] + '</span>');
|
||||
}
|
||||
|
||||
var boxTime = .4;
|
||||
|
||||
var tl = new TimelineMax({repeat: -1});
|
||||
tl.timeScale(1);
|
||||
var square = document.getElementById("square");
|
||||
|
||||
// Get and set widths
|
||||
var nameHolderW,
|
||||
fullWidth;
|
||||
|
||||
function animate(){
|
||||
tl.to("body", 0, {opacity: 1, delay: .3});
|
||||
// // fade in the box
|
||||
tl.fromTo("#iconBox", .6, {opacity: 0}, {opacity:1});
|
||||
|
||||
// // move right and left
|
||||
tl.to("#canvasHolder", .1, {x:"+=20"})
|
||||
tl.to(square, .2, {morphSVG:"#bigRight"}, "-=.1")
|
||||
tl.to("#iconBox", .2, {x:"+=" + nameHolderW}, "-=.2")
|
||||
|
||||
tl.to("#canvasHolder", .1, {x:"-=40"})
|
||||
tl.to(square, .2, {morphSVG:"#bigLeft"}, "-=.1")
|
||||
tl.to("#iconBox", .3, {x: -30}, "-=.2")
|
||||
tl.from("#nameHolder", .1, {opacity: 0, scaleX: 0, transformOrigin: "right center"}, "-=.2")
|
||||
|
||||
tl.to("#canvasHolder", .1, {x:"+=20"})
|
||||
tl.to(square, .2, {morphSVG:"#littleRight"}, "-=.1")
|
||||
tl.to("#iconBox", .2, {x:"+=30"}, "-=.2")
|
||||
|
||||
tl.to(square, .2, {morphSVG:"#square"})
|
||||
|
||||
// Move Up and Down
|
||||
for (var i = 0; i < values.values.length -1 ; i++) {
|
||||
tl.to("#canvasHolder", .1, {y:"-=20", delay: settings.options.pauseTime})
|
||||
tl.to(square, .2, {morphSVG:"#bigUp"}, "-=.1")
|
||||
tl.to("#iconBox", .2, {y:"-=20"}, "-=.2")
|
||||
|
||||
tl.to("#canvasHolder", .1, {y:"+=35"})
|
||||
tl.to(square, .2, {morphSVG:"#bigDown"}, "-=.1")
|
||||
tl.to("#iconBox", .2, {y:"+=40"}, "-=.2")
|
||||
tl.to(".name", 0, {y:"-=100"}, "-=.1")
|
||||
tl.to("#canvas", 0, {y:"-=120"}, "-=.1")
|
||||
tl.to("#holder", .2, {y:"+=8"}, "-=.1")
|
||||
|
||||
tl.to("#holder", .2, {y:"-=8"}, "-=0")
|
||||
|
||||
|
||||
tl.to(square, .2, {morphSVG:"#square"}, "-=.1")
|
||||
tl.to("#iconBox", .2, {y:"-=20"}, "-=.2")
|
||||
tl.to("#canvasHolder", .1, {y:"-=15"}, "-=.2")
|
||||
}
|
||||
|
||||
tl.to("#canvasHolder", .1, {x:"-=10", delay: settings.options.pauseTime})
|
||||
tl.to(square, .2, {morphSVG:"#littleLeft"},"-=.1")
|
||||
tl.to("#iconBox", .2, {x:"-=30"}, "-=.2")
|
||||
|
||||
tl.to("#canvasHolder", .1, {x:"+=20"})
|
||||
tl.to(square, .2, {morphSVG:"#bigRight"}, "-=.1")
|
||||
tl.to("#iconBox", .3, {x:"+=" + fullWidth}, "-=.2")
|
||||
tl.to("#nameHolder", .2, {opacity: 0, scaleX: 0, transformOrigin: "right center"}, "-=.3")
|
||||
|
||||
tl.to("body", 0, {opacity: 0, delay: settings.options.inbetweenPauseTime});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Initialize Canvas and Bind Events for canvas ======================
|
||||
|
||||
function init() {
|
||||
canvas = document.getElementById("canvas");
|
||||
ctx = canvas.getContext("2d");
|
||||
} // end of init
|
||||
|
||||
function changeBadge() {
|
||||
imageURL = "settings-and-images/icon-sheet.png";
|
||||
|
||||
// Create image
|
||||
badgeObject = new Image();
|
||||
|
||||
// When image loads, draw it
|
||||
badgeObject.onload = function() {
|
||||
imageLoaded = true;
|
||||
draw();
|
||||
};
|
||||
|
||||
// Load it
|
||||
badgeObject.src = imageURL;
|
||||
}
|
||||
changeBadge();
|
||||
|
||||
// Draw Canvas Elements
|
||||
function draw() {
|
||||
canvasHeight = badgeObject.height;
|
||||
ctx.canvas.width = canvasWidth;
|
||||
ctx.canvas.height = canvasHeight;
|
||||
|
||||
ctx.fillStyle = settings.colors.iconColor;
|
||||
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
|
||||
ctx.globalCompositeOperation = "destination-atop";
|
||||
ctx.drawImage(badgeObject, 0, 0);
|
||||
}
|
||||
|
||||
if(settings.fonts.primaryFont==""){
|
||||
settings.fonts.primaryFont = "Montserrat";
|
||||
}
|
||||
|
||||
WebFont.load({
|
||||
google: {
|
||||
families: [settings.fonts.primaryFont + ": 100,200,300,400,500,600,700,800,900"]
|
||||
},
|
||||
active: function() {
|
||||
fontLoaded = true;
|
||||
if(imageLoaded) {
|
||||
$("#holder").css("font-family",settings.fonts.primaryFont);
|
||||
nameHolderW = $("#nameHolder").width() + 80;
|
||||
fullWidth = nameHolderW +240;
|
||||
$("#holder").width(nameHolderW);
|
||||
animate();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Launch on load
|
||||
window.onload = init();
|
||||
|
||||
// Set Appearence ======================
|
||||
|
||||
$("#svg").css("fill",settings.colors.iconBoxColor);
|
||||
$("#nameHolder").css("background",settings.colors.textBoxColor);
|
||||
$(".name").css("color",settings.colors.fontColor);
|
||||
$(".name").css("font-size",settings.fonts.fontSize +"px");
|
||||
$(".name").css("top",settings.fonts.textYOffset +"px");
|
||||
$(".name").css("font-weight",settings.fonts.fontWeight);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
75
assets/css/style-left.css
Normal file
75
assets/css/style-left.css
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
html,body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
body{
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#socialHolder {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 60px;
|
||||
}
|
||||
|
||||
#holder {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
font-size: 40px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#nameHolder{
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
padding: 0 40px;
|
||||
max-height: 100px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.name {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#iconBox {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: -120px;
|
||||
}
|
||||
|
||||
#iconBox svg {
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
width: 140px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#bigLeft, #littleLeft, #littleRight, #bigRight, #littleUp, #bigDown, #bigUp {
|
||||
visibility:hidden;
|
||||
}
|
||||
#canvasHolder {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 999;
|
||||
transform: scale(.5);
|
||||
}
|
||||
#canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
75
assets/css/style.css
Normal file
75
assets/css/style.css
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
html,body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
body{
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#socialHolder {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 60px;
|
||||
}
|
||||
|
||||
#holder {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
font-size: 40px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#nameHolder{
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
padding: 0 40px;
|
||||
max-height: 100px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.name {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#iconBox {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: -120px;
|
||||
}
|
||||
|
||||
#iconBox svg {
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
width: 140px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#bigLeft, #littleLeft, #littleRight, #bigRight, #littleUp, #bigDown, #bigUp {
|
||||
visibility:hidden;
|
||||
}
|
||||
#canvasHolder {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 999;
|
||||
transform: scale(.5);
|
||||
}
|
||||
#canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
13
assets/js/MorphSVGPlugin.min.js
vendored
Normal file
13
assets/js/MorphSVGPlugin.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
settings-and-images/dataValues.js.txt
Normal file
1
settings-and-images/dataValues.js.txt
Normal file
|
|
@ -0,0 +1 @@
|
|||
var values = {"values":["/draconis.me","draconis","/draconis_me","Draconis#21223"]};
|
||||
BIN
settings-and-images/icon-sheet.png
Normal file
BIN
settings-and-images/icon-sheet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
18
settings-and-images/settings.js
Normal file
18
settings-and-images/settings.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
var settings = {
|
||||
"options": {
|
||||
"pauseTime": "6",
|
||||
"inbetweenPauseTime": "100"
|
||||
},
|
||||
"colors": {
|
||||
"iconBoxColor": "rgba(249,158,26)",
|
||||
"textBoxColor": "rgba(64,82,117)",
|
||||
"iconColor": "rgba(64,82,117)",
|
||||
"fontColor": "rgba(255,255,255)"
|
||||
},
|
||||
"fonts": {
|
||||
"primaryFont": "Inconsolata",
|
||||
"fontWeight": "400",
|
||||
"fontSize": "36",
|
||||
"textYOffset": "0"
|
||||
}
|
||||
};
|
||||
Loading…
Add table
Reference in a new issue