Weitere Informationen und den Download findest du auf der offiziellen Anlaufstelle de.wordpress.org
Ergebnis 1 bis 6 von 6
Like Tree1Likes
  • 1 Post By b3317133

Thema: scrollorama - scroll Efekte in Wordpress nutzen

  1. #1
    PostRank: 0
    Registriert seit
    20.03.2012
    Beiträge
    16

    scrollorama - scroll Efekte in Wordpress nutzen

    Leider habe ich nicht zu diesem Thema finden können,
    der Einsatz von scrollorama (http://johnpolacek.github.io/scrollorama/) schlägt fehl in wordpress. Leider kann ich den Fehler oder Grund dafür nicht finden.


    Folgendes ist eingetragen:


    Das laden der jquery Dateien, diese befinden sich in einem Unterordner des child themes ->

    in der functions.php:

    PHP-Code:
    add_action('wp_enqueue_scripts''load_javascript_files');
    function 
    load_javascript_files() {
            
    wp_enqueue_script'scrollorama'get_template_directory_uri() . 'js/jquery-1.9.1.min.js', array( 'jquery' ));
            
    wp_enqueue_script'scrollorama'get_template_directory_uri() . 'js/jquery.lettering-0.6.1.min.js', array( 'jquery' ));
            
    wp_enqueue_script'scrollorama'get_template_directory_uri() . 'js/jquery.scrollorama.js', array( 'jquery' ));


    z.B. auf einer Seite:
    HTML-Code:
     <div class="scrollblock" id="examples-parallax">
            <h2 id="parallax1">Parallax1</h2>
            <h3 id="parallax2">Parallax2</h3>
            <h3 id="parallax3">Parallax3</h3>
        </div>


    in der header.php
    Code:
        <script>
            $(document).ready(function() {
                var scrollorama = $.scrollorama({ blocks:'.scrollblock' });
                scrollorama
                    .animate('#parallax2',{ delay: 400, duration: 600, property:'top', start:800, end:-800 })
                    .animate('#parallax3',{ delay: 200, duration: 1200, property:'top', start:500, end:-500 });
            });
        </script>

    Exakt die gleiche Konstellation, funktioniert in einer normalen HTML-Seite bestens, dort werden die jquery Dateien nur anders geladen ->


    Einbinden auf einer normalen HTML Seite:
    Code:
    <script src="js/jquery-1.9.1.min.js">
    </script><script src="js/jquery.lettering-0.6.1.min.js"></script>
    <script src="js/jquery.scrollorama.js"></script>
    Es würde mir sehr weiterhelfen, wenn jemand eine Idee hat oder mir sagen kann, welchen Fehler ich hier übersehe.


    Schöne Grüße,


  2. #2
    PostRank: 10 Avatar von b3317133
    Registriert seit
    21.11.2014
    Beiträge
    2.280
    Zitat Zitat von eucomputing Beitrag anzeigen
    ..diese befinden sich in einem Unterordner des child themes ->
    Der Pfad des Child Themes wird über get_stylesheet_directory_uri() ermittelt, get_template_directory_uri() ist der Pfad zum Parent Theme.

    Am Ende des Pfades ist jeweils ein / anzuhängen, also get_stylesheet_directory_uri() . '/js/jquery...

    Beim JavaScript Code würde ich jQuery(document).ready(function($) { statt $(document).ready(function() { empfehlen.
    Geändert von b3317133 (11.01.2018 um 11:39 Uhr) Grund: Ergänzung JavaScript Code
    Marcus[IS] likes this.

  3. #3
    PostRank: 10
    Registriert seit
    28.07.2011
    Beiträge
    1.669
    … und ergänzend: wenn du das Skript richtigerweise über enqueue_script() lädst, fügst du keinen script-Block mehr in die header.php ein, sondern du legst beim Aufruf mit enqueue_script() fest, ob das script im Header oder im Footer geladen wird.
    Bitte nochmal im Codex nachlesen, wie enqueue_script() richtig eingesetzt wird.

    Gruß
    helix

  4. #4
    PostRank: 10 Avatar von b3317133
    Registriert seit
    21.11.2014
    Beiträge
    2.280
    Zu den wp_enqueue_script() Aufrufen noch:

    1. jQuery wird automatisch von WordPress geladen, wenn 'jquery' als dependency angegeben wird, der erste Aufruf fällt also weg.
    2. Das handle sollte bei jeder Datei unterschiedlich sein.
    3. Die Ladereihenfolge macht WordPress (oder Cache-Plugins usw.) vom Parameter $deps (dependencies) abhängig, das sollte man dort beachten.

    Eine korrigierte Version des og. Codes wäre also z.B. sowas hier:
    PHP-Code:
    function load_javascript_files() {
        
    wp_enqueue_script'lettering'get_stylesheet_directory_uri() . '/js/jquery.lettering-0.6.1.min.js', array( 'jquery' ), '0.6.1' );
        
    wp_enqueue_script'scrollorama'get_stylesheet_directory_uri() . '/js/jquery.scrollorama.js', array( 'jquery''lettering' ), '1.0' );


  5. #5
    PostRank: 0
    Registriert seit
    20.03.2012
    Beiträge
    16
    Vielen Dank für den guten Tipp.

  6. #6
    PostRank: 0
    Registriert seit
    20.03.2012
    Beiträge
    16
    Ich werde es wie beschrieben versuchen und mich hoffentlich mit Erfolg zurückmelden.


    Danke für die Hilfe.

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •