head
<![CDATA[<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
<style>
CSS
</style>]]>
CSS
<![CDATA[/*
Template T-12 Melancholy
By Jumble Fun
Site URL https://alicex.jp/kenz/
*/
* {
font-size:13px;
font-family:"Libre-Baskerville",Sans-Serif;
box-sizing:border-box;
margin:0;
padding:0;
}
body {
color:silver;
background:#222;
scroll-behavior:smooth;
}
a {
color:silver;
text-decoration:none;
}
header {
background-color:black;
box-shadow:0 15px 40px 0 #666;
position:relative;
height:200px;
overflow-x:hidden;
}
header h1 {
font-size:40px;
color:silver;
position:relative;
text-align:center;
margin-top:70px;
}
header h1 i {
font-size:55px;
color:white;
position:relative;
top:-15px;
left:10px;
}
header h1 i:last-child {
font-size:65px;
color:#84f;
top:-10px;
left:0;
}
#vortex {
width:100%;
height: 100px;
position:absolute;
top:50px;
left:50%;
z-index:0;
transform:translateX(-50%);
}
#vortex img {
width:100px;
height:75px;
opacity:0.7;
object-fit:cover;
object-position:50% 50%;
}
main {
padding:10px;
}
div.switch {
position:relative;
text-align:right;
}
div.switch button {
border:solid 1px gray;
color:gray;
background-color:black;
width:28px;
height:28px;
transition:0.4s;
}
div.switch button:hover {
border:solid 1px silver;
color:silver;
}
div.switch button i {
font-size:16px;
vertical-align:middle;
}
div.container {
line-height:180%;
margin:0 10px 20px;
white-space:pre-line;
}
div.announce a:nth-child(even) {
margin-left:10px;
}]]>
JS
<![CDATA[/*
jQuery Vortex 1.0.3
by Luca Fagioli - Montezuma Interactive
http://www.apache.org/licenses/
LICENSE-2.0
*/
(function($) {
var Vortex = function(element, options) {
var kids;
var animationIntervalId = 0;
var isAnimating = false;
var vortex = $(element);
var positions = [];
var kidsPositionIndexes = [];
var vortexInstance = this;
var stepCounter = -1;
var initialPositions = [];
var reset = false;
var originalKidsSize = [];
var speedDelay = 0;
var children = [];
var positionsRadiants = [];
var settings = $.extend({
speed : 50,
clockwise : true,
manualAdvance : false,
beforeAnimation : null,
afterAnimation : null,
easing : 'end',
deepFactor : 0.5,
initialPosition : 90
}, options || {});
var vortexHalfHeight = vortex.height() / 2;
var vortexHalfWidth = vortex.width() / 2;
kids = vortex.children().css("position", "absolute");
var positionsCount = kids.length * 12;
var stepLength = 1;
var radiantFactor = (positionsCount / 2) / Math.PI;
for ( var i = 0; i < positionsCount; i++) {
positionsRadiants[i] = (Math.PI * 2) * i / positionsCount;
}
var offsetPosition = 0;
switch (settings.initialPosition) {
case 90:
offsetPosition = Math.PI * 1.5;
break;
case 0:
offsetPosition = 0;
break;
case 180:
offsetPosition = Math.PI;
break;
case 270:
offsetPosition = Math.PI * 0.5;
break;
}
kids
.each(function(i) {
originalKidsSize[i] = {
width : $(this).width(),
height : $(this).height()
};
var kidHalfHeight = $(this).height() / 2;
var kidHalfWidth = $(this).width() / 2;
var kidPositions = [];
for ( var j = 0; j < positionsCount; j += 1) {
kidPositions.push({
top : ((1 + Math.sin(offsetPosition
+ (j / radiantFactor))) * vortexHalfHeight)
- kidHalfHeight,
left : vortexHalfWidth
* (1 + Math.cos(offsetPosition
+ (j / radiantFactor)))
- kidHalfWidth
});
}
var positionIndex = i
* Math.round(positionsCount / kids.length);
kidsPositionIndexes[i] = positionIndex;
var radiantVariable = (Math.sin(offsetPosition
+ positionsRadiants[positionIndex]) * settings.deepFactor);
var resizeFactor = (1 + radiantVariable);
var newWidth = originalKidsSize[i].width * resizeFactor;
var newHeight = originalKidsSize[i].height * resizeFactor;
$(this)
.css(
{
"width" : newWidth,
"height" : newHeight,
"top" : kidPositions[positionIndex].top
- ((newHeight - (originalKidsSize[i].height)) / 2),
"left" : kidPositions[positionIndex].left
- ((newWidth - (originalKidsSize[i].width)) / 2),
"z-index" : 200 + Math
.round(100 * (Math
.sin(offsetPosition
+ positionsRadiants[positionIndex])))
});
initialPositions[i] = positionIndex;
positions.push(kidPositions);
});
this.stop = function() {
clearInterval(animationIntervalId);
kids.stop();
setAnimating(false);
};
this.setClockwise = function(clockwise) {
settings.clockwise = clockwise;
if (isAnimating) {
this.start();
}
};
var setAnimating = function(animating) {
isAnimating = animating;
if (isAnimating === true) {
vortex.addClass("vortex-animating");
if (settings.beforeAnimation) {
if (settings.beforeAnimation.call() === false)
return false;
}
} else {
vortex.removeClass("vortex-animating");
if (settings.afterAnimation)
settings.afterAnimation.call(null, $(this));
}
};
this.isAnimating = function() {
return isAnimating;
};
this.reset = function() {
if (kidsPositionIndexes[0] == initialPositions[0])
return;
reset = true;
this.start();
};
this.start = function(repetitions) {
this.stop();
speedDelay = 0;
setAnimating(true);
var positionStep;
if (settings.clockwise === true) {
positionStep = +stepLength;
} else {
positionStep = -stepLength;
}
var startAnimation = function(kid, kidIndex) {
var kidPositions = positions[kidIndex];
var positionIndex = (kidsPositionIndexes[kidIndex] + positionStep);
if (positionIndex < 0)
positionIndex = positionsCount - Math.abs(positionStep);
if (positionIndex > positionsCount - 1)
positionIndex = 0;
var resizeFactor = (1 + Math.sin(offsetPosition
+ positionsRadiants[positionIndex])
* settings.deepFactor);
var newWidth = originalKidsSize[kidIndex].width * resizeFactor;
var newHeight = originalKidsSize[kidIndex].height
* resizeFactor;
kid
.animate(
{
"left" : kidPositions[positionIndex].left
- ((newWidth - (originalKidsSize[kidIndex].width)) / 2),
"top" : kidPositions[positionIndex].top
- ((newHeight - (originalKidsSize[kidIndex].height)) / 2),
"width" : newWidth,
"height" : newHeight,
"z-index" : 200 + Math
.round(100 * (Math
.sin(offsetPosition
+ positionsRadiants[positionIndex])))
},
{
duration: settings.speed + speedDelay,
easing: "linear",
queue: false,
complete: function() {
kidsPositionIndexes[kidIndex] = positionIndex;
if (kidIndex == kids.length - 1) {
stepCounter--;
if (stepCounter == 2) {
speedDelay = settings.speed * 2;
}
}
if (vortexInstance.isAnimating()) {
if (reset == false
|| initialPositions[kidIndex] != positionIndex) {
if (stepCounter == 0) {
vortexInstance.stop();
stepCounter = -1;
return;
}
startAnimation(kid, kidIndex);
} else {
if (kidIndex == kids.length - 1) {
vortexInstance.stop();
reset = false;
}
}
}
}
});
};
kids.each(function(i) {
startAnimation($(this), i);
});
};
this.setSpeed = function(speed) {
settings.speed = speed;
if (isAnimating) {
this.start();
}
};
if (!settings.manualAdvance) {
this.start();
}
this.step = function(steps) {
stepCounter = (steps * positionsCount / kids.length);
this.start();
return;
};
};
$.fn.vortex = function(options) {
return this.each(function() {
var element = $(this);
if (element.data('vortex'))
return;
var vortex = new Vortex(this, options);
element.data('vortex', vortex);
});
};
})(jQuery);
$(window).load(function() {
$('#vortex').vortex({
initialPosition: 10,
speed: 300,
deepFactor: 0.2
});
});]]>
body
<![CDATA[<div class="contain">
<header>
<h1><i>M</i>elan<i>c</i>holy</h1>
<div id="vortex">
<img src="../vortex.image-1.jpeg">
<img src="../vortex.image-2.jpeg">
<img src="../vortex.image-3.jpeg">
<img src="../vortex.image-4.jpeg">
<img src="../vortex.image-5.jpeg">
<img src="../vortex.image-6.jpeg">
<img src="../vortex.image-7.jpeg">
<img src="../vortex.image-8.jpeg">
</div>
</header>
<main>
<section class="announce">
<div class="switch">
<button type="button" id="vortex-start" onclick="$('#vortex').data('vortex').start();"><i class="fas fa-play"></i></button>
<button type="button" id="vortex-stop" onclick="$('#vortex').data('vortex').stop();"><i class="fas fa-pause"></i></button>
</div>
<div class="container announce">
<a href="/kenz/note/1/">更新履歴</a>
<a href="/kenz/note/1/13/">テンプレート</a>
<a href="/kenz/note/2/">編集雑録</a>
<a href="/kenz/note/2/11/">雑録</a>
</div>
</section>
</main>
</div>
<script>
JS
</script>]]>
