Interactive Text
Hello, Interactive Text!
Interactive Text Code :
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Interactive Text</title>
<style>
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
.container {
width: 500px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#text-box {
font-size: 2em;
color: #333;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
text-align: center;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.controls {
margin-top: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
select, input[type=”color”], input[type=”number”] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box; /* Important to include padding and border in the element’s total width and height */
}
#gradient-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
mix-blend-mode: multiply; /* Or overlay, screen, etc. */
pointer-events: none; /* Allows the text to be selectable */
}
.animated-text {
animation: colorChange 5s linear infinite;
}
@keyframes colorChange {
0% { color: #333; }
25% { color: #007bff; }
50% { color: #28a745; }
75% { color: #dc3545; }
100% { color: #333; }
}
.gradient-text {
background: linear-gradient(to right, #30CFD0, #330867);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Font options */
/* Add more font options as needed */
</style>
</head>
<body>
<div class=”container”>
<div id=”text-box”>
Hello, Interactive Text!
</div>
<div class=”controls”>
<label for=”color-picker”>Text Color:</label>
<input type=”color” id=”color-picker” value=”#333333″>
<label for=”font-size”>Font Size (px):</label>
<input type=”number” id=”font-size” value=”32″>
<label for=”text-shadow”>Text Shadow:</label>
<input type=”text” id=”text-shadow” value=”2px 2px 4px rgba(0, 0, 0, 0.2)”>
<label for=”font-family”>Font Family:</label>
<select id=”font-family”>
<option value=”Arial”>Arial</option>
<option value=”Helvetica”>Helvetica</option>
<option value=”Times New Roman”>Times New Roman</option>
<option value=”Georgia”>Georgia</option>
<option value=”Courier New”>Courier New</option>
<option value=”Verdana”>Verdana</option>
<option value=”Impact”>Impact</option>
<option value=”Comic Sans MS”>Comic Sans MS</option>
<!– Add at least 42 more font options here –>
<option value=”serif”>Serif</option>
<option value=”sans-serif”>Sans-serif</option>
<option value=”monospace”>Monospace</option>
<option value=”cursive”>Cursive</option>
<option value=”fantasy”>Fantasy</option>
<option value=”system-ui”>System-ui</option>
<option value=”Roboto”>Roboto</option>
<option value=”Oswald”>Oswald</option>
<option value=”Lato”>Lato</option>
<option value=”Slabo 27px”>Slabo 27px</option>
<option value=”Montserrat”>Montserrat</option>
<option value=”Open Sans”>Open Sans</option>
<option value=”Source Sans Pro”>Source Sans Pro</option>
<option value=”Raleway”>Raleway</option>
<option value=”Poppins”>Poppins</option>
<option value=”Lora”>Lora</option>
<option value=”Ubuntu”>Ubuntu</option>
<option value=”PT Sans”>PT Sans</option>
<option value=”Merriweather”>Merriweather</option>
<option value=”Nunito”>Nunito</option>
<option value=”Playfair Display”>Playfair Display</option>
<option value=”Roboto Condensed”>Roboto Condensed</option>
<option value=”Arvo”>Arvo</option>
<option value=”Bitter”>Bitter</option>
<option value=”Dosis”>Dosis</option>
<option value=”Lobster”>Lobster</option>
<option value=”Cabin”>Cabin</option>
<option value=”Josefin Sans”>Josefin Sans</option>
<option value=”Varela Round”>Varela Round</option>
<option value=”Pacifico”>Pacifico</option>
<option value=”Shadows Into Light”>Shadows Into Light</option>
<option value=”Fira Sans”>Fira Sans</option>
<option value=”Bree Serif”>Bree Serif</option>
<option value=”Exo 2″>Exo 2</option>
<option value=”Playfair Display SC”>Playfair Display SC</option>
<option value=”Yanone Kaffeesatz”>Yanone Kaffeesatz</option>
<option value=”Abel”>Abel</option>
<option value=”Mukta”>Mukta</option>
</select>
<label for=”text-effect”>Text Effect:</label>
<select id=”text-effect”>
<option value=”none”>None</option>
<option value=”animated”>Animated Color</option>
<option value=”gradient”>Gradient</option>
</select>
<label for=”gradient-colors”>Gradient Colors (comma-separated):</label>
<input type=”text” id=”gradient-colors” value=”#30CFD0, #330867″ disabled>
<label for=”animation-type”>Animation Type:</label>
<select id=”animation-type”>
<option value=”colorChange”>Color Change</option>
<option value=”slide”>Slide</option>
<option value=”fade”>Fade</option>
</select>
</div>
</div>
<script>
const textBox = document.getElementById(‘text-box’);
const colorPicker = document.getElementById(‘color-picker’);
const fontSizeInput = document.getElementById(‘font-size’);
const textShadowInput = document.getElementById(‘text-shadow’);
const fontFamilySelect = document.getElementById(‘font-family’);
const textEffectSelect = document.getElementById(‘text-effect’);
const gradientColorsInput = document.getElementById(‘gradient-colors’);
const animationTypeSelect = document.getElementById(‘animation-type’);
colorPicker.addEventListener(‘input’, function() {
textBox.style.color = this.value;
});
fontSizeInput.addEventListener(‘input’, function() {
textBox.style.fontSize = this.value + ‘px’;
});
textShadowInput.addEventListener(‘input’, function() {
textBox.style.textShadow = this.value;
});
fontFamilySelect.addEventListener(‘change’, function() {
textBox.style.fontFamily = this.value;
});
textEffectSelect.addEventListener(‘change’, function() {
textBox.classList.remove(‘animated-text’, ‘gradient-text’); // Remove existing classes
gradientColorsInput.disabled = true; // Disable gradient colors by default
if (this.value === ‘animated’) {
textBox.classList.add(‘animated-text’);
} else if (this.value === ‘gradient’) {
textBox.classList.add(‘gradient-text’);
gradientColorsInput.disabled = false; // Enable if gradient is selected
updateGradient();
}
});
gradientColorsInput.addEventListener(‘input’, updateGradient);
function updateGradient() {
const colors = gradientColorsInput.value.split(‘,’).map(color => color.trim());
textBox.style.background = `linear-gradient(to right, ${colors.join(‘, ‘)})`;
textBox.style.webkitBackgroundClip = “text”;
textBox.style.webkitTextFillColor = “transparent”;
}
animationTypeSelect.addEventListener(‘change’, function() {
textBox.style.animationName = this.value; // Change animation type
});
</script>
</body>
</html>