Support » Allgemeine Fragen » Parallax auf Mobilgeräten

  • eliwood001

    (@eliwood001)


    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)
  • 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-Ersteller eliwood001

    (@eliwood001)

    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)

    … 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-Ersteller eliwood001

    (@eliwood001)

    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).

    Thread geschlossen.

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