WEBデザインにおけるアニメーションの効果は計り知れません。STUDIOのカスタムコードを駆使することで、単なる情報の提示から一歩踏み出し、訪問者に記憶に残る体験を提供することができます。今回は、WEBサイトのタイトルや見出しに活用できるようなユニークなアニメーションの作成方法をご紹介します。
カスタムコードとは？
STUDIOのカスタムコード機能についての使い方等は、以前の記事でご紹介しています。もしカスタムコード機能を初めて知ったという方は下記の記事もご覧ください。
カスタムコード例
ここからは、STUDIOのカスタムコード機能を活用して作成した例の一部をご紹介します。
キーボード入力アニメーション
一つ目にご紹介するアニメーションは、キーボードで入力したかのように文字が表示されるというものです。WEBサイトのタイトルや見出しの文字などで活用することで、印象に残るデザインになります。
HTML、CSS、JavaScriptはこちら
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テキストアニメーション</title>
<style>
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.animated-text {
font-size: 24px;
white-space: nowrap;
overflow: hidden;
border-right: 2px solid black;
width: 0;
animation: typing 5s steps(30) 1s forwards, blink 1s step-end infinite;
}
@keyframes typing {
from { width: 0; }
to { width: 17em; }
}
@keyframes blink {
from, to { border-color: transparent; }
50% { border-color: black; }
}
</style>
</head>
<body>
<div class="animated-text">Welcome to our website</div>
</body>
</html>ネオングリッチアニメーション
二つ目にご紹介するのは、ネオンカラーのグリッチ風アニメーションです。背景に暗めに設定した夜の街の画像を使うことでネオンカラーをより際立たせることができるかもしれません。
HTML、CSS、JavaScriptはこちら
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Neon Glitch Text Effect Inside Circle</title>
<style>
body, html {
margin: 0;
height: 100vh;
overflow: hidden;
background: transparent; /* 背景色を透明に */
display: flex;
justify-content: center;
align-items: center;
font-family: 'Arial', sans-serif;
}
.neon-circle {
width: 250px; /* テキストを収めるためのサイズ調整 */
height: 250px; /* テキストを収めるためのサイズ調整 */
border-radius: 50%;
position: relative;
background-color: transparent; /* 円の背景色を透明に */
box-shadow:
0 0 5px #ff1493,
0 0 10px #ff1493,
0 0 15px #ff1493;
animation: neonFlicker 1.5s infinite alternate;
}
.neon-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.5rem; /* テキストサイズを円の大きさに合わせて調整 */
color: #ff1493;
text-shadow:
0 0 5px #ff1493,
0 0 10px #ff1493,
0 0 15px #ff1493;
animation: neonTextFlicker 1.5s infinite alternate;
white-space: nowrap;
user-select: none; /* テキストの選択を防止 */
}
@keyframes neonFlicker {
0%, 19%, 21%, 23%, 25%, 27%, 29%, 31%, 33%, 35%, 37%, 39%, 100% {
box-shadow:
0 0 5px #ff1493,
0 0 10px #ff1493,
0 0 15px #ff1493;
}
20%, 22%, 24%, 26%, 28%, 30%, 32%, 34%, 36%, 38% {
box-shadow: none;
}
}
@keyframes neonTextFlicker {
0%, 19%, 21%, 100% {
color: #ff1493;
text-shadow:
0 0 5px #ff1493,
0 0 10px #ff1493,
0 0 15px #ff1493;
}
20%, 22% {
color: #0e0e0e;
text-shadow: none;
}
}
</style>
</head>
<body>
<div class="neon-circle">
<div class="neon-text">WEBSITE TITLE</div>
</div>
</body>
</html>文字の色が、降ってくるボールの色に変化
三つ目にご紹介するアニメーションは、画面上部から降ってくるカラフルなボールが文字に当たった時、文字の色がボールの色に変化するというものです。ランダムに降ってくるボールにより文字の色が常に変わり続けます。
HTML、CSS、JavaScriptはこちら
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Circle Rain Animation</title>
<style>
body, html {
margin: 0;
height: 100%;
background: black;
overflow: hidden;
font-family: monospace;
display: flex;
justify-content: center;
align-items: center;
}
.circle {
position: absolute;
border-radius: 50%;
opacity: 0.5;
filter: blur(2px);
animation: fall linear, fadeOut linear;
}
@keyframes fall {
0% { transform: translateY(-100vh); }
100% { transform: translateY(100vh); }
}
@keyframes fadeOut {
0% { opacity: 0.5; }
50% { opacity: 0.5; } /* Start fading out earlier */
100% { opacity: 0; }
}
#welcome {
font-size: 8vw;
color: white;
transition: color 1s;
}
</style>
</head>
<body>
<div id="welcome">WELCOME</div>
<script>
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function createCircle() {
const circle = document.createElement('div');
circle.classList.add('circle');
const size = Math.random() * 30 + 20;
circle.style.width = `${size}px`;
circle.style.height = `${size}px`;
circle.style.left = `${Math.random() * window.innerWidth}px`;
circle.style.background = getRandomColor();
circle.style.animationDuration = `${Math.random() * 10 + 20}s`;
document.body.appendChild(circle);
setTimeout(() => circle.remove(), 20000); // Remove after 5 seconds
return circle;
}
function updateTextColor(circle, circleColor) {
const welcome = document.getElementById('welcome');
const circleRect = circle.getBoundingClientRect();
const welcomeRect = welcome.getBoundingClientRect();
const collisionPoint = (circleRect.left + circleRect.right) / 2 - welcomeRect.left;
const charIndex = Math.floor(collisionPoint / (welcomeRect.width / welcome.textContent.length));
let newText = '';
for (let i = 0; i < welcome.textContent.length; i++) {
if (i === charIndex) {
newText += `<span style="color: ${circleColor};">${welcome.textContent[i]}</span>`;
} else {
newText += welcome.textContent[i];
}
}
welcome.innerHTML = newText;
circle.remove(); // Remove circle immediately upon collision
}
function checkCollision() {
const welcome = document.getElementById('welcome');
const rect1 = welcome.getBoundingClientRect();
document.querySelectorAll('.circle').forEach(circle => {
const rect2 = circle.getBoundingClientRect();
if (rect1.right >= rect2.left && rect1.left <= rect2.right &&
rect1.bottom >= rect2.top && rect1.top <= rect2.bottom) {
const circleColor = circle.style.background;
updateTextColor(circle, circleColor);
}
});
}
setInterval(() => {
createCircle().addEventListener('animationiteration', checkCollision);
}, 1200);
setInterval(checkCollision, 100);
</script>
</body>
</html>ある映画風の背景
最後にご紹介するのは、とある映画風の背景っぽいアニメーションです。緑色の数字がランダムに表示されて消えてを繰り返します。デジタル空間っぽい雰囲気を演出したい場合の一つの例になります。
HTML、CSS、JavaScriptはこちら
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ある映画スタイルアニメーション</title>
<style>
body, html {
height: 100%;
margin: 0;
background: black;
overflow: hidden;
color: green;
font-family: monospace;
display: flex;
align-items: center;
justify-content: center;
}
.matrix {
position: relative;
font-size: 10px;
transform-style: preserve-3d;
}
.number {
position: absolute;
opacity: 0;
animation: fall 5s infinite linear;
}
@keyframes fall {
0% { transform: translateZ(0); opacity: 1;}
100% { transform: translateZ(600px); opacity: 0;}
}
</style>
</head>
<body>
<div class="matrix" id="matrix"></div>
<script>
const matrixElement = document.getElementById('matrix');
const chars = ['0', '1', '0', '1', '0', '1', '0', '1', '0', '1'];
for (let i = 0; i < 300; i++) {
let div = document.createElement('div');
div.classList.add('number');
div.textContent = chars[Math.floor(Math.random() * chars.length)];
div.style.left = 50 - Math.random() * 100 + 'vw';
div.style.top = 50 - Math.random() * 100 + 'vh';
div.style.animationDelay = Math.random() * 5 + 's';
div.style.animationDuration = Math.random() * 5 + 5 + 's';
matrixElement.appendChild(div);
}
</script>
</body>
</html>【宣伝】ココナラで出品中のサービス紹介
STUDIOのカスタムコード機能を活用し、あなたのウェブサイトに独創性を加えませんか？私のココナラサービスでは、完全なウェブサイト制作からカスタムコードのみの対応まで、幅広くご提供しています。あなたのビジョンを具現化し、ウェブサイトに個性を加えるためのカスタムソリューションを提供します。詳細はココナラのプロフィールページをご覧ください。
今回ご紹介するカスタムコードを含めた過去に作成したデザインコンポーネントは、下記のWEBサイトにまとめてあります。ご興味ございましたらご覧ください！
まとめ
この記事では、STUDIOのカスタムコード機能を用いたウェブデザインの革新性に焦点を当て、ユーザーの体験を豊かにする独創的なアニメーションの実装方法を解説しました。これにより、ウェブサイトに深みと動きを加え、訪問者の関心を引きつけることができます。
コメント