Bevor du im Steam shop zuschlägst, würde ich immer empfehlen erst noch einmal einen blick in seriöse game-key shops zu werfen. u.A. bei www.mmoga.de oder www.g2a.com gibt es dort dann oft den gewünschten titel ein weniger billiger.

Wenn es sich im steam-keys handelt, kannst du sie dann ganz einfach per steam einlösen und hast sie in der bibliothek.

...zur Antwort

Ich würde dir vorschlagen erstmal noch ein bisschen Berufserfahrung zu sammeln, auch wenn du früh angefangen hast. Zum modernen Webdesign/Webentwicklung gehört mehr als das, was sich selbst in der Zeit beibringen kann. Allein Collaboration-Tools und techniken wirst du doch z.b. garnicht kennengelernt haben, wenn du bisher eher autodidaktisch in deiner Freizeit mit der Materie beschaftigt warst.

Es gäbe doch fur dich die Möglichkeit erst einmal in einer Agentur zu arbeiten oder ggf. auch dort einen praxisnahen Ausbildungsberuf zu erlenen.

Zudem kannst du dir bei der Wahl der Agentur ja sogar schonmal grob aussuchen, in welche Richtung es für dich weitergehen könnte. Bei freelance/selbstständigkeit wirst du zunächst auf jeden auftrag angewiesen sein und musst ggf. auch projekte annehmen, die dir vielleicht sogar garnicht liegen, zum umfangreich sind oder dir nicht gefallen.

...zur Antwort

Mein all-time klickibunti favorite ist https://lingscars.com

...zur Antwort

Das nennt sich "lazy loading" und wie du schon gut erkannt hast ist das in vielen Fällen auch keine werbung,- sondern nachgeladene Inhalte wie z.b. Bilder die nicht direkt im ersten sichtbaren Bereich liegen.

Ein gezielter Klickbait ist das eher nicht, es ist aber auch eine sehr wichtige Technik geworden für die Optimierung von Ladegeschwindigkeiten - vor allem bei Mobilgeräten.

Ansonsten müsste dein armes Handy teilweise mit schlechter 3g (oder langsamer) minutenlang alle Bilder der Seite runterladen, bevor überhaupt die ersten Inhalte angezeigt werden - unpraktisch und nervend.

Per Lazy Loading erreichst du die Seite schneller - und Bilder werden erst geladen, sobald du in die Nähe der Bereiche scrollst. Das spart teilweise extrem viele Anfragen und Datenvolumen, nervt aber natürlich etwas in deiner User-experience wenn es nicht perfekt integriert wurde.

...zur Antwort
Bootstrap

Ich nutze cas frameworks, weil ich für bestimmte Elemente und layouts das rad nicht neu erfinden möchte. Das kostet Zeit und somit auch Geld.

Custom styles lege ich natürlich trotzdem noch an um nicht alles beim default-look zu lassen. Da helfen aber auch schon diverse bootstrap generatoren.

Warum bootstrap und nich foundation o.ä?

Bootstrap war so das große gehypte ding, als ich mich das letzte mal auf die suche nach css/js frameworks gemacht hab. Seitdem bleibe ich dabei - warum sollte man auch alle klassen etc. neu lernen?

Vor allem der Umstieg auf flexbox im grid zur version 4 war ein weiterer grund erstmal bei bootstrap zu bleiben.

...zur Antwort

Ja, wordpress hat ein eigenes image-processing und generiert verkleinerte versionen. Wenn du das Bild per pagebuilder bzw. Mediathek in den content einfügst, solltest du im fenster rechts (wo auch bild-url etc steht) eine Auswahl der Bildgröße haben. "Mittel" ist bei dir vermutlich standard.

Wähle dort einfach "Originalgröße" und dann "Bild einfügen"

...zur Antwort

Contenido eventuell.

...zur Antwort
HTML - Image Shake/ Beat-Bass Effekt?

Hi,

vielleicht kann ja jemand schnell helfen oder hat mal was ähnliches gemacht.

Ich würde gerne ein Bild auf einer Webseite "animieren", nur via HTML, CSS oder JS.

Was ich bereits gefunden habe:

img:hover {

  /* Start the shake animation and make the animation last for 0.5 seconds /

 animation: shake 0.5s;

  /* When the animation is finished, start again /

  animation-iteration-count: infinite;

}

@keyframes shake {

 0% { transform: translate(1px, 1px) rotate(0deg); }

  10% { transform: translate(-1px, -2px) rotate(-1deg); }

  20% { transform: translate(-3px, 0px) rotate(1deg); }

 30% { transform: translate(3px, 2px) rotate(0deg); }

 40% { transform: translate(1px, -1px) rotate(1deg); }

 50% { transform: translate(-1px, 2px) rotate(-1deg); }

 60% { transform: translate(-3px, 1px) rotate(0deg); }

 70% { transform: translate(3px, 1px) rotate(-1deg); }

 80% { transform: translate(-1px, -1px) rotate(1deg); }

 90% { transform: translate(1px, 2px) rotate(0deg); }

 100% { transform: translate(1px, -2px) rotate(-1deg); }

}

Das passt jedoch nicht so ganz, weil es überhaupt nicht so aussieht wie ein Bass/Beat Effekt. Ich möchte das ganze halt so einrichten, das wenn man die Webseite besucht, das Logo für 3-5 Sekunden einen leichten Bass/Beat Effekt "nachahmt/animiert", während im Hintergrund eine Melodie läuft.

Vllt ist einfach nur der Befehl " animation: shake 0.5s;" supoptimal?!?! Kennt sich jjemand aus?



...zum Beitrag

Schau ggf. mal bei animate.css rein:

https://daneden.github.io/animate.css/

Ich denke heartbeat ist ungefähr was du suchst. Öffne einfach animate.css und kopier dir die passenden klassen und animation-keyframes raus.

rumspielen mit einzelnen keyframe-propertys kannst du immernoch, sofern du dich damit etwas auseinandersetzt.

...zur Antwort

Das JS dürftest du eigentlich rausschmeißen und dein Vorhaben mit

position:sticky; top:0;

umsetzen können.

...zur Antwort

Was du suchst, nennt sich i.d.R. tooltip.

Du findest dazu gute beispiele auf codepen. Ich würde dir eine reine html-css Lösung anbieten, wenn du bei wordpress.com nur eingeschränkten Zugriff zum Theme haben solltest.

https://codepen.io/deanelliott/pen/LYVZBJy

Schau dir einfach mal an, wie das hier in HTML umgesetzt wurde und übernimm dir nötigen styles zu data-tooltip per custom-css in dein wordpress. (View compiled css)

...zur Antwort

DNS Update deines internetproviders hängt wahrscheinlich hinterhert. Versuch am pc mal per google dns 8.8.8.8 - das ist häufig aktueller.

...zur Antwort

du kannst auch das <button> element dafür nehmen

...zur Antwort

jquery VOR deinem script eingebunden?

...zur Antwort

Da gibt es eine Menge jQuery Lösungen mit Dokumentation. Einer meiner Favoriten: http://unitegallery.net/

...zur Antwort

Wird an sich mit einer CSS-anpassung über den customizer gehen. Hast du den Namen des themes oder einen Link zu deiner Seite für uns?

...zur Antwort

Wie schon erwähnt wurde, ist jQuery wohl am einfachsten dafür.
Das lässt sich bei jsfiddle direkt einbindungen über das Dropdown im JS-Fenster.
Für deine offline-Version solltest du dir dann jQuery runterladen und in der HTML-Datei im Head einbinden.

Die Vegetarier-Button Klick-Funktion besteht ja wie du beschreibst aus mehreren Anweisungen und benötigt warscheinlich folgende jQuery Funktionen:

  • https://api.jquery.com/click/
  • https://api.jquery.com/each/
  • https://api.jquery.com/has/
  • http://api.jquery.com/hide/
  • http://api.jquery.com/prepend/
  • https://api.jquery.com/contains-selector/

Da jQuery mir ziemlich Spaß macht, habe mich mal eben ein paar Minute ran gesetzt:
https://jsfiddle.net/fdqcu3yr/

Deine HTML-Struktur habe ich gelassen wie sie ist, nur JS/jQuery und das CSS für ein Blattsymbol habe ich eingefügt.

----

Die Funktion für den Reset-Button überlasse ich nun dir.
Als Vorlage kannst du aber gut meine Selektoren verwenden.
Du wirst statt .hide dann .show brauchen. Entfernen kannst du mit .remove

...zur Antwort

Was den Google-Pagespeed Test angeht, der ist seit Ende 2018 umgestellt worden auf "lighthouse". (Hattest du die 97% eventuell davor erreicht?)

Der aktuelle Pagespeed-Insight-Test ist um einiges strenger, vor allem bei der mobilen Version - diese wird soweit ich mich erinnere sogar mit einem simulierten 3G-Verbindung getestet, also generell langsamere Ladezeiten in den Ergebnissen.

Es sind auch viele neue Aspekte hinzugekommen. Mit deinen verwendeten Plugins (Autoptimize, Lazyload) hast du an sich schon eine Menge getan, wie @RudiFiedler schon empfohlen würde ich noch ein Cache-Plugin einsetzen. (Ich empfehle "Hummingbird")

Solange du in der Desktopversion beim Pagespeed-Insight-Test an die 95-99 schaffts halte ich das für ausreichend, egal was Google zur mobilen Variante sagt. Das 3G-Throttling halte ich für ne absolute Schnapsidee.

...zur Antwort