Eredmény: 1 - 4 (4) összesen

Téma: Oldal görgetésével forgó lap teteje gomb

  1. #1
    Plk
    Plk nem elérhető
    kakaó Plk logója
    Csatlakozott
    10-05-07
    Hely
    Farkashegy
    Hozzászólás
    268
    Begyűjtött 50 köszönetet
    32 hozzászólásával

    Alapbeállítás Oldal görgetésével forgó lap teteje gomb

    Segítséget kérnék. Próbáltam a található mintákat összerakni, nem nagy sikerrel. Rángatódzik, de nem forog. (Ütögettem, nem indul el.)

    Ez, ami nem jó:

    Kód:
    jQuery( document ).ready(function($){
    var offset = 666,
        speed = 999,
        duration = 500,
        scrollButton = $('#top'); 
    $( window ).scroll( function() {
      if ( $( this ).scrollTop() < offset) {
        scrollButton.fadeOut( duration );
      } else {
        scrollButton.fadeIn( duration );
      }
    var theta = $(window).scrollTop() / 10 % Math.PI;
    $('#top').css({ transform: 'rotate(' + theta + 'rad)' });
     }); 
        scrollButton.on( 'click', function(e){
        e.preventDefault();
        $( 'html, body' ).animate({
        scrollTop: 0
        }, speed);
     });
    });
    Nagyon nem értek hozzá, köszönöm a segítséget



  2. #2
    Adminisztrátor BagiZoli logója
    Csatlakozott
    07-04-26
    Hely
    8200, Királynék városa
    Hozzászólás
    3.851
    Begyűjtött 317 köszönetet
    151 hozzászólásával

    Alapbeállítás re: Oldal görgetésével forgó lap teteje gomb

    HTML kóddal ha kiegészíted, akkor meg tudom nézni élőben egy böngészőben.



  3. Az alábbi felhasználók hálásak a válaszért:

    Plk (2019-05-16)

  4. #3
    Plk
    Plk nem elérhető
    kakaó Plk logója
    Csatlakozott
    10-05-07
    Hely
    Farkashegy
    Hozzászólás
    268
    Begyűjtött 50 köszönetet
    32 hozzászólásával

    Alapbeállítás re: Oldal görgetésével forgó lap teteje gomb

    Köszönöm.

    A görgetéssel forgást codepennél találtam: https://codepen.io/dudleystorey/pen/vHBAE
    Ezt szerettem volna összevegyíteni a lap tetejére gombbal, ami áll egy back-to-top.js fájból:
    Kód:
    jQuery( document ).ready(function($){
      var offset = 661,
          speed = 997,
          duration = 503,
          scrollButton = $('#top');
      $( window ).scroll( function() {
        if ( $( this ).scrollTop() < offset) {
          scrollButton.fadeOut( duration );
        } else {
          scrollButton.fadeIn( duration );
        }
      }); 
      scrollButton.on( 'click', function(e){
        e.preventDefault();
        $( 'html, body' ).animate({
          scrollTop: 0
        }, speed);
      });
    });
    functions.php-ban:
    Kód:
    function themeslug_add_button_script() {
      wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/back-to-top.js', array( 'jquery' ) );
    }
    add_action( 'wp_enqueue_scripts', 'themeslug_add_button_script' );
    
    function themeslug_add_scroll_button() {
      echo '<a href="#" id="top"><img src="/img/top.png" title="&nbsp;FEL&nbsp;"></a>';
    }
    add_action( 'wp_footer', 'themeslug_add_scroll_button' );
    css:
    Kód:
    #top {
    	position: fixed;
    	display: none;
    	right: 0;
    	bottom: 40px;
    	z-index: 997;
    }
    Próbálgattam, azt arra is gondoltam, hogy talán a sablonban lévő egyéb scriptekkel zavarodik, de szerintem inkább csak nem értek hozzá. Pedig remekül nézne ki, ha forogna a „Fel” gomb.



  5. #4
    Plk
    Plk nem elérhető
    kakaó Plk logója
    Csatlakozott
    10-05-07
    Hely
    Farkashegy
    Hozzászólás
    268
    Begyűjtött 50 köszönetet
    32 hozzászólásával

    Alapbeállítás re: Oldal görgetésével forgó lap teteje gomb

    Összevariáltam. Működőképesen:

    back-to-top.js
    Kód:
    jQuery( document ).ready(function($){
      var offset = 444,
          speed = 999,
          duration = 500,
          scrollButton = $('#up');
    	  $(window).scroll(function() {
      var theta = $(window).scrollTop() / 99 % Math.PI;
       $('#rightgear').css({ transform: 'rotate(-' + theta + 'rad)' });
      });
      $( window ).scroll( function() {
        if ( $( this ).scrollTop() < offset) {
          scrollButton.fadeOut( duration );
        } else {
          scrollButton.fadeIn( duration );
        }
      }); 
      scrollButton.on( 'click', function(e){
        e.preventDefault();
        $( 'html, body' ).animate({
          scrollTop: 0
        }, speed);
      });
    });
    functions.php
    Kód:
    function themeslug_add_button_script() {
      wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/back-to-top.js', array( 'jquery' ) );
    }
    add_action( 'wp_enqueue_scripts', 'themeslug_add_button_script' );
    
    function themeslug_add_scroll_button() {
      echo '<a href="#" id="up"><img src="/img/top.png" id="rightgear"></a>';
    }
    add_action( 'wp_footer', 'themeslug_add_scroll_button' );
    .css
    Kód:
    #up {
    	position: fixed;
    	right: 5px;
    	bottom: 40px;
    	display:none;
    	z-index:999;
    }
    demo: segits.be



Könyvjelzők

Hozzászólás szabályai

  • Új témákat nem hozhatsz létre
  • Válaszokat nem küldhetsz
  • Fájlokat nem csatolhatsz
  • A hozzászólásaidat nem módosíthatod
  •