https://colyinc.com/wp-content/themes/lightning-child/assets/js/common.js

1// accordion.js
2$(function () {
3	$('.accordion dd').hide();
4	$('.accordion dt.opened').nextUntil('.accordion dt').show();
5	$('.accordion dt').click(function (e) {
6		$(this).toggleClass('opened');
7		$(this).nextUntil('.accordion dt').slideToggle('normal');
8	});
9
10});
11$(function () {
12	$('.toggle_switch').click(function (e) {
13		$(this).toggleClass('opened');
14	});
15});
16// Page Top Fade
17$(function () {
18	var topBtn = $('#pageTop');
19	topBtn.hide();
20	$(window).scroll(function () {
21		if ($(this).scrollTop() > 108) {
22			topBtn.fadeIn();
23		} else {
24			topBtn.fadeOut();
25		}
26	});
27	topBtn.click(function () {
28		$('body,html').animate({
29			scrollTop: 0
30		}, 1000);
31		return false;
32	});
33});
34$(function () {
35	$('#NavWrap a[href]').on('click', function (event) {
36		$('#switch').prop('checked', false);
37	});
38});
39$(document).ready(function () {
40	$(function () {
41		$('.action').on('inview', function (event, isInView, visiblePartX, visiblePartY) {
42			if (isInView) {
43				$(this).addClass('once');
44			} else{
45				// $(this).removeClass('once');
46			}
47		});
48	});
49});
50
51// inspired by "Layered animations with anime.js"
52// https://codepen.io/juliangarnier/pen/LMrddV
53// and it needs to change anime.js about dealing colors.
54// please check my github. 
55// https://github.com/keiyashi/animejs_for_marbleGradient
56
57document.addEventListener("DOMContentLoaded", (event) => {
58    layeredAnimation();
59});
60
61function layeredAnimation(){
62    var layeredAnimationEl = document.querySelector('.grad-board');
63    var colorPints = layeredAnimationEl.querySelectorAll('.marble-ball');
64
65    for (var i = 0; i < colorPints.length; i++) {
66        animateShape(colorPints[i]);
67    }
68}
69
70function animateShape(el) {
71    var easings = ['easeInOutQuad', 'easeInOutCirc', 'easeInOutSine'];
72    var animation = anime.timeline({
73        targets: el,
74        duration: function() { return anime.random(3000, 4000); },
75        easing: function() { return easings[anime.random(0, easings.length - 1)]; },
76        complete: function(anim) { animateShape(anim.animatables[0].target); },
77    })
78    .add({
79        translateX: anime.random(-500, 500),
80        translateY: anime.random(-400, 400),
81        scale: anime.random(100, 200) / 100,
82        background: makeColorContext(),
83    }, 0);
84}
85
86function makeColorContext(){
87    var angleBand = anime.random(-60, 60);
88    var hue   = 156 + angleBand;
89    var saturation = anime.random(25, 50);
90    var lightness = anime.random(75, 90);
91    var colorText = 'hsl(' + Math.round(hue) + ', ' + saturation + '%, ' + lightness + '%)';
92    
93    var outputContext = 'radial-gradient(' + anime.hsl2Rgb(colorText) + ' 0px, transparent 50%)';
94    return outputContext;
95}
96
97//
98
99document.addEventListener('DOMContentLoaded', () => {
100  const stalker = document.getElementById('mouse-stalker');
101  const links = document.querySelectorAll('a');
102
103  // マウスの位置を追跡
104  document.addEventListener('mousemove', (e) => {
105    stalker.style.transform = `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%)`;
106  });
107
108  // aタグにマウスが重なったときの処理
109  links.forEach(link => {
110    link.addEventListener('mouseenter', () => {
111      stalker.classList.add('is-active');
112      // stalker.innerHTML = 'Click';
113    });
114
115    link.addEventListener('mouseleave', () => {
116      stalker.classList.remove('is-active');
117      stalker.innerHTML = '';
118    });
119  });
120});
121