Forum - Hallo Wolfgang, hier mal ein Geschenk für Dich - Animierter Würfel, animiertes Logo

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! � Hallo Wolfgang, hier mal ein Geschenk für Dich - Animierter Würfel, animiertes Logo

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News. Stellen Sie Ihr eigene Webseite vor. Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. MS Windows 11, 10, 8 und 7 - Fragen & Antworten. Linux, Ubuntu und andere Betriebssysteme. �rger mit dem PC, Laptop oder Tablet? �rger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? �rger mit dem PC, Laptop oder Tablet - Fragen & Antworten? Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten. XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! Das neue Template Xobor (v6). Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie. Wasserstoff - Energietr�ger der Zukunft. Die besten Links! Empfehlenswerte und interessante Links! Link - Suche. Verschiedenes Elektronik & Elektrotechnik - Fragen & Antworten Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones. Lob, Kritik & Verbesserungsvorschl�ge. Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit. Alles, was noch so �brig bleibt. Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel.

#1 | Hallo Wolfgang, hier mal ein Geschenk für Dich - Animierter Würfel, animiertes Logo datum

20.11.2024 20:25 (zuletzt bearbeitet: 21.11.2024 01:03)

Daishi

Informationen anzeigen

Beitr�ge:	391
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	328

Dein Forum sieht echt super aus und ist schon sehr cool und sehr modern.

Vor allem sieht Dein Cube super aus, passt sehr schön zu Deinem Style. Ich habe ein paar Tage bei einem Freund übernachtet und durfte an sein PC. Da habe ich voller Inspiration auch einen Cube erstellt.

Da ich kein PC und Internet habe, kann ich nicht aktiv hier sein und an meine Projekte arbeiten. Wie lange das dauert, kann ich leider nicht sagen, da ich extrem unter Beobachtung stehe. Du weist ja bescheid.

Habe mal den Code umgeschrieben und Dir als CSS geschrieben. Habe mir gedacht, dass Du es vielleicht nicht gleich verstehen kannst, darum habe ich es nochmal in SCSS geschrieben. Vieleicht verstehst Du es ja dann besser.

Ja, diese Version von Cube ist ein bisschen komplexer und etwas schwierig, aber ich hoffe, dass mit der neuen Umschreibung, dass Du es dann besser verstehst. Ist nicht böse gemeint, es war ein Fehler von mir, so ein Wurf ins kalte Wasser, lach.

Jedenfalls hoffe ich sehr, dass es Dir gefällt und Du es gut gebrauchen kannst. Dachte, dass es zu Deinem Forum passt. Wie immer kannst und darfst Du es verändern und erweitern.

Hier die neue Beschreibung und der neue Code in SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
 
<style>
// Habe es für Dich umgeschrieben Wolfgang, hatte es vorher in CSS geschrieben. Dachte, dass Du da etwas Probleme hast. Hoffe, dass ich Dir damit etwas helfen konnte und es jetzt besser verstehst. Kannst es später ja in CSS umwandeln, wenn Du die SCSS besser verstehst. Wollte Dir damit ein bisschen helfen, mit freundlichen Grüßen Daishi 
 
// Animation in Sekunden
$animation-duration: 8s;
 
// Cube - Größe ändern
$cube-size: 2em;
 
$cube-color: #0f0f36;
$background-color: #afafaf;
 
// Bild Avatar von Wolfgang eingefügt
$bg-grid: "https://files.homepagemodules.de/b104774/avatar-e1e3f372-1.gif";
 
// Bild vom Forum, von Wolfgang eingefügt
$bg-image1: "https://files.homepagemodules.de/b104774/a_151_37e79f57.png";
$bg-image2: "https://files.homepagemodules.de/b104774/a_151_37e79f57.png";
$bg-image3: "https://files.homepagemodules.de/b104774/a_151_37e79f57.png";
$bg-image4: "https://files.homepagemodules.de/b104774/a_151_37e79f57.png";
$bg-image5: "https://files.homepagemodules.de/b104774/a_151_37e79f57.png";
$bg-image6: "https://files.homepagemodules.de/b104774/a_151_37e79f57.png";
 

body {
  overflow: hidden;
  margin: 0;
  height: 100vh;
  perspective: 32em;
  background: $background-color;
}
 
div {
  position: absolute;
  transform-style: preserve-3d;
}
 
.wolfgang {
  top: 50%;
  left: 50%;
  transform: rotateX(-18deg) rotateY(-136deg);
  animation: cemara 90s ease-in-out infinite;
}
 
.comp-3d {
  animation: r $animation-duration ease-in-out infinite;
}
.comp-3d--i {
  animation-name: ri;
}
.comp-3d--o {
  animation-name: ro;
}
.pos:nth-child(1) {
  transform: scale3d(1, 1, 1) translate3d($cube-size, $cube-size, $cube-size);
}
 
:not(.pos) > .cube:nth-child(1) {
  transform: translate3d(-$cube-size, -$cube-size, 0em);
}
 
.pos:nth-child(2) {
  transform: scale3d(1, 1, -1) translate3d($cube-size, $cube-size, $cube-size);
}
 
:not(.pos) > .cube:nth-child(2) {
  transform: translate3d(-$cube-size, 0em, -$cube-size);
}
 
:not(.pos) > .cube:nth-child(3) {
  transform: translate3d(-$cube-size, 0em, 0em);
}
 
:not(.pos) > .cube:nth-child(4) {
  transform: translate3d(-$cube-size, 0em, $cube-size);
}
 
.pos:nth-child(3) {
  transform: scale3d(1, -1, 1) translate3d($cube-size, $cube-size, $cube-size);
}
 
:not(.pos) > .cube:nth-child(5) {
  transform: translate3d(-$cube-size, $cube-size, 0em);
}
 
.pos:nth-child(4) {
  transform: scale3d(1, -1, -1) translate3d($cube-size, $cube-size, $cube-size);
}
 
:not(.pos) > .cube:nth-child(6) {
  transform: translate3d(0em, -$cube-size, -$cube-size);
}
 
:not(.pos) > .cube:nth-child(7) {
  transform: translate3d(0em, -$cube-size, 0em);
}
 
:not(.pos) > .cube:nth-child(8) {
  transform: translate3d(0em, -$cube-size, $cube-size);
}
 
:not(.pos) > .cube:nth-child(9) {
  transform: translate3d(0em, 0em, -$cube-size);
}
 
:not(.pos) > .cube:nth-child(10) {
  transform: translate3d(0em, 0em, 0em);
}
 
:not(.pos) > .cube:nth-child(11) {
  transform: translate3d(0em, 0em, $cube-size);
}
 
:not(.pos) > .cube:nth-child(12) {
  transform: translate3d(0em, $cube-size, -$cube-size);
}
 
:not(.pos) > .cube:nth-child(13) {
  transform: translate3d(0em, $cube-size, 0em);
}
 
:not(.pos) > .cube:nth-child(14) {
  transform: translate3d(0em, $cube-size, $cube-size);
}
 
.pos:nth-child(5) {
  transform: scale3d(-1, 1, 1) translate3d($cube-size, $cube-size, $cube-size);
}
 
:not(.pos) > .cube:nth-child(15) {
  transform: translate3d($cube-size, -$cube-size, 0em);
}
 
.pos:nth-child(6) {
  transform: scale3d(-1, 1, -1) translate3d($cube-size, $cube-size, $cube-size);
}
 
:not(.pos) > .cube:nth-child(16) {
  transform: translate3d($cube-size, 0em, -$cube-size);
}
 
:not(.pos) > .cube:nth-child(17) {
  transform: translate3d($cube-size, 0em, 0em);
}
 
:not(.pos) > .cube:nth-child(18) {
  transform: translate3d($cube-size, 0em, $cube-size);
}
 
.pos:nth-child(7) {
  transform: scale3d(-1, -1, 1) translate3d($cube-size, $cube-size, $cube-size);
}
 
:not(.pos) > .cube:nth-child(19) {
  transform: translate3d($cube-size, $cube-size, 0em);
}
 
.pos:nth-child(8) {
  transform: scale3d(-1, -1, -1) translate3d($cube-size, $cube-size, $cube-size);
}
 
.pos .cube {
  animation: m $animation-duration ease-out infinite;
}
.cube__face {
  margin: -#{$cube-size/2};
  width: $cube-size;
  height: $cube-size;
  box-shadow: 0 0 $cube-size/2 rgba(220, 220, 220, 0.2) inset;
  backface-visibility: hidden;
  background-color: $cube-color;
  background-image: url($bg-grid);
  background-size: cover;
}
.cube__face:nth-child(2n) {
  filter: brightness(0.97);
}
.cube__face:nth-child(n + 5) {
  filter: brightness(1.03);
}
 
.cube__face:nth-child(1) {
  transform: rotateY(0deg) translateZ($cube-size/2);
}
.cube__face:nth-child(2) {
  transform: rotateY(90deg) translateZ($cube-size/2);
}
.cube__face:nth-child(3) {
  transform: rotateY(180deg) translateZ($cube-size/2);
}
.cube__face:nth-child(4) {
  transform: rotateY(270deg) translateZ($cube-size/2);
}
.cube__face:nth-child(5) {
  transform: rotateX(90deg) translateZ($cube-size/2);
}
.cube__face:nth-child(6) {
  transform: rotateX(-90deg) translateZ($cube-size/2);
}
 
.face_bg {
  background-size: 300% 300%;
  background-repeat: no-repeat;
}
 
.face_bg-lt {
  background-position: left top;
}
.face_bg-ct {
  background-position: center top;
}
.face_bg-rt {
  background-position: right top;
}
.face_bg-lc {
  background-position: left center;
}
.face_bg-cc {
  background-position: center center;
}
.face_bg-rc {
  background-position: right center;
}
.face_bg-lb {
  background-position: left bottom;
}
.face_bg-cb {
  background-position: center bottom;
}
.face_bg-rb {
  background-position: right bottom;
}
 
.bg1 {
  background-image: url($bg-image1);
}
 
.bg2 {
  background-image: url($bg-image2);
}
 
.bg3 {
  background-image: url($bg-image3);
}
 
.bg4 {
  background-image: url($bg-image4);
}
 
.bg5 {
  background-image: url($bg-image5);
}
 
.bg6 {
  background-image: url($bg-image6);
}
 
.comp-3d--o .cube__face.bg1 {
  &.face_bg-rt {
    transform: rotateY(90deg) translateZ($cube-size/2) scaleX(-1) scaleY(-1);
  }
  &.face_bg-lt {
    transform: rotateY(90deg) translateZ($cube-size/2) scaleY(-1);
  }
  &.face_bg-rb {
    transform: rotateY(90deg) translateZ($cube-size/2) scaleX(-1);
  }
}
.comp-3d--o .cube__face.bg2 {
  &.face_bg-rt {
    transform: rotateY(0deg) translateZ($cube-size/2) scaleY(-1);
  }
  &.face_bg-lt {
    transform: rotateY(0deg) translateZ($cube-size/2) scaleX(-1) scaleY(-1);
  }
  &.face_bg-lb {
    transform: rotateY(0deg) translateZ($cube-size/2) scaleX(-1);
  }
}
.comp-3d--o .cube__face.bg3 {
  &.face_bg-rb {
    transform: rotateX(-90deg) translateZ($cube-size/2) scaleY(-1);
  }
  &.face_bg-lt {
    transform: rotateX(-90deg) translateZ($cube-size/2) scaleX(-1);
  }
  &.face_bg-lb {
    transform: rotateX(-90deg) translateZ($cube-size/2) scaleX(-1) scaleY(-1);
  }
}
.comp-3d--o .cube__face.bg4 {
  &.face_bg-rt {
    transform: rotateX(0deg) translateZ($cube-size/2) scaleY(-1);
  }
  &.face_bg-lt {
    transform: rotateX(0deg) translateZ($cube-size/2) scaleX(-1) scaleY(-1);
  }
  &.face_bg-lb {
    transform: rotateX(0deg) translateZ($cube-size/2) scaleX(-1) scaleY(-1)
      scaleY(-1);
  }
}
.comp-3d--o .cube__face.bg5 {
  &.face_bg-rt {
    transform: rotateY(90deg) translateZ($cube-size/2) scaleX(-1) scaleY(-1);
  }
  &.face_bg-lt {
    transform: rotateY(90deg) translateZ($cube-size/2) scaleY(-1);
  }
  &.face_bg-rb {
    transform: rotateY(90deg) translateZ($cube-size/2) scaleX(-1) scaleY(-1)
      scaleY(-1);
  }
}
.comp-3d--o .cube__face.bg6 {
  &.face_bg-rb {
    transform: rotateX(-90deg) translateZ($cube-size/2) scaleY(-1);
  }
  &.face_bg-lt {
    transform: rotateX(-90deg) translateZ($cube-size/2) scaleX(-1);
  }
  &.face_bg-lb {
    transform: rotateX(-90deg) translateZ($cube-size/2) scaleX(-1) scaleY(-1);
  }
}
 
@keyframes m {
  0%,
  2.5%,
  47.5%,
  50% {
    transform: none;
  }
  7.5% {
    transform: translate3d(0, $cube-size, 0);
  }
  12.5% {
    transform: translate3d(0, $cube-size, $cube-size);
  }
  17.5%,
  32.5% {
    transform: translate3d($cube-size, $cube-size, $cube-size);
  }
  37.5% {
    transform: translate3d($cube-size, 0, $cube-size);
  }
  42.5% {
    transform: translate3d($cube-size, 0, 0);
  }
}
 
//Rotation des inneren Blocks
@keyframes ri {
  0%,
  10%,
  50.0001% {
    transform: none;
  }
  25% {
    transform: rotateX(0turn) rotateY(-1turn);
  }
  50%,
  40% {
    transform: rotateX(-1turn) rotateY(-1turn);
  }
}
 
//Peripherieausdehnung und -rotation
@keyframes ro {
  0%,
  17.5%,
  50.0001% {
    transform: none;
  }
  32.5%,
  50% {
    transform: rotate(-1turn);
  }
}
 
//Perspektive
@keyframes cemara {
  0%,
  100% {
    transform: rotateX(-18deg) rotateY(-136deg);
  }
  25% {
    transform: rotateX(-190deg) rotateY(-50deg);
  }
  75% {
    transform: rotateX(160deg) rotateY(125deg);
  }
  50% {
    transform: rotateX(12deg) rotateY(12deg);
  }
}
 
</style>
 
<div class="wolfgang">
  <div class="comp-3d comp-3d--i">
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-ct bg5"></div>
      <div class="cube__face face_bg face_bg-lc bg3"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-rc bg2"></div>
      <div class="cube__face face_bg face_bg-lc bg5"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-cc bg5"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face face_bg face_bg-lc bg4"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-rc bg5"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-cb bg5"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-lc bg6"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-ct bg2"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-ct bg3"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-cc bg3"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face face_bg face_bg-ct bg4"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-cb bg3"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-cc bg2"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face face_bg face_bg-cc bg4"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-cb bg2"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-cb bg6"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-cc bg6"></div>
    </div>
    <div class="cube">
      <div class="cube__face face_bg face_bg-cb bg4"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-ct bg6"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-ct bg1"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-rc bg3"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-rc bg1"></div>
      <div class="cube__face face_bg face_bg-lc bg2"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-cc bg1"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face face_bg face_bg-rc bg4"></div>
      <div class="cube__face face_bg face_bg-lc bg1"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-cb bg1"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-rc bg6"></div>
    </div>
  </div>
  <div class="comp-3d comp-3d--o">
    <div class="pos">
      <div class="cube">
        <div class="cube__face face_bg face_bg-rb bg4"></div>
        <div class="cube__face face_bg face_bg-lb bg1"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face face_bg face_bg-rt bg6"></div>
      </div>
    </div>
    <div class="pos">
      <div class="cube">
        <div class="cube__face face_bg face_bg-lb bg2"></div>
        <div class="cube__face face_bg face_bg-rb bg1"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face face_bg face_bg-rb bg6"></div>
      </div>
    </div>
    <div class="pos">
      <div class="cube">
        <div class="cube__face face_bg face_bg-rt bg4"></div>
        <div class="cube__face face_bg face_bg-lt bg1"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face face_bg face_bg-rb bg3"></div>
      </div>
    </div>
    <div class="pos">
      <div class="cube">
        <div class="cube__face face_bg face_bg-lt bg2"></div>
        <div class="cube__face face_bg face_bg-rt bg1"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face face_bg face_bg-rt bg3"></div>
      </div>
    </div>
    <div class="pos">
      <div class="cube">
        <div class="cube__face face_bg face_bg-lb bg4"></div>
        <div class="cube__face face_bg face_bg-rb bg5"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face face_bg face_bg-lt bg6"></div>
      </div>
    </div>
    <div class="pos">
      <div class="cube">
        <div class="cube__face face_bg face_bg-rb bg2"></div>
        <div class="cube__face face_bg face_bg-lb bg5"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face cube__face face_bg face_bg-lb bg6"></div>
      </div>
    </div>
    <div class="pos">
      <div class="cube">
        <div class="cube__face face_bg face_bg-lt bg4"></div>
        <div class="cube__face face_bg face_bg-rt bg5"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face face_bg face_bg-lb bg3"></div>
      </div>
    </div>
    <div class="pos">
      <div class="cube">
        <div class="cube__face face_bg face_bg-rt bg2"></div>
        <div class="cube__face face_bg face_bg-lt bg5"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face face_bg face_bg-lt bg3"></div>
      </div>
    </div>
  </div>
</div>
 

Schließen

Ich hoffe, dass es jetzt besser zu verstehen ist, und dass Dir das Geschenk gefällt.

Mit herzlichen Grüßen

Daishi

Daishi

Antworten

#2 | Animierter Würfel mit SASS / SCSS datum

21.11.2024 02:26 (zuletzt bearbeitet: 26.11.2024 09:01)

Animierter Würfel mit SASS / SCSS

Hallo DaishiSchön von Dir zu hören und dass es Dir gut geht ...

Zum Skript

Erstmal besten Dank!
Habe Deine Version mit der besonderen CSS nicht zum Laufen bekommen!
SASS / SCSS- Dateien werden auch nicht direkt von den Browsern unterstützt, sie müssen vorher durch einen SCSS Compiler in CSS umgewandelt werden.
Im neuen V6, hier wird ja SCSS verwendet, wollte es auch nicht funktionieren.
Habe die CSS-Version soweit Forum tauglich gemacht, dauert aber noch eine Weile!

Bin gerade dabei ein Plugin zu reparieren, hatte mal wieder kein Backup erstellt!

Nachtrag

Habe den Bilder-Würfel mit CSS (nicht SASS/SCSS) hinbekommen, man kann sogar über "var" alles einstellen und anpassen!

Rotierende Animation von Bildern

Bis dann und lass es Dir gut gehen
Wolfgang

Antworten

#3 | Hallo Wolfgang, hier mal ein Geschenk für Dich - Animiertes Logo datum

29.04.2025 12:34

Daishi

Informationen anzeigen

Beitr�ge:	391
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	328

Hallo mein Freund, ich danke Dir so sehr für die tollen Inspirationen und Ideen, die Du mir immer so heimlich zuwirfst, "lach", ist gut gemeint.

Habe an diesem Script seit gestern Morgen gehangen und ich bin jetzt fertig geworden. Ich denke, dass es auch eine Inspiration für Dich ist und du es sehr gut gebrauchen kannst.

Ist ein modernes Xobor Logo.

Hoffe, dass es gut ankommt, mit cooler Hover-Effekt. Ich würde mich freuen, wenn Du es verwenden kannst und es als Logo fürs Business (v4) nehmen kannst.

Ich hoffe, dass ich Dir mit dem Script eine große Freude mache.

Ich weiß, viele sind überrascht, dass ich mal hier bin. Wenn ich eine Möglichkeit finde, schaue ich ab und an mal rein, habe im Moment keinen PC und bin selten im Internet zu sehen, viele Sachen zu erledigen.

Ich wünsche Euch Allen alles Gute, freue mich auf eine gute Zusammenarbeit mit vielen Ideen und Umsetzungen.

Hier das Geschenk für Dich. Habe es mit Liebe und Sorgfalt geschrieben und hoffe, dass es soweit fehlerfrei ist.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
 
<style>
  
 h2 {
  position:absolute;
  font-family: 'Poppins';
  text-transform: uppercase;
  left: 50%;
  transform: translate(-50%, 0%);
}
#canvas1 {
    position: relative;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
    display: inline;
    justify-content: center;
	}
 
	#image1 {
		display: none;
	}
  
</style>
 

<h2> Business Template (v4)</h2>
<canvas id="canvas1" ></canvas>
<img id="image1" src="data:image/png;base64,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" />
 

<script>
  
  window.addEventListener('load', function () {
		const canvas = document.getElementById('canvas1');
		const ctx = canvas.getContext('2d');
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
 
		class Particle {
			constructor(effect, x, y, color) {
				this.effect = effect;
				this.x = Math.random() * this.effect.width;
				this.y = Math.random() * this.effect.height;
				this.originX = Math.floor(x);
				this.originY = Math.floor(y);
				this.color = color;
				this.size = this.effect.gap - 1;
				this.vx = -100;
				this.vy = 0;
				this.ease = 0.08;
				this.friction = 0.8;
				this.dx = -10;
				this.dy = 0;
				this.distance = 0;
				this.force = 0;
				this.angle = 0;
			}
			draw(context) {
				context.fillStyle = this.color;
				context.fillRect(this.x, this.y, this.size, this.size);
			}
			update() {
				this.dx = this.effect.mouse.x - this.x;
				this.dy = this.effect.mouse.y - this.y;
				this.distance = this.dx * this.dx + this.dy * this.dy;
        this.force = - this.effect.mouse.radius / this.distance;
 
				if (this.distance < this.effect.mouse.radius) {
					this.angle = Math.atan2(this.dy, this.dx);
					this.vx += this.force * Math.cos(this.angle);
					this.vy += this.force * Math.sin(this.angle);
				}
 
				this.x += (this.vx *= this.friction) + (this.originX - this.x) * this.ease;
				this.y += (this.vy *= this.friction) + (this.originY - this.y) * this.ease;
			}
		}
 
		class Effect {
			constructor(width, height) {
				this.width = width;
				this.height = height;
				this.particlesArray = [];
				this.image = document.getElementById('image1');
				this.centerX = this.width * 0.5;
				this.centerY = this.height * 0.5;
				this.x = this.centerX - this.image.width * 0.5;
				this.y = this.centerY - this.image.height * 0.5;
				this.gap = 4;
				this.mouse = {
					radius: 2000,
					x: undefined,
					y: undefined
				}
				window.addEventListener('mousemove', event => {
					this.mouse.x = event.x;
					this.mouse.y = event.y;
				});
			}
			init(context) {
				context.drawImage(this.image, this.x, this.y);
				const pixels = context.getImageData(0, 0, this.width, this.height).data;
				for (let y = 0; y < this.height; y += this.gap) {
					for (let x = 0; x < this.width; x += this.gap) {
						const index = (y * this.width + x) * 4;
						const red = pixels[index];
						const green = pixels[index + 1];
						const blue = pixels[index + 2];
						const alpha = pixels[index + 3];
						const color = 'rgb(' + red + ',' + green + ',' + blue + ')';
 
						if (alpha > 0) {
							this.particlesArray.push(new Particle(this, x, y, color));
						}
					}
 
				}
			}
			draw(context) {
				this.particlesArray.forEach(particle => particle.draw(context));
			}
			update() {
				this.particlesArray.forEach(particle => particle.update());
			}
		}
 
		const effect = new Effect(canvas.width, canvas.height);
		effect.init(ctx);
 
		function animate() {
			ctx.clearRect(0, 0, canvas.width, canvas.height)
			effect.draw(ctx);
			effect.update();
			requestAnimationFrame(animate);
		}
		animate()
	})
  
</script>
 

Schließen

So sieht es aus:

Neue Inspiration von Wolfgang für Wolfgang

Mit herzlichen Grüßen

Daishi

Kipper-Spedition und Wolfgang finden das Top!

Antworten

#4 | RE: Hallo Wolfgang, hier mal ein Geschenk für Dich - Animiertes Logo datum

30.04.2025 14:42

Daishi

Informationen anzeigen

Beitr�ge:	391
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	328

Ach so, bevor ich es vergesse zu erwähnen. Habe vergessen Dir zu sagen, wo Du den beweglichen Kreis ändern kannst, wenn er zu groß ist.

1
2
3
4
5
 
this.mouse = {
        radius: 900,
        x: undefined,
        y: undefined
}
 

Ist im Skript in Zeile 93 zu finden. Im Moment steht er auf 2000, kannst ihn ja anpassen mit 900. Ich dachte mir, ich sage Dir nochmal Bescheid, nicht das Du Dich da blöde suchst.

Ich hoffe, dass ich Dir ein Stückchen weiterhelfen konnte.

Tut mir leid, hatte vergessen es gestern zu erwähnen.

Wünsche Euch für morgen noch einen schönen Feiertag.

Mit herzlichen Grüßen Euer

Daishi

Dankesch�n und Wolfgang finden das Top!

Antworten

#5 | Animiertes Logo datum

30.04.2025 20:44

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3620
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1488

Animiertes Logo

Hallo DaishiErst mal besten Dank für das super interessante Skript!
Habe es unter die Lupe genommen und so einiges herausgefunden!

Die Animation funktioniert nur mit codierten "Base64" Bildern (Zeile 30).
Die codierten Bilder haben einen superlangen Code (zu sehen am horizontalen Scrollbalken).
Das heißt, dass nicht normale Bilder in Zeile 30 eingebaut werden können, sondern man muss ein Bild seiner Wahl erstmal mit einem "Online Base64 Encode" bearbeiten.
Dem Rechner wird bei der Animation sehr viel Rechenleistung abverlangt!
Große Bilder mit viel Farbinhalten kommen da nicht in Frage!
Ein direkter Einbau in die Startseite ist nicht zu empfehlen, aber ein Aufruf über "Eigene Seiten" passt da recht gut!

Habe es mal mit einem weboptimierten, farbigen Bild von 300px ( nur 9,51kB ) versucht und alles nach "Eigene Seiten" kopiert.
Da die Körnung recht grob ist, habe ich geschaut, an welcher Schraube man drehen kann.
Habe Zeile 49 von 1 auf 0.2, Zeile 91 von 4 auf 2 und Zeile 93 von 2000 auf 900 gestellt.
Auf dem Bild ist dann kaum ein Raster zu sehen, aber die Lüfter des Rechners sind ganz schon am Ackern!
Trotzdem unübertroffen, mit klasse Effekt!

Mein Base64-Image (siehe Scroll-Leiste)

• Bilder online in das BASE64-Format konvertieren

1
 
<img id="image1" src="data:image/jpg;base64,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" />

So sieht es dann aus: Logo-Animation

Bis dann und nochmal besten Dank

Wolfgang

Dankesch�n und Kipper-Spedition finden das Top!

Antworten

#6 | RE: Animiertes Logo datum

30.04.2025 21:48 (zuletzt bearbeitet: 30.04.2025 22:09)

Na, das ist ja jetzt ein Kunstwerk geworden, das jeden selbst zum Künstler werden lässt:

"Die Maus durch das Bild ziehen" kommt einem erst harmlos vor, aber verändert sich in der Weiter-Bearbeitung ständig.

Wie nennen wir die Weiter-Bearbeitung? Wie wärs mit
"Weiß-Leuchtkugel-Schüsse im Farbnebel werden zu Konfetti-Seifenblasen, die Gefängnisstangen-Rasterlinien psychedelisch aufbiegen"?
Und x-fache Farbkombi, wobei Kombinationen mit hellgrün, besonders die mit lila, definitiv mein:e Favorit:en sind!

Für schnellere, vergänglichere Mal-Ergebnisse ist Daishis Vorlage witzig,
wer mehr Mandala-mäßig meditativ malen will, nimmt die Weiter-Bearbeitung...

Wolfgang findet das Top!

Antworten

Sprache "Deutsch netter" � � Uhr mit Datum und super Animationen!

�hnliche Themen

Antworten

Letzter Beitrag

Animierte Grüße unter der Navigation
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 5 28.12.2024 08:30
Anne • Zugriffe: 252

Was mache ich hier falsch? - Präsentation von News & Tipps!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Daishi

22.06.2024 09:13
von

Daishi • Zugriffe: 790

Was mache ich hier falsch - Dropdownmenü in der Iconbar?
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Daishi

10.05.2024 18:14
von

Daishi • Zugriffe: 282

Xobor-Spoiler mit und ohne Spoiler-Grafik, neu animiert!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Daishi

18.10.2023 21:09
von

Kipper-Spedition • Zugriffe: 578

Ein Lob an Wolfgang
Erstellt im Forum Lob, Kritik & Verbesserungsvorschl�ge. von Daishi 2 28.07.2023 14:05
nobody • Zugriffe: 311
Animierte Titelleisten: Details + Zusammenfassung
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Daishi 1 13.01.2023 14:58
Daishi • Zugriffe: 433
Animierter Benutzer / Avatar mit Link zum Profil
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Daishi 18 24.07.2023 00:08
Anne • Zugriffe: 1425
reCAPTCHA - Hallo Wolfgang
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Mato 4 27.04.2022 09:48
nobody • Zugriffe: 404
Animierte Browser-Titelleiste mit Laufschrift
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 4 05.05.2020 20:38
Wolfgang • Zugriffe: 3344

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €

110%