zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Logo animeren - für Anfänger

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.06.2018, 22:30
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard Logo animeren - für Anfänger

Hallo
Habe noch sehr wenig Ahnung von HTML und CSS und möchte auf einer responsive Website ein Logo animieren. ( Möglichst einfach !)
Das Logo soll sich entweder irgendwie wellenartig bewegen, drehen oder ähnlich Aufmerksamkeit auf sich ziehen.

Kann mir jemand helfen welche tags ich in HTML und/oder CSS an welcher Stelle einfügen muss?

Vielen lieben Dank schonmal
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.06.2018, 08:42
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.928
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Da musste du schon ein bischen Informationen sammeln, es gibt dutzende Möglichkeiten von Animationen und so allgemein wie du es beschreibst, läßt sich so eine Frage nicht beantworten.

Zumal du in der Javascript Abteilung die Frage stellst, aber in deiner Frage davon nicht die Rede ist, damit schaffst du noch mehr Verwirrung.

Ich kann dir ein paar Seiten zeigen, wo erklärt wird wie man CSS Animationen erstellt. Diese finden sich aber auch leicht mit einer Suchmaschine. Besser wäre es, wenn du uns zeigst was du schon versucht hast damit wir dir daran zeigen können ob und was du falsch machst. Oder, du musst deutlich konkreter werden welche Art von Animation du dir vorstellst. Es wäre aber auch da sinnvoll, wenn du erst mal dir ein paar Beispiele im Internet anschaust, da dort die Technik wesentlich besser erklärt wird, als wir das hier können. Wir können dir aber dann gut helfen, wenn du irgendwelche konkrete Probleme beim umsetzen hast.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.06.2018, 20:22
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard

habe mir so etwas vorgestellt wie die Buttons ( Printdesign, Corporate Design, Webdesign) auf dieser Seite:

https://www.kraehativ-design.de/#leistungen

Die hüpfen oder bewegen sich etwas wenn man mit der Maus draufgeht.
Habe meine Frage im Javaforum gestellt, da ich dachte für so etwas wäre Javascript nötig

Soll ich den HTML und CSS Code für die Seite auf der das Logo animiert werden soll mal mit hochladen?
Mit Zitat antworten
  #4 (permalink)  
Alt 04.06.2018, 22:01
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.928
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von sabrina79 Beitrag anzeigen
habe mir so etwas vorgestellt wie die Buttons ( Printdesign, Corporate Design, Webdesign) auf dieser Seite:

https://www.kraehativ-design.de/#leistungen
Die Animation ist mit CSS, wird aber mit Javascript gestartet, was nicht notwendig wäre.


Zitat:
Zitat von sabrina79 Beitrag anzeigen
Soll ich den HTML und CSS Code für die Seite auf der das Logo animiert werden soll mal mit hochladen?
Nee, so geht das nicht. Wenn du rausgefunden hast, was du willst musst du versuchen es umzusetzen und wenn du Fragen hast helfen wir dir weiter. Aber eine "Auftragsarbeit" kannst du hier nicht erwarten.

Ich habe aber mal den Code der Animation des Kreises aus der Seite kopiert (weil es mich auch interessiert, ich habe noch nicht soviel mit keyframes gemacht):

HTML-Code:
<style type="text/css">
@keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.cv-icon-container:hover {
  animation-name: rubberBand;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.cv-icon-container {
    background-color: #F3F3F3;
    position: relative;
    margin: 0px auto 30px;
    text-align: center;
    border-radius: 100%;
    width: 120px;
    height: 120px;
}
</style>

<div class="cv-icon-container"></div>
Weiter Infos dazu findest du z.b. hier

https://www.mediaevent.de/css/animation.html
https://wiki.selfhtml.org/wiki/CSS/E...tion/animation
Mit Zitat antworten
  #5 (permalink)  
Alt 04.06.2018, 22:11
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard

Ok... vielen Dank. Werde mich da mal umsehen.
Blicke da momentan noch überhaupt nicht durch.
Mit Zitat antworten
  #6 (permalink)  
Alt 04.06.2018, 22:26
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.928
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Ehrlich gesagt ist das auch nciht ganz einfach. Ich hab das jetzt auch nur kopiert und grundsätzlich gehört da auch noch ein bisschen Wissen über diverse Dinge dazu. Neben HTML und CSS (Fortgeschritten), muss man auch Wissen wie Animation aufgebaut sind, z.b. was eine transition ist (https://wiki.selfhtml.org/wiki/CSS/E...ion/transition)

Wobei in dem Fall eine etwas komplexere CSS Eigenschaft wirkt (https://wiki.selfhtml.org/wiki/CSS/E...mationen/scale)

Der ganze Code kann auch noch gekürzt werden, hilft vielleicht für's Verständnis:
HTML-Code:
<style type="text/css">
@keyframes rubberBand {
  0% {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, .95, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

.cv-icon-container:hover {
  animation-name: rubberBand;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.cv-icon-container {
    background-color: #F3F3F3;
    position: relative;
    border-radius: 100%;
    width: 120px;
    height: 120px;
}
</style>

<div class="cv-icon-container"></div>
Mit Zitat antworten
  #7 (permalink)  
Alt 04.06.2018, 23:24
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard

bringt ja auch nichts wenn ich das einfach reinkopiere und gar nicht verstehe was ich da tue !
Werde mich erst mal in die Grundlagen einarbeiten.
Vielen Dank für die links und die Mühe!
Mit Zitat antworten
Antwort

Stichwörter
animation, java, logo

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Logo rechts unten in Header (Header hat bg-img) cordi CSS 2 29.05.2017 15:21
Anfänger: Positionierung. xam CSS 3 19.05.2012 15:18
Boxen von Navigation und Logo sind zu weit auseinander lila_3 CSS 2 04.09.2009 00:28
[print.css] Logo drucken auch bei deaktivierten Hintergrundbildern? Rayne CSS 5 01.11.2008 17:03
CSS Anfänger mit Anlaufschwierigkeiten mit Rahmen um 3 DIV's NSprenger CSS 15 22.12.2005 15:40


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:18 Uhr.