Support » Allgemeine Fragen » Parallax auf Mobilgeräten

Parallax auf Mobilgeräten

  • eliwood001

    (@eliwood001)


    vor 2 Jahren, 1 Monat

    Hallo zusammen

    Ich bin dabei, meine erste WordPress Website zu erstellen und habe dort einen Parallax-Effekt eingebaut. Ursprünglich verwendete ich dafür einen simplen CSS-Code, den ich im Internet gefunden habe. Nachdem dieser auf Desktop-Geräten einwandfrei funktionierte, auf meinem Handy (Android/Chrome) aber nicht, habe ich erfahren, dass der Block Editor diese Funktion ebenfalls anbietet (Cover-Block mit fixiertem Hintergrundbild). Ich habe es also damit versucht und musste leider feststellen, dass das Problem auch mit dieser Methode besteht. Ich habe zwar online gelesen, dass Parallax auf Mobilgeräten schwierig umsetzbar ist, kann mir aber nicht vorstellen, dass der WordPress Block Editor etwas anbietet, das grundsätzlich nicht einwandfrei funktionieren kann. Deshalb meine Frage: Wisst ihr, woran es liegen könnte bzw. was ich dagegen unternehmen kann? Oder ist das tatsächlich normal und sollte ich auf Parallax-Effekte verzichten?

    Genaue Beschreibung des Problems: Sobald man runterscrollt verändert sich die Grösse des Bildes im Hintergrund. Dies passiert nur einmal und nicht laufend. Wenn man anschliessend aber wieder hochscrollt passiert es erneut. Ansonsten funktionert der Parallax-Effekt jedoch.

    Ich verwende übrigens das Neve-Template.

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Moderator Hans-Gerd Gerhards

    (@hage)

    vor 2 Jahren, 1 Monat

    Hallo,
    wenn du dann noch die URL oben einträgst, dann können wir uns das auch ansehen und dir sicher besser helfen. Lies bitte auch noch mal: Bevor du ein neues Thema (Thread) erstellst.
    Zu dem Thema habe ich vor einiger Zeit einen Beitrag geschrieben. Schau mal bitte, ob das für dich hilfreich ist.
    Viele Grüße
    Hans-Gerd

    Thread-Starter eliwood001

    (@eliwood001)

    vor 2 Jahren, 1 Monat

    Hallo Hans-Gerd,
    vielen Dank für die prompte Antwort! Ich habe mir deinen Beitrag durchgelesen und versucht, das so umzusetzen. Leider ohne Erfolg, was aber daran liegen könnte, dass ich keine CSS-Erfahrung habe und möglicherweise etwas falsch verstanden habe.

    Ich habe nun alles wieder auf den vorherigen Stand gesetzt und die URL in meinem Profil ergänzt. Da sie meinen Namen beinhaltet, würde ich es bevorzugen, sie nicht direkt hier im Beitrag zu veröffentlichen, da dieser bei Bedarf nicht nachträglich editiert werden kann.

    Hier gerne, wie im verlinkten Post beschrieben, der Bericht:

    
### wp-core ###

version: 5.9.1
site_language: en_US
user_language: en_US
timezone: Europe/Zurich
permalink: /%year%/%monthnum%/%day%/%postname%/
https_status: false
multisite: false
user_registration: 0
blog_public: 0
default_comment_status: open
environment_type: production
user_count: 1
dotorg_communication: true

### wp-paths-sizes ###

wordpress_path: /home/***/www/***
wordpress_size: 127.93 MB (134144108 bytes)
uploads_path: /home/***/www/***/wp-content/uploads
uploads_size: 2.96 MB (3101009 bytes)
themes_path: /home/***/www/***/wp-content/themes
themes_size: 14.55 MB (15259404 bytes)
plugins_path: /home/***/www/***/wp-content/plugins
plugins_size: 59.90 MB (62813238 bytes)
database_size: 5.45 MB (5718016 bytes)
total_size: 210.80 MB (221035775 bytes)

### wp-active-theme ###

name: Neve (neve)
version: 3.1.6
author: ThemeIsle
author_website: https://themeisle.com
parent_theme: none
theme_features: core-block-patterns, hfg_support, widgets-block-editor, title-tag, post-thumbnails, automatic-feed-links, custom-logo, html5, customize-selective-refresh-widgets, custom-background, align-wide, editor-color-palette, fl-theme-builder-headers, fl-theme-builder-footers, fl-theme-builder-parts, header-footer-elementor, lifterlms-sidebars, lifterlms, service_worker, starter-content, menus, widgets, themeisle-demo-import
theme_path: /home/***/www/***/wp-content/themes/neve
auto_update: Disabled

### wp-themes-inactive (3) ###

Twenty Twenty: version: 1.9, author: the WordPress team, Auto-updates disabled
Twenty Twenty-One: version: 1.5, author: the WordPress team, Auto-updates disabled
Twenty Twenty-Two: version: 1.0, author: the WordPress team (latest version: 1.1), Auto-updates disabled

### wp-plugins-active (6) ###

Kadence Blocks – Gutenberg Blocks for Page Builder Features: version: 2.2.10, author: Kadence WP, Auto-updates disabled
myStickymenu: version: 2.5.8, author: Premio, Auto-updates disabled
Templates Patterns Collection: version: 1.1.21, author: ThemeIsle, Auto-updates disabled
UpdraftPlus - Backup/Restore: version: 1.22.8, author: UpdraftPlus.Com, DavidAnderson, Auto-updates disabled
WPForms Lite: version: 1.7.2.1, author: WPForms, Auto-updates disabled
WP Maintenance Mode & Coming Soon: version: 2.4.4, author: Themeisle, Auto-updates disabled

### wp-plugins-inactive (3) ###

Akismet Anti-Spam: version: 4.2.2, author: Automattic, Auto-updates disabled
Fixed Widget: version: 6.0.5, author: Thomas Maier, Max Bond, Auto-updates disabled
Hello Dolly: version: 1.7.2, author: Matt Mullenweg, Auto-updates disabled

### wp-media ###

image_editor: WP_Image_Editor_Imagick
imagick_module_version: 1692
imagemagick_version: ImageMagick 6.9.12-34 Q16 amd64 2021-12-22 https://imagemagick.org
imagick_version: 3.5.1
file_uploads: File uploads is turned off
post_max_size: 64M
upload_max_filesize: 64M
max_effective_size: 64 MB
max_file_uploads: 20
imagick_limits:
    imagick::RESOURCETYPE_AREA: 384 GB
    imagick::RESOURCETYPE_DISK: 9.2233720368548E+18
    imagick::RESOURCETYPE_FILE: 1536
    imagick::RESOURCETYPE_MAP: 384 GB
    imagick::RESOURCETYPE_MEMORY: 192 GB
    imagick::RESOURCETYPE_THREAD: 1
imagemagick_file_formats: 3FR, 3G2, 3GP, AAI, AI, APNG, ART, ARW, AVI, AVIF, AVS, BGR, BGRA, BGRO, BIE, BMP, BMP2, BMP3, BRF, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CR3, CRW, CUR, CUT, DATA, DCM, DCR, DCX, DDS, DFONT, DNG, DOT, DPX, DXT1, DXT5, EPDF, EPI, EPS, EPS2, EPS3, EPSF, EPSI, EPT, EPT2, EPT3, ERF, FAX, FILE, FITS, FRACTAL, FTP, FTS, G3, G4, GIF, GIF87, GRADIENT, GRAY, GRAYA, GROUP4, GV, H, HALD, HDR, HEIC, HISTOGRAM, HRZ, HTM, HTML, HTTP, HTTPS, ICB, ICO, ICON, IIQ, INFO, INLINE, IPL, ISOBRL, ISOBRL6, J2C, J2K, JBG, JBIG, JNG, JNX, JP2, JPC, JPE, JPEG, JPG, JPM, JPS, JPT, JSON, K25, KDC, LABEL, M2V, M4V, MAC, MAGICK, MAP, MASK, MAT, MATTE, MEF, MIFF, MKV, MNG, MONO, MOV, MP4, MPC, MPG, MRW, MSL, MSVG, MTV, MVG, NEF, NRW, NULL, ORF, OTB, OTF, PAL, PALM, PAM, PANGO, PATTERN, PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PDFA, PEF, PES, PFA, PFB, PFM, PGM, PGX, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG00, PNG24, PNG32, PNG48, PNG64, PNG8, PNM, POCKETMOD, PPM, PREVIEW, PS, PS2, PS3, PSB, PSD, PTIF, PWP, RADIAL-GRADIENT, RAF, RAS, RAW, RGB, RGBA, RGBO, RGF, RLA, RLE, RMF, RW2, SCR, SCT, SFW, SGI, SHTML, SIX, SIXEL, SPARSE-COLOR, SR2, SRF, STEGANO, SUN, SVG, SVGZ, TEXT, TGA, THUMBNAIL, TIFF, TIFF64, TILE, TIM, TTC, TTF, TXT, UBRL, UBRL6, UIL, UYVY, VDA, VICAR, VID, VIDEO, VIFF, VIPS, VST, WBMP, WEBM, WEBP, WMF, WMV, WMZ, WPG, X3F, XBM, XC, XCF, XPM, XPS, XV, YCbCr, YCbCrA, YUV
gd_version: 2.3.1
gd_formats: GIF, JPEG, PNG, WebP, BMP
ghostscript_version: 9.52

### wp-server ###

server_architecture: FreeBSD 12.3-RELEASE-p1 amd64
httpd_software: Apache
php_version: 7.4.28 64bit
php_sapi: cgi-fcgi
max_input_variables: 1000
time_limit: 30
memory_limit: 256M
max_input_time: 60
upload_max_filesize: 64M
php_post_max_size: 64M
curl_version: 7.80.0 OpenSSL/1.1.1m
suhosin: false
imagick_availability: true
pretty_permalinks: true
htaccess_extra_rules: false

### wp-database ###

extension: mysqli
server_version: 10.3.34-MariaDB-log
client_version: mysqlnd 7.4.28
max_allowed_packet: 16777216
max_connections: 400

### wp-constants ###

WP_HOME: undefined
WP_SITEURL: undefined
WP_CONTENT_DIR: /home/***/www/***/wp-content
WP_PLUGIN_DIR: /home/***/www/***/wp-content/plugins
WP_MEMORY_LIMIT: 40M
WP_MAX_MEMORY_LIMIT: 256M
WP_DEBUG: false
WP_DEBUG_DISPLAY: true
WP_DEBUG_LOG: false
SCRIPT_DEBUG: false
WP_CACHE: false
CONCATENATE_SCRIPTS: undefined
COMPRESS_SCRIPTS: undefined
COMPRESS_CSS: undefined
WP_ENVIRONMENT_TYPE: Undefined
DB_CHARSET: utf8mb4
DB_COLLATE: undefined

### wp-filesystem ###

wordpress: writable
wp-content: writable
uploads: writable
plugins: writable
themes: writable

### neve ###

api: Yes
child: No
customizer_css:
.parallax {
background-image: url("http://***/wp-content/uploads/2022/03/parallax.jpg");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}
 
.parallax-content {
width:50%;
margin:0 auto;
color:#FFF;
padding-top:250px;
    padding-bottom:250px;
}

### wpforms ###

version: 1.7.2.1
lite: Mar 1, 2022 @ 5:26pm
upload_dir: Writable
db_tables: wp_wpforms_tasks_meta
total_forms: 1
total_submissions: undefined
    Moderator Bego Mario Garde

    (@pixolin)

    vor 2 Jahren, 1 Monat

    … und die URL in meinem Profil ergänzt.

    Und da sollen wir jetzt jedesmal in dein Profil sehen, um rauszufinden, an welcher Website du arbeitest? Was ist, wenn du eine zweite, dritte … zwölfte WordPress-Installation hast?

    Manche Teilnehmer machen es einem unnötig schwer, zu helfen.

    Thread-Starter eliwood001

    (@eliwood001)

    vor 2 Jahren, 1 Monat

    Auch wenn ich hier der Hilfesuchende bin: Das geht auch ein bisschen konstruktiver, nicht? Ich habe meinen Grund genannt und wenn dieser eine zusätzliche Klick das Ganze so unglaublich erschwert, dann schaue ich halt sonst irgendwie weiter. Die URL habe ich soeben wieder entfernt und die Sache ist abgehakt (auf „Gelöst“ setze ich den Thread jetzt bewusst nicht).

    Moderator Bego Mario Garde

    (@pixolin)

    vor 2 Jahren, 1 Monat

    Thread geschlossen.

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Das Thema „Parallax auf Mobilgeräten“ ist für neue Antworten geschlossen.

Themen-Schlagwörter

Ansichten