Comments (10)
g1eb
commented on June 12, 2024
Hi! That should be fairly easy since this is a very simple component to begin with.
That being said, I need to carve out some time to figure out the changes required for angular 10.
Is this something that could wait a week or two? Would you like to give it a try yourself?
from angular-text-animation.
blakazulu
commented on June 12, 2024
Thx for the quick reply.
I will try it, I will let u know if I'm up to the task.
from angular-text-animation.
blakazulu
commented on June 12, 2024
this is what i got so far:
@ViewChildren('styleDiv', {read: ElementRef}) children: QueryList<ElementRef>;
constructor(private renderer: Renderer2, private host: ElementRef) {
}
ngOnInit(): void {
this.animateBackground();
}
private animateBackground(): void {
const host = this.host;
const chars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l',
'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
setInterval(() => {
for (let i = 0; i < Math.floor(Math.random() * 5); i++) {
const character = chars[Math.floor(Math.random() * chars.length)];
const duration = Math.floor(Math.random() * 15);
const offset = Math.floor(Math.random() * (45 - duration * 3)) + 3;
const size = 12 + (15 - duration);
const span = '<span class="animated-text" style="right:' + offset + 'vw; font-size: ' +
+size + 'px; animation-duration:' + duration + 's">' + character + '</span>';
this.children.first.nativeElement.insertAdjacentHTML('beforeend', span);
setTimeout(() => {
// this.renderer.removeChild(host.nativeElement, this.children.first.nativeElement);
}, duration * 1000, false, host);
}
}, 250, host);
}
as you can see I have a problem with my setTimeout - don't know how to remove the element.
could use your help with this.
from angular-text-animation.
g1eb
commented on June 12, 2024
oh nice! That looks like a good start, I can take a look..
maybe I'll create a separate branch for the migration first, let me see
from angular-text-animation.
blakazulu
commented on June 12, 2024
Okay it's done:
here is the directive:
import {AfterViewInit, Directive, ElementRef, Input, Renderer2} from '@angular/core';
@Directive({
selector: '[sbzFloatingText]'
})
export class FloatingTextDirective implements AfterViewInit {
@Input() maxFontSize = 20;
@Input() colorSchemeArray: string[];
constructor(private elementRef: ElementRef, private renderer: Renderer2) {
}
ngAfterViewInit(): void {
this.init();
this.animateBackground();
}
private init(): void {
this.colorSchemeArray = this.colorSchemeArray
? this.colorSchemeArray
: ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
'#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
'#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
'#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
'#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC',
'#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
'#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680',
'#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
'#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3',
'#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];
}
private animateBackground(): void {
// need to access them in the setTimeout function
const renderer = this.renderer;
const elementRef = this.elementRef;
const chars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l',
'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
setInterval(() => {
for (let i = 0; i < Math.floor(Math.random() * 5); i++) {
const character = chars[Math.floor(Math.random() * chars.length)];
const duration = Math.floor(Math.random() * 15);
const offset = Math.floor(Math.random() * (45 - duration * 3)) + 3;
const size = 12 + (this.maxFontSize - duration);
const color = this.colorSchemeArray[Math.floor(Math.random() * this.colorSchemeArray.length)];
const span = `<span class="animated-text" style="color: ${color};right: ${offset}vw; font-size: ${size}px;` +
` animation-duration: ${duration}s">${character}</span>`;
elementRef.nativeElement.insertAdjacentHTML('beforeend', span);
setTimeout(() => {
renderer.removeChild(elementRef.nativeElement, elementRef.nativeElement.firstChild);
}, duration * 1000, false, elementRef, renderer);
}
}, 250);
}
}
I made a few modifications:
- the text is now rainbow colors.
- added an input for max font size to be customizable use case: [maxFontSize]="30"
- added an input for rainbow colors. if the user only wants one color he can pass one color or different scheme like this:
[colorSchemeArray]="['#000"]
from angular-text-animation.
blakazulu
commented on June 12, 2024
ok, basically this is the directive.ts file:
import {AfterViewInit, Directive, ElementRef, Input, Renderer2} from '@angular/core';
@Directive({
selector: '[sbzFloatingText]'
})
export class FloatingTextDirective implements AfterViewInit {
@Input() maxFontSize = 20;
@Input() colorSchemeArray: string[];
constructor(private elementRef: ElementRef, private renderer: Renderer2) {
}
ngAfterViewInit(): void {
this.init();
this.animateBackground();
}
private init(): void {
this.colorSchemeArray = this.colorSchemeArray
? this.colorSchemeArray
: [
'#63b598', '#ce7d78', '#ea9e70', '#a48a9e', '#c6e1e8', '#648177', '#0d5ac1',
'#f205e6', '#1c0365', '#14a9ad', '#4ca2f9', '#a4e43f', '#d298e2', '#6119d0',
'#d2737d', '#c0a43c', '#f2510e', '#651be6', '#79806e', '#61da5e', '#cd2f00',
'#9348af', '#01ac53', '#c5a4fb', '#996635', '#b11573', '#4bb473', '#75d89e',
'#2f3f94', '#2f7b99', '#da967d', '#34891f', '#b0d87b', '#ca4751', '#7e50a8',
'#c4d647', '#e0eeb8', '#11dec1', '#289812', '#566ca0', '#ffdbe1', '#2f1179',
'#935b6d', '#916988', '#513d98', '#aead3a', '#9e6d71', '#4b5bdc', '#0cd36d',
'#250662', '#cb5bea', '#228916', '#ac3e1b', '#df514a', '#539397', '#880977',
'#f697c1', '#ba96ce', '#679c9d', '#c6c42c', '#5d2c52', '#48b41b', '#e1cf3b',
'#5be4f0', '#57c4d8', '#a4d17a', '#225b8', '#be608b', '#96b00c', '#088baf',
'#f158bf', '#e145ba', '#ee91e3', '#05d371', '#5426e0', '#4834d0', '#802234',
'#6749e8', '#0971f0', '#8fb413', '#b2b4f0', '#c3c89d', '#c9a941', '#41d158',
'#fb21a3', '#51aed9', '#5bb32d', '#807fb', '#21538e', '#89d534', '#d36647',
'#7fb411', '#0023b8', '#3b8c2a', '#986b53', '#f50422', '#983f7a', '#ea24a3',
'#79352c', '#521250', '#c79ed2', '#d6dd92', '#e33e52', '#b2be57', '#fa06ec',
'#1bb699', '#6b2e5f', '#64820f', '#1c271', '#21538e', '#89d534', '#d36647',
'#7fb411', '#0023b8', '#3b8c2a', '#986b53', '#f50422', '#983f7a', '#ea24a3',
'#79352c', '#521250', '#c79ed2', '#d6dd92', '#e33e52', '#b2be57', '#fa06ec',
'#1bb699', '#6b2e5f', '#64820f', '#1c271', '#9cb64a', '#996c48', '#9ab9b7',
'#06e052', '#e3a481', '#0eb621', '#fc458e', '#b2db15', '#aa226d', '#792ed8',
'#73872a', '#520d3a', '#cefcb8', '#a5b3d9', '#7d1d85', '#c4fd57', '#f1ae16',
'#8fe22a', '#ef6e3c', '#243eeb', '#1dc18', '#dd93fd', '#3f8473', '#e7dbce',
'#421f79', '#7a3d93', '#635f6d', '#93f2d7', '#9b5c2a', '#15b9ee', '#0f5997',
'#409188', '#911e20', '#1350ce', '#10e5b1', '#fff4d7', '#cb2582', '#ce00be',
'#32d5d6', '#17232', '#608572', '#c79bc2', '#00f87c', '#77772a', '#6995ba',
'#fc6b57', '#f07815', '#8fd883', '#060e27', '#96e591', '#21d52e', '#d00043',
'#b47162', '#1ec227', '#4f0f6f', '#1d1d58', '#947002', '#bde052', '#e08c56',
'#28fcfd', '#bb09b', '#36486a', '#d02e29', '#1ae6db', '#3e464c', '#a84a8f',
'#911e7e', '#3f16d9', '#0f525f', '#ac7c0a', '#b4c086', '#c9d730', '#30cc49',
'#3d6751', '#fb4c03', '#640fc1', '#62c03e', '#d3493a', '#88aa0b', '#406df9',
'#615af0', '#4be47', '#2a3434', '#4a543f', '#79bca0', '#a8b8d4', '#00efd4',
'#7ad236', '#7260d8', '#1deaa7', '#06f43a', '#823c59', '#e3d94c', '#dc1c06',
'#f53b2a', '#b46238', '#2dfff6', '#a82b89', '#1a8011', '#436a9f', '#1a806a',
'#4cf09d', '#c188a2', '#67eb4b', '#b308d3', '#fc7e41', '#af3101', '#ff065',
'#71b1f4', '#a2f8a5', '#e23dd0', '#d3486d', '#00f7f9', '#474893', '#3cec35',
'#1c65cb', '#5d1d0c', '#2d7d2a', '#ff3420', '#5cdd87', '#a259a4', '#e4ac44',
'#1bede6', '#8798a4', '#d7790f', '#b2c24f', '#de73c2', '#d70a9c', '#25b67',
'#88e9b8', '#c2b0e2', '#86e98f', '#ae90e2', '#1a806b', '#436a9e', '#0ec0ff',
'#f812b3', '#b17fc9', '#8d6c2f', '#d3277a', '#2ca1ae', '#9685eb', '#8a96c6',
'#dba2e6', '#76fc1b', '#608fa4', '#20f6ba', '#07d7f6', '#dce77a', '#77ecca'
];
}
private animateBackground(): void {
// need to access them in the setTimeout function
const renderer = this.renderer;
const elementRef = this.elementRef;
const chars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l',
'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
setInterval(() => {
for (let i = 0; i < Math.floor(Math.random() * 5); i++) {
const character = chars[Math.floor(Math.random() * chars.length)];
const duration = Math.floor(Math.random() * 15);
const offset = Math.floor(Math.random() * (45 - duration * 3)) + 3;
const size = 12 + (this.maxFontSize - duration);
const color = this.colorSchemeArray[Math.floor(Math.random() * this.colorSchemeArray.length)];
const span = `<span class="animated-text" style="color: ${color};right: ${offset}vw; font-size: ${size}px;` +
` animation-duration: ${duration}s">${character}</span>`;
elementRef.nativeElement.insertAdjacentHTML('beforeend', span);
setTimeout(() => {
renderer.removeChild(elementRef.nativeElement, elementRef.nativeElement.firstChild);
}, duration * 1000, false, elementRef, renderer);
}
}, 250);
}
}
and this is the CSS file:
/**
* Floating text animation styles
*/
:host ::ng-deep .animated-text {
cursor: default;
color: #68C2A3;
font-family: 'VT323', monospace, sans-serif;
text-shadow: 0 0 1px #ffffff;
font-size: 24px;
position: absolute;
right: 25px;
top: -50px;
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
animation-name: float-animation;
animation-timing-function: ease-out;
}
@keyframes float-animation {
0% {
top: 100vh;
opacity: 0;
}
25% {
opacity: 1;
}
50% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
top: -25px;
opacity: 0;
}
}
I wasn't sure If my pull request is correct
from angular-text-animation.
g1eb
commented on June 12, 2024
Hah, that's pretty awesome, let me take a look!
I've upgraded most of the dependencies we use to package this using gulp, and you can now compile the source into a minified distribution files using npm run build. This includes support for es6 (which is now used in angular 10?)
From there I use serve . to run the minified example locally (you can install serve with npm install serve - but really any simple http server in that directory would do the job)
The only thing is that right now we are getting import related errors, I will need to figure out how to roll this up with system.js for the demo.
from angular-text-animation.
blakazulu
commented on June 12, 2024
How is it going?
from angular-text-animation.
blakazulu
commented on June 12, 2024
here:
https://github.com/blakazulu/Ngx-Sbz-Text-Animation
from angular-text-animation.
g1eb
commented on June 12, 2024
Good work! Closing this issue.
from angular-text-animation.
Related Issues (1)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-text-animation.