Forum - 3D Decken - Karussell / 3D Bilder Galerie / 3D Lightbox / 3D ohne Namen

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 � 3D Decken - Karussell / 3D Bilder Galerie / 3D Lightbox / 3D ohne Namen

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows Betriebssystem MS Windows 11, 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 11, 10, 8.1, 8 und 7 - Fragen & Antworten �rger mit Ihrem PC? �rger mit dem PC - Vorbeugung und Hilfe �rger mit dem PC - 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 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 | 3D Decken - Karussell / 3D Bilder Galerie / 3D Lightbox / 3D ohne Namen datum

11.09.2022 21:36 (zuletzt bearbeitet: 25.04.2024 23:34)

Daishi

Informationen anzeigen

Beitr�ge:	387
Registriert seit:	08.01.2022

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

Hallo Wolfgang, ich habe mal eine Idee für dich umgesetzt. Habe die PN�s ja gelöscht, ich kann mich noch erinnern, wie du meintest, ob ich etwas Ausgefallenes mit Bildern machen könnte.

Da hatte ich auf meinen Deckenventilator geschaut und dachte mir, das könnte ich ja auch machen. War etwas schwer, aber ich habe es hinbekommen. Ich hoffe, dass es so weit ok ist und das ausgefallen genug ist.

Es ist nur schlicht gestaltet, soll ja etwas ausgefallen aussehen. Ich hoffe, dass ich das so auf den Punkt getroffen habe.

Im Testforum habe ich es auch schon eingebaut und es funktioniert auf den eigenen Seiten. Ich habe da meine eigenen Bilder verwendet, mit meiner Hündin Alma.

Man kann das Deckenkarussell anklicken und muss mit der Maus Bewegungen nach links und rechts machen, dann wieder mit der Maus runter und man kann dann Positionen wechseln. Ich hoffe, dass ich das verständlich erklärt habe.

Ich entschuldige mich für die schlecht erklärte Aussprache und Grammatik. Ich hoffe, man versteht, was ich meine.

So sieht es im CodePen aus:

3D Decken - Karussell - CodePen!

Hier mal der HTML Code:

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
 
  <!---------- Hintergrund  ------------>
<div class="background">
  <h1>Klicken Sie auf das Decken - Karusell</h1>
</div>
 
<main>
  <div class="carousel" onclick="onClick()" onmousemove="onMouseMove(event)">
    <div>
      <!---------- Hier kommen die Bilder rein  ------------>
      <img src="https://i.ibb.co/8cxD3p2/IMG-20220119-111918.jpg" />
    </div>
    <div>
      <img src="https://i.ibb.co/bFV0S2M/IMG-20220119-111920.jpg" />
    </div>
    <div>
      <img src="https://i.ibb.co/PYs0PyY/IMG-20220119-111936.jpg" />
    </div>
    <div>
      <img src="https://i.ibb.co/ySX89ft/IMG-20220119-111930.jpg" />
    </div>
    <div>
      <img src="https://i.ibb.co/JpDvJjJ/IMG-20220728-194135.jpg" />
    </div>
    <div>
      <img src="https://i.ibb.co/566Kz9x/IMG-20220728-194132.jpg" />
    </div>
    <div>
      <img src="https://i.ibb.co/1dS4bJb/IMG-20220728-194139.jpg" />
    </div>
    <div>
      <img src="https://i.ibb.co/d7jH8mb/IMG-20220117-115336.jpg" />
    </div>
</main>
  <!---------- Javascript  ------------>
  
  <script id="rendered-js">
let gIsDrugging = false;
 
function onClick() {
  if (!gIsDrugging) {
    document.querySelector(".carousel").classList.add("off");
    document.querySelector("main").classList.add("off");
  } else {
    document.querySelector(".carousel").classList.remove("off");
    document.querySelector("main").classList.remove("off");
  }
  gIsDrugging = !gIsDrugging;
}
 
function onMouseMove(ev) {
  ev.preventDefault();
  if (!gIsDrugging) return;
  console.log("mouse move");
  const elCarousel = document.querySelector(".carousel");
  const { movementX } = ev;
  const nextPosition =
  +getValue("--rotatez").replace("deg", "") + movementX / 4 || 0;
  setValue("--rotatez", nextPosition + "deg");
}
 
function getValue(varName) {
  const elBox = document.querySelector(":root");
  var boxStyle = getComputedStyle(elBox);
  return boxStyle.getPropertyValue(varName);
}
 
function setValue(varName, value) {
  const elBox = document.querySelector(":root");
  elBox.style.setProperty(varName, value);
}
//# sourceURL=pen.js
    </script>  
 

Schließen

Und hier der CSS - Code:

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
 
  @import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500&display=swap");
:root {
  --rotatez: 0deg;
}
 
body {
  margin: 0;
  perspective: 2000px;
  font-family: "Baloo 2";
  overflow: hidden;
}
/* ---------- Hintergrund  ---------- */
.background {
  position: absolute;
  width: 120vw;
  height: 120vh;
  top: -10vh;
  left: -10vw;
  background: radial-gradient(circle, #fff 0%, #aeaeb0 70%);
  transform: translatez(-400px);
  overflow: hidden;
}
.background h1 {
  color: #000a;
  position: absolute;
  font-size: 20px;
  margin: 0;
  top: 0px;
  left: 8px;
}
/* ---------- 3D Decken - Karusell  ---------- */
main {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  animation: string 7s ease-in-out infinite alternate forwards;
}
main.off {
  animation: unset;
}
@keyframes string {
  0% {
    transform: translatex(-70px);
  }
  100% {
    transform: translatex(20px);
  }
}
main .carousel {
  position: absolute;
  height: 500px;
  width: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotatex(-90deg) translatey(-400px) rotatez(var(--rotatez));
  transform-style: preserve-3d;
  animation: spin 7s ease-in-out infinite alternate forwards;
  cursor: pointer;
}
main .carousel.off {
  animation: unset;
}
@keyframes spin {
  0% {
    transform: rotatex(-80deg) rotatey(-5deg) rotatez(0deg);
  }
  100% {
    transform: rotatex(-110deg) rotatey(5deg) rotatez(210deg);
  }
}
main .carousel > div {
  position: absolute;
  width: 200px;
  background: #E4E4E5;
  height: 120px;
  border: 1px solid #fffb;
  object-fit: cover;
  border-radius: 5px;
  transform-style: preserve-3d;
}
main .carousel > div:before {
  content: "";
  height: 3px;
  width: 500px;
  position: absolute;
  top: 0;
  left: -75%;
  background: #d5d5d6;
  background: linear-gradient(to left, #aeaeb0, #d5d5d6);
  transform: scalex(1.75) translatez(-351px) translatey(-250px) rotatey(-90deg) rotatez(90deg);
}
main .carousel > div:after {
  content: "";
  background: #c6ced2;
  background: #d5d5d6;
  background: linear-gradient(to right, #aeaeb0, #d5d5d6);
  position: absolute;
  border-top: 1px solid #fffd;
  top: 0;
  right: 0;
  height: 5px;
  width: 100%;
  transform: translatez(-175px) translatey(0px) rotatey(-90deg) scalex(1.75);
}
main .carousel > div img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 5px;
  backface-visibility: hidden;
}
main .carousel > div:nth-child(1) {
  top: 0;
  transform: translate(0, -50%) rotatex(90deg) translateZ(100px);
}
main .carousel > div:nth-child(1):before {
  border: 2px solid #fffa;
}
main .carousel > div:nth-child(2) {
  bottom: 0;
  transform: translate(0, 50%) rotatex(-90deg) translateZ(100px) scale(-1);
}
main .carousel > div:nth-child(3) {
  left: 0;
  transform: translate(-50%) rotateZ(90deg) rotatex(-90deg) translateZ(100px) scale(-1);
}
main .carousel > div:nth-child(4) {
  right: 0;
  transform: translate(50%) rotateZ(90deg) rotatex(90deg) translateZ(100px);
}
main .carousel > div:nth-child(5) {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%) rotateZ(-45deg) rotatex(90deg);
}
main .carousel > div:nth-child(6) {
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%) rotateZ(45deg) rotatex(-90deg) scale(-1);
}
main .carousel > div:nth-child(7) {
  bottom: 0;
  right: 0;
  transform: translate(50%, 50%) rotateZ(-45deg) rotatex(-90deg) scale(-1);
}
main .carousel > div:nth-child(8) {
  top: 0;
  right: 0;
  transform: translate(50%, -50%) rotateZ(45deg) rotatex(90deg);
}  
 

Schließen

Die 3D-Animationen gefallen mir sehr gut, nur ist es etwas schwer umzusetzen, nur das Problem hier ist, was ich festgestellt habe das manche, 3D Animationen das Xobor - Forum nicht zulässt oder nicht verarbeitet. Ich weiß nicht, woran das liegt.

Manche gehen, manche nicht. Ich bastele noch ein paar 3D Animationen mit Bildern und für Bilder. Ich hoffe, dass es euch und Wolfgang gefallen wird. Diese werde ich dann hier mit in dem Thema einfügen. Muss ja nicht für jedes 3D extra einen neuen Beitrag posten, hoffe, dass das ok so ist mit den Beiträgen und neue 3D Inspirationen hier einzufügen, was mit Bildern zu tun hat.

Ich hoffe, dass meine Inspiration gut ankommt.

Mit freundlichen Grüßen

Daishi

Daishi

Wolfgang findet das Top!

Antworten

#2 | 3D-Bildergalerie-Alma und ich datum

12.09.2022 13:47 (zuletzt bearbeitet: 13.09.2022 12:04)

Daishi

Informationen anzeigen

Beitr�ge:	387
Registriert seit:	08.01.2022

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

3D-Bildergalerie-Alma und ich

Habe die ganze Nacht bis jetzt daran gesessen und geschrieben.

Ich habe es auf 3 Bilder gemacht. Man könnte es erweitern, aber das würde nicht mehr so schön aussehen. So finde ich es sehr schön, na ja wie gesagt jeder Mensch hat einen anderen Geschmack, es ist eben Geschmacksache.

Diese arbeiten mache ich gerne und es sind ja Ideen und Vorschläge und Gedanken von Wolfgang. Ob ich so nett wäre und für ihn ausgefallene Sachen für Bilder schreiben könnte. Ich kann meinen Ideen freien Lauf lassen, ich hoffe nur, dass meine verrückten Ideen so weit in Ordnung sind und sie ihm gefallen.

Ich verwende für die Ideen meine eigenen Bilder, da im Moment viel geschrieben wird, dass man Bilder aus dem Netz nicht nehmen sollte. Also nicht wundern, ich habe es so gemacht, dass es wie ein Gemälde aussieht, mit Kartoffelfeinstoff.

Dies 3 Gemälde, 3D Bilder sind animiert, wenn man mit der Maus über das liegende Bild fährt, richten sie sich auf.

Ich habe es im Testforum in eigenen Seiten eingebaut und es funktioniert auch da tatenlos. Test-Links habe ich unten mit eingefügt.

Kartoffelfeinstoff:

Hier die Demo:
3D-Bildergalerie-Alma und ich, Rauputz-fein!
Aktualisiert 13.09.2022, 04:15 Uhr

Hier die Demo im Testforum:
3D-Bildergalerie-Alma und ich!

Hier der HTML - Code:

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
 
<h1>3D-Bildergalerie-Alma und ich</h1>
<div class="wrapper">
  <!-- canvas 1 -->
  <div class="canvas animate-in">
    <b class="front"><img src="https://i.ibb.co/566Kz9x/IMG-20220728-194132.jpg" /></b>
    <b class="bottom"><img src="https://i.ibb.co/566Kz9x/IMG-20220728-194132.jpg" /></b>
    <b class="left"><img src="https://i.ibb.co/566Kz9x/IMG-20220728-194132.jpg" /></b>
  </div>
 
  <!-- canvas 2 -->
  <div class="canvas animate-in">
    <b class="front"><img src="https://i.ibb.co/ySX89ft/IMG-20220119-111930.jpg" /></b>
    <b class="bottom"><img src="https://i.ibb.co/ySX89ft/IMG-20220119-111930.jpg" /></b>
    <b class="left"><img src="https://i.ibb.co/ySX89ft/IMG-20220119-111930.jpg" /></b>
  </div>
 
  <!-- canvas 3 -->
  <div class="canvas animate-in">
    <b class="front"><img src="https://i.ibb.co/d7jH8mb/IMG-20220117-115336.jpg" /></b>
    <b class="bottom"><img src="https://i.ibb.co/d7jH8mb/IMG-20220117-115336.jpg" /></b>
    <b class="left"><img src="https://i.ibb.co/d7jH8mb/IMG-20220117-115336.jpg" /></b>
  </div>
</div>
<hr />
<h4>by Daishi Bangladesch <img src="https://i.ibb.co/Jckm3RT/Daishi.png" /> </h4>
 

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 
<script id="rendered-js">
//Animiert die Bilder beim Laden
$('.canvas').each(function (index, el) {
  window.setTimeout(function () {
    $(el).removeClass('animate-in');
  }, 100 * index + 500);
});
//# sourceURL=pen.js
    </script>  
 

Schlie�en

Hier der CSS - Code:

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
 
  /* Sinnloses Styling */
body {
  text-align: center;
  color: #555;
  background-color: #C3C3C3;
}
 
/* Szenen-Wrapper */
.wrapper {
  position: relative;
  perspective: 800;
  perspective-origin: 50% 100px;
  margin-top: 10px;
  padding-left: 100px;
}
 
/* Leinwandhülle */
.canvas {
  position: relative;
  width: 400px;
  height: 500px;
  transform-style: preserve-3d;
  transition: all 500ms ease-in;
  transform: rotateY(20deg) rotateX(60deg) rotateZ(-10deg);
  box-shadow: -40px 80px 80px -10px rgba(0,0,0,0.7), inset 0px 0px 15px rgba(0,0,0,1);
  cursor: pointer;
  margin-right: 30px;
  display: inline-block;
}
 
.canvas:hover {
  transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
  z-index: 5;
}
 
.canvas.animate-in {
  transform: rotateY(30deg) rotateX(88deg) rotateZ(20deg);
}
 
.canvas img {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0.7;
}
 
b {
  position: absolute;
  width: 400px;
  height: 500px;
  display: block;
/* Bildhintergründe für Spezialeffekte, mit Rauhputz-Muster, Rauhfaser und ... */
  background-image: url(https://i.ibb.co/ssNNbdR/Kartoffelfeinstoff.jpg);
  background-size: 100%;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 1);
  font-size: 20px;
  text-align: center;
  line-height: 200px;
  color: rgba(0, 0, 0, 0.5);
  font-family: sans-serif;
  text-transform: uppercase;
  transition: all 1s linear;
  overflow: hidden;
  border-radius: 3px;
}
 
b.left {
  transform: rotateY(270deg) translateX(-1px);
  transform-origin: center left;
  width: 18px;
}
 
b.left img {
  height: 500px;
  opacity: 0.5;
}
 
b.bottom {
  transform: rotateX(90deg) translateY(16px) translateZ(-480px);
  transform-origin: bottom center;
  height: 18px;
}
 
b.bottom img {
  transform: rotateX(180deg);
  width: 100%;
  height: 500px;
  opacity: 0.5;
  left: 0px;
}
 
b.front {
  transform: translateZ(16px);
}
 
b.front img {
  width: 400px;
  height: 500px;
  top: 0px;
  left: 0px;
  position: absolute;
}  
 

Schlie�en

Aktualisiert 13.09.2022, 04:15 Uhr

Ich habe heute Nacht noch einen verrückten Einfall gehabt und habe dieses noch, umgeschrieben. Man kann jetzt auch die Hintergründe der Bilder in Rauputz, Tapeten, Raufaser und so machen.
Dies kann in Zeile 53 in der CSS geändert werden.

Ich wusste jetzt nicht wie das mit den Datenanhängen funktioniert, da die Bilder etwas größer sein müssen wie sonst. Mache ich sie in die Spoiler.

Schlie�en

Aktualisiert 13.09.2022, 04:15 Uhr

Ich hoffe, dass meine Inspiration gut ankommt.

Mit freundlichen Grüßen

Daishi

Daishi

Wolfgang findet das Top!

Antworten

#3 | 3D Lightbox datum

13.09.2022 11:10

Daishi

Informationen anzeigen

Beitr�ge:	387
Registriert seit:	08.01.2022

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

Hier habe ich mir auch etwas einfallen lassen, ist so ähnlich wie eine Light Box Galerie. Beim anklicken der Bilder werden die Bilder hell. Ich hatte zuerst mehrere Bilder gemacht, dass sah grauenhaft aus. Ich habe es nur schlicht gemacht, mit 3 Bildern, so kommt der Effekt meinerseits besser rüber.

Hoffe nur das auch diese Idee und dieserVorschlag hier gut ankommt und es im Wolfgang gefällt.

Ich habe es im Testforum in "Eigenen Seiten" eingebaut und es funktioniert auch da tatenlos.

Demo
3D Lightbox!

Demo testforum
3D Lightbox!

Hier der HTML - Code:

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
 
  <!-- Held Titel -->
<h2 id="heroTitle">3D lightbox</h2>
  <!-- Bilder Container -->
<div class="imageContainer">
  <!-- Hintergrundlinie -->
  <hr id="showCaseBackgroundLine">
  <!-- Bild  a -->
  <div class="image a"></div>
<!-- Bild  b -->
  <div class="image b"></div>
<!-- Bild  c -->
  <div class="image c"></div>
</div>
 
<!-- Javascript -->
<script id="rendered-js" type="module">
//Importieren Sie nur einen Javascript
import $ from "https://cdn.skypack.dev/jquery@3.6.0";
 
$(function () {
  $(".image").on("click", function () {
    if ($(this).hasClass("a")) {
      $(".b").removeClass("activeB");
      $(".c").removeClass("activeC");
      $(this).toggleClass("activeA");
    } else if ($(this).hasClass("b")) {
      $(".a").removeClass("activeA");
      $(".c").removeClass("activeC");
      $(this).toggleClass("activeB");
    } else if ($(this).hasClass("c")) {
      $(".a").removeClass("activeA");
      $(".b").removeClass("activeB");
      $(this).toggleClass("activeC");
    }
  });
});
//# sourceURL=pen.js
    </script>
  
 

Schlie�en

Hier der CSS - Code:

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
 
  /* Sinnloses Styling */
body {
  background-color: #212121;
}
/* Held Titel */
#heroTitle {
  margin-top:30vh;
  background-image: linear-gradient(45deg, #d5e9f8, #72bff5);
 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  margin-top: 60px;
  color: white;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 9px;
}
/* Hintergrundlinie */
#showCaseBackgroundLine{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:90vw;
   border: 0;
    height: 3px;
    border-radius: 50%;
    background-image: linear-gradient(to right, rgb(143 205 185 / 0%), rgb(170 231 244 / 75%), rgba(0, 0, 0, 0));
}
/* Bilder Container */
.imageContainer {
  position:relative;
  display: flex;
  justify-content: center;
  perspective: 600px;
}
/* Bilder */
.image {
  box-shadow: 3px 3px 12px #141414, 0 0 200px rgba(0,0,0,0.9) inset;
  width: 200px;
  transition: all 0.72s;
  cursor: pointer;
  border-radius: 6px;
  width: 270px;
  height: 180px;
  background-size: cover;
  background-position: center;
  position:relative;
  perspective:500px;
}
  /* Bild  a */
.a {
  transform: rotateY(42deg);
  background-image: url(https://i.ibb.co/566Kz9x/IMG-20220728-194132.jpg);
}
/* Bild  b */
.b {
  transform: translateZ(-70px);
  background-image: url(https://i.ibb.co/ySX89ft/IMG-20220119-111930.jpg);
}
/* Bild  c */
.c {
  transform: rotateY(-42deg);
  background-image: url(https://i.ibb.co/d7jH8mb/IMG-20220117-115336.jpg);
}
/* Bild Klick A */
.activeA {
  box-shadow: 3px 3px 12px #141414;
  transform: translateX(100%) translateZ(200px);
  z-index: 2;
  border: 3px solid white;
  border-radius: 12px;
}
/* Bild Klick B */
.activeB {
  box-shadow: 3px 3px 12px #141414;
  transform: translateZ(200px);
  z-index: 2;
  border: 3px solid white;
  border-radius: 12px;
}
/* Bild Klick C */
.activeC {
  box-shadow: 3px 3px 12px #141414;
  transform: translateX(-100%) translateZ(200px);
  z-index: 2;
  border: 3px solid white;
  border-radius: 12px;
}
  
 

Schlie�en

Ich hoffe, dass meine Inspiration gut ankommt.

Mit freundlichen Grüßen

Daishi

Daishi

Wolfgang findet das Top!

Antworten

#4 | Habe hierfür noch keinen Namen datum

13.09.2022 11:32 (zuletzt bearbeitet: 16.09.2022 19:44)

Daishi

Informationen anzeigen

Beitr�ge:	387
Registriert seit:	08.01.2022

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

Das hier war auch eine verrückte Idee, so eine Art Blitz-Idee. Ich weiß nicht, ob es Wolfgang gefällt, ich dachte mir einfach, das könnte gut in sein Forum passen, im Portal oder im Forum. Ich würde sagen, ich wollte mit meiner Idee das Forum etwas aufmotzen.
Wie gesagt es ist alles Geschmacksache, ich habe ja jetzt meine Ideen freien Lauf gelassen.

Es war nur eine Idee, mit dem Skript das Forum aufpimpen. Ich denke, von meiner Seite passt es gut zu Wolfgangs Style.

Wolfgang, ich hoffe, alle diese Ideen gefallen dir, und ich habe all diese Arbeiten gerne getan.

Leider bekomme ich diese eine Idee nicht im Xobor - Forum zum Laufen, nicht mal in den eigenen Seiten.

Hier die Demonstration:
Arbeit ohne Name!

Hier mal der HTML - Code

1
 
  <div>Forum - Der Treffpunkt für Hilfe, Tricks & Tipps</div>

Schlie�en

Hier der CSS - Code

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
 
  * {
  box-sizing: border-box;
}
 
html,
body {
  margin: 0 auto;
  height: 100%;
}
 
body {
  display: flex;
  align-items: center;
  font-family: monospace;
  justify-content: center;
  background-color: #1d212b;
}
 
div {
  position: relative;
  width: 30vw;
  height: 30vw;
  line-height: 30vw;
  text-align: center;
  color: #252B37;
  background-color: #151823;
  animation: textColor 10s ease infinite;
}
div:after {
  position: absolute;
  content: "";
  top: 5vw;
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.75);
  -webkit-filter: blur(5vw);
  background: linear-gradient(270deg, #0fffc1, #7e0fff);
  background-size: 200% 200%;
  animation: animateGlow 10s ease infinite;
}
@keyframes animateGlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes textColor {
  0% {
    color: #7e0fff;
  }
  50% {
    color: #0fffc1;
  }
  100% {
    color: #7e0fff;
  }
}  
 

Schlie�en

Ich hoffe, dass meine Inspiration gut ankommt.

Mit freundlichen Grüßen

Daishi

Daishi

Wolfgang findet das Top!

Antworten

#5 | 3D Karussell datum

01.10.2022 04:52

Wolfgang

Administrator

Informationen anzeigen

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

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

3D Decken - Karussell

Hallo Daishi,
das 3D Karussell aus Beitrag #1 weist einen interessanten Effekt auf.
Die Richtung der Rotations in der Vertikalen ist auch etwas Besonders!
Ist aber als Lightshow mit Foren-Codes im Forum kaum umzusetzen, weil bei Abweichungen von Anzahl und Größe der Bilder, viele Komponenten geändert werden müssen!
Das Skript ist gut geeignet für eine feste Bildershow auf "Eigene Seiten"!
Ich habe die senkrechte Stange ausgeblendet, weil sie doch ziemlich viel Platz in Anspruch nimmt!
Zusätzlich habe ich das Karussell und die Bilder vergrößert!
Es war noch ein kleiner Fehler im Skript, der letzte Div-Container war nicht abgeschlossen, es fehlte ein "</div"!

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
 
<style>
:root {
  --rotatez: 0deg;
}
 
body {
  margin: 0;
  perspective: 2000px;
  font-family: "Baloo 2";
  overflow: hidden;
}
/* ---------- Hintergrund  ---------- */
.background {
  position: absolute;
  width: 120vw;
  height: 120vh;
  top: -10vh;
  left: -10vw;
  background: radial-gradient(circle, #fff 0%, #aeaeb0 70%);
  transform: translatez(-400px);
  overflow: hidden;
}
.background h1 {
  color: #000a;
  position: absolute;
  font-size: 20px;
  margin: 0;
  top: 0px;
  left: 8px;
}
 
/* ---------- 3D Decken - Karusell  ---------- */
main {
  margin:100px 0   0 250px;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  animation: string 8s ease-in-out infinite alternate forwards;
}
main.off {
  animation: unset;
}
main .carousel {
  position: absolute;
  height: 600px;
  width: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotatex(-90deg) translatey(-400px) rotatez(var(--rotatez));
  transform-style: preserve-3d;
  animation: spin 8s ease-in-out infinite alternate forwards;
  cursor: pointer;
}
main .carousel.off {
  animation: unset;
}
@keyframes spin {
  0% {
    transform: rotatex(-80deg) rotatey(-5deg) rotatez(0deg);
  }
  100% {
    transform: rotatex(-110deg) rotatey(5deg) rotatez(210deg);
  }
}
main .carousel > div {
  width: 300px;
  height: 400px;
  position: absolute;
  background: #E4E4E5;
  border: 1px solid #fffb;
  object-fit: cover;
  border-radius: 5px;
  transform-style: preserve-3d;
}
main .carousel > div:after {
  content: "";
  background: #c6ced2;
  background: #d5d5d6;
  background: linear-gradient(to right, #aeaeb0, #d5d5d6);
  position: absolute;
  border-top: 1px solid #fffd;
  top: 0;
  right: 0;
  height: 5px;
  width: 100%;
  transform: translatez(-265px) translatey(0px) rotatey(-90deg) scalex(1.75);
}
main .carousel > div img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 5px;
  backface-visibility: hidden;
}
main .carousel > div:nth-child(1) {
  top: 0;
  transform: translate(0, -50%) rotatex(90deg) translateZ(100px);
}
main .carousel > div:nth-child(1):before {
  border: 2px solid #fffa;
}
main .carousel > div:nth-child(2) {
  bottom: 0;
  transform: translate(0, 50%) rotatex(-90deg) translateZ(100px) scale(-1);
}
main .carousel > div:nth-child(3) {
  left: 0;
  transform: translate(-50%) rotateZ(90deg) rotatex(-90deg) translateZ(100px) scale(-1);
}
main .carousel > div:nth-child(4) {
  right: 0;
  transform: translate(50%) rotateZ(90deg) rotatex(90deg) translateZ(100px);
}
main .carousel > div:nth-child(5) {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%) rotateZ(-45deg) rotatex(90deg);
}
main .carousel > div:nth-child(6) {
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%) rotateZ(45deg) rotatex(-90deg) scale(-1);
}
main .carousel > div:nth-child(7) {
  bottom: 0;
  right: 0;
  transform: translate(50%, 50%) rotateZ(-45deg) rotatex(-90deg) scale(-1);
}
main .carousel > div:nth-child(8) {
  top: 0;
  right: 0;
  transform: translate(50%, -50%) rotateZ(45deg) rotatex(90deg);
}  
</style>
 

<div class="background">
  <h1>Klicken Sie auf das 3D-Karusell</h1>
</div>
 
<main>
  <div class="carousel" onclick="onClick()" onmousemove="onMouseMove(event)">
 
      <!---------- Die Bilder  ------------>
    <div>  
      <img src="https://files.homepagemodules.de/b104774/pictures_u18_dbba29.jpg" />
    </div>
    <div>
      <img src="https://files.homepagemodules.de/b104774/pictures_u15_1df782.jpg" />
    </div>
    <div>
      <img src="https://files.homepagemodules.de/b104774/pictures_u335_431abc.jpg" />
    </div>
    <div>
      <img src="https://files.homepagemodules.de/b104774/pictures_u334_e8bed2.jpg" />
    </div>
    <div>
      <img src="https://files.homepagemodules.de/b104774/pictures_u235_fc7184.jpg" />
    </div>
    <div>
      <img src="https://files.homepagemodules.de/b104774/pictures_u75_e76e69.jpg" />
    </div>
    <div>
      <img src="https://files.homepagemodules.de/b104774/pictures_u66_ad2afa.jpg" />
    </div>
    <div>
      <img src="https://files.homepagemodules.de/b104774/pictures_u73_01d147.jpg" />
    </div>
	
	
	</div>
</main>
 

<!---------- Javascript  ------------>
  
<script>
let gIsDrugging = false;
 
function onClick() {
  if (!gIsDrugging) {
    document.querySelector(".carousel").classList.add("off");
    document.querySelector("main").classList.add("off");
  } else {
    document.querySelector(".carousel").classList.remove("off");
    document.querySelector("main").classList.remove("off");
  }
  gIsDrugging = !gIsDrugging;
}
 
function onMouseMove(ev) {
  ev.preventDefault();
  if (!gIsDrugging) return;
  console.log("mouse move");
  const elCarousel = document.querySelector(".carousel");
  const { movementX } = ev;
  const nextPosition =
  +getValue("--rotatez").replace("deg", "") + movementX / 4 || 0;
  setValue("--rotatez", nextPosition + "deg");
}
 
function getValue(varName) {
  const elBox = document.querySelector(":root");
  var boxStyle = getComputedStyle(elBox);
  return boxStyle.getPropertyValue(varName);
}
 
function setValue(varName, value) {
  const elBox = document.querySelector(":root");
  elBox.style.setProperty(varName, value);
}
//# sourceURL=pen.js
</script>  
 

Schlie�en

Bis dann

Wolfgang

Daishi findet das Top!

Antworten

#6 | 3D Bildergalerie für Forum-Beiträge datum

03.10.2022 22:26 (zuletzt bearbeitet: 20.05.2024 21:56)

Wolfgang

Administrator

Informationen anzeigen

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

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

3D Bildergalerie für Forum-Beiträge
Aktualisiert 20.5.2024, 21:40:28

Hallo DaishiDie 3D Bildergalerie aus Beitrag #3 hat super ansprechende Effekte, die ich so noch nicht gesehen habe.

Habe es im Forum umzusetzen können, hat ganz schön gedauert bis etwas Vernünftiges herauskam!
Vieles war voneinander abhängig. Hat das Eine funktioniert, passte eine andere Einstellung nicht mehr!
Nach wie vor faszinierend, was man allein über die CSS machen kann!

Zu Deinem Skript:

Ich habe keine Fehler feststellen können!
Im HTML-Editor oder auf "Eigene Seiten" läuft es ansehnlich gut!
Ich habe eine Verlinkung vermisst, lässt sich aber ohne weiteres nachbauen!
Die Hintergründe und Transparenz nehmen die Schärfe des Front-Bildes, passt nicht bei allen Bildern, lässt sich ändern!
Danke, danke für die klasse Idee und Deine Arbeit!

Was das folgende Skript kann:

Die Bilder können nebeneinander oder untereinander platziert werden, ohne sich zu stören!
Die Größe der Bilder kann beliebig eingestellt werden, empfehlenswert ist es hier einen gleichen Wert für alle Bilder zu wählen!
Die Bilder können nach Belieben verlinkt werden!
Es können so viele Bilder eingetragen werden, wie erforderlich!
Es wird derselbe Foren-Code für jedes weitere Bild benötigt!
Das Template wird nicht verändert!

So sieht die 3D Bildergalerie im Forum aus, hier mit 3 Bildern:

Größe der Bilder: 300 x 300px

Installation für alle Templates & Mobil

Einbau-Anleitung:

3D Bildergalerie komplett in HTML

3D Bildergalerie ins Forum einbauen

Neue Foren Codes für die 3D Bildergalerie

Einbau in die Iconbar + Erklärung

Bis dann und nochmal besten Dank
Wolfgang

Daishi findet das Top!

Antworten

Moderations-Kommentar:

Skript überarbeitet, Hover-Format angepasst!

#7 | 3D Lightbox für Forum Beiträge datum

04.10.2022 06:25

3D Lightbox für Forum Beiträge

Hallo Daishi,
auch die 3D Lightbox aus Beitrag #3 ist etwas Besonderes.
Will man die 3D-Lightshow fürs Forum nutzen, kann sie nicht variabel eingesetzt werden.
Sie kann nur als feste Vorgabe (hier 3 Bilder) verwendet werden!
Bei jedem weiteren Bild oder ein Bild weniger, müsste eine Korrektur der Achsen-Position erfolgen....

Was mir aufgefallen ist:

Ich habe keine Fehler feststellen können!
Im HTML-Editor oder auf "Eigene Seiten" läuft es !
Ich habe auch hier eine Verlinkung vermisst, lässt sich wenn es gebraucht wird, ohne weiteres nachbauen!
Was mir aufgefallen ist, ist die Trägheit der 3D Lightshow!
Ich denke, das liegt an den supergroßen Bildern, die erstmal geladen werden müssen!
Danke, danke für die klasse Idee und Deine Arbeit!

Bis dann und lass es Dir Gut gehen!

Wolfgang

Daishi findet das Top!

Antworten

Laufschriften und Ticker � � Audio-Player fürs Forum

�hnliche Themen

Antworten

Letzter Beitrag

Auswahlmenü Bild-Einstellungen und Bilder verlinken optisch anpassen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

28.05.2023 12:56
von

Wolfgang • Zugriffe: 358

Einfache Light Box Bildergalerie
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi 3 25.06.2023 07:26
Wolfgang • Zugriffe: 495
Video Lightbox Gallery
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi 0 23.07.2022 14:14
Daishi • Zugriffe: 421

Tuning für das Plugin Xobor Lightbox (Diashow) - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

02.07.2021 19:36
von

Wolfgang • Zugriffe: 973

Bilder drehen - In der Bildergalerie & In Beiträgen - Teil 1-5
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 17 05.06.2022 11:39
844er • Zugriffe: 6565

Bilder aus "Datei anhängen" mit einem Klick öffnen & schließen! - Für alle Templates! - Teil 1-4
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang

24.07.2024 11:08
von

Wolfgang • Zugriffe: 2578

Forum-Bilder mit einstellbarer Größe, Tooltipps und Beschreibung ausstatten - Teil 1-3!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

08.06.2022 10:15
von

Wolfgang • Zugriffe: 4628

Abstand zwischen Bildern, Smilies und Wörtern gezielt einstellen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

25.02.2019 20:55
von

Wolfgang • Zugriffe: 1921

Avatar-Bilder fürs Benutzer-Profil
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 2 21.03.2016 16:47
Wolfgang • Zugriffe: 22326

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: 85 €