Thêm hiệu ứng cuộn mượt mà cho tất cả các khu vực tiện ích gia đình trên Parallax Theme PRO

Xin chào, tôi muốn cuộn từ khu vực tiện ích gia đình này sang khu vực tiện ích con tiếp theo (nhấn vào biểu tượng fontawesome).
Tuy nhiên, tôi bằng cách sử dụng chủ đề Parallax Pro ngay bây giờ.

Có ai có thể giúp tôi với điều này?

Cảm ơn,
Josephine

Tôi đã hoàn thành điều này theo cách sau:

BƯỚC 1: Đầu tiên tải xuống hai tệp JS “jquery.localScroll.min.js” và “jquery.scrollTo.min.js” từ trang của Ariel Flesler và tải lên trong thư mục js .

LƯU Ý: Nếu bạn có chủ đề Centric PRO thì bạn có thể dễ dàng lấy hai tệp JS này từ đó.

BƯỚC 2: Bây giờ sắp xếp hai js này từ tệp front-page.php

function parallax_enqueue_parallax_script() {
			if ( ! wp_is_mobile() ) {
				wp_enqueue_script( 'parallax-script', get_bloginfo( 'stylesheet_directory' ) . '/js/parallax.js', array( 'jquery' ), '1.0.0' );
			}
      wp_enqueue_script( 'localScroll', get_stylesheet_directory_uri() . '/js/jquery.localScroll.min.js', array( 'scrollTo' ), '1.2.8b', true );
      wp_enqueue_script( 'scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.min.js', array( 'jquery' ), '1.4.5-beta', true );
}

BƯỚC 3: Sửa đổi đánh dấu widget của trang chủ và đặt mũi tên. Xem đánh dấu tiện ích con trang chủ được cập nhật tại đây:

//* Add markup for homepage widgets
function parallax_homepage_widgets() {
genesis_widget_area( 'home-section-1', array(
'before' => '<div class="home-odd home-section-1 widget-area"><div class="wrap">',
'after' => '<p class="arrow"><a href="#home-section-2"></a></p></div></div>',
) );
genesis_widget_area( 'home-section-2', array(
'before' => '<div class="home-even home-section-2 widget-area" id="home-section-2"><div class="wrap">',
'after' => '<p class="arrow"><a href="#home-section-3"></a></p></div></div>',
) );
genesis_widget_area( 'home-section-3', array(
'before' => '<div class="home-odd home-section-3 widget-area" id="home-section-3"><div class="wrap">',
'after' => '<p class="arrow"><a href="#home-section-4"></a></p></div></div>',
) );
genesis_widget_area( 'home-section-4', array(
'before' => '<div class="home-even home-section-4 widget-area" id="home-section-4"><div class="wrap">',
'after' => '<p class="arrow"><a href="#home-section-5"></a></p></div></div>',
) );
genesis_widget_area( 'home-section-5', array(
'before' => '<div class="home-odd home-section-5 widget-area" id="home-section-5"><div class="wrap">',
'after' => '</div></div>',
) );
}

Nếu bạn xem kỹ mã, bạn sẽ thấy rằng tôi đã thêm một số ID trong đánh dấu HTML như home-section-2, home-section-3, home-section-4, home-section-5 và p TAG bên trong bọc.

Hiện đang chia sẻ mã được cập nhật đầy đủ của tệp front-page.php tại đây:

/**
* This file adds the Home Page to the Parallax Pro Theme.
*
* @author StudioPress
* @package Parallax
* @subpackage Customizations
*/
add_action( 'genesis_meta', 'parallax_home_genesis_meta' );
/**
* Add widget support for homepage. If no widgets active, display the default loop.
*
*/
function parallax_home_genesis_meta() {
if ( is_active_sidebar( 'home-section-1' ) || is_active_sidebar( 'home-section-2' ) || is_active_sidebar( 'home-section-3' ) || is_active_sidebar( 'home-section-4' ) || is_active_sidebar( 'home-section-5' ) ) {
//* Enqueue parallax script
add_action( 'wp_enqueue_scripts', 'parallax_enqueue_parallax_script' );
function parallax_enqueue_parallax_script() {
if ( ! wp_is_mobile() ) {
wp_enqueue_script( 'parallax-script', get_bloginfo( 'stylesheet_directory' ) . '/js/parallax.js', array( 'jquery' ), '1.0.0' );
}
wp_enqueue_script( 'localScroll', get_stylesheet_directory_uri() . '/js/jquery.localScroll.min.js', array( 'scrollTo' ), '1.2.8b', true );
wp_enqueue_script( 'scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.min.js', array( 'jquery' ), '1.4.5-beta', true );
}
//* Add parallax-home body class
add_filter( 'body_class', 'parallax_body_class' );
function parallax_body_class( $classes ) {
$classes[] = 'parallax-home';
return $classes;
}
//* Force full width content layout
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
//* Remove primary navigation
remove_action( 'genesis_before_content_sidebar_wrap', 'genesis_do_nav' );
//* Remove breadcrumbs
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs');
//* Remove the default Genesis loop
remove_action( 'genesis_loop', 'genesis_do_loop' );
//* Add homepage widgets
add_action( 'genesis_loop', 'parallax_homepage_widgets' );
}
}
//* Add markup for homepage widgets
function parallax_homepage_widgets() {
genesis_widget_area( 'home-section-1', array(
'before' => '<div class="home-odd home-section-1 widget-area"><div class="wrap">',
'after' => '<p class="arrow"><a href="#home-section-2"></a></p></div></div>',
) );
genesis_widget_area( 'home-section-2', array(
'before' => '<div class="home-even home-section-2 widget-area" id="home-section-2"><div class="wrap">',
'after' => '<p class="arrow"><a href="#home-section-3"></a></p></div></div>',
) );
genesis_widget_area( 'home-section-3', array(
'before' => '<div class="home-odd home-section-3 widget-area" id="home-section-3"><div class="wrap">',
'after' => '<p class="arrow"><a href="#home-section-4"></a></p></div></div>',
) );
genesis_widget_area( 'home-section-4', array(
'before' => '<div class="home-even home-section-4 widget-area" id="home-section-4"><div class="wrap">',
'after' => '<p class="arrow"><a href="#home-section-5"></a></p></div></div>',
) );
genesis_widget_area( 'home-section-5', array(
'before' => '<div class="home-odd home-section-5 widget-area" id="home-section-5"><div class="wrap">',
'after' => '</div></div>',
) );
}
genesis();

BƯỚC 4: Tạo mũi tên xuống. Chủ đề con đã tải các Dashicons. Vì vậy, sử dụng phông chữ Dashicons này cho mũi tên xuống. Thêm css sau vào tệp style.css của bạn:

.arrow, .up-arrow {
	margin: 0;
	text-align: center;
	width: 100%;
}
.arrow a, .up-arrow a {
	background: #fff;
  background: rgba(0,0,0,.65);
	border-radius: 30px;
	display: inline-block;
	padding: 13px 10px 0px;
	text-align: center;
	line-height: 1;
}
.arrow a:before {
	-webkit-font-smoothing: antialiased;
	color: #dedede;
	content: "\f347";
	font: normal 40px/1 'dashicons';
	height: 40px;
	width: 40px;
}
.up-arrow a:before {
	-webkit-font-smoothing: antialiased;
	color: #dedede;
	content: "\f343";
	font: normal 40px/1 'dashicons';
	height: 40px;
	width: 40px;
}

BƯỚC 5: Đây là bước cuối cùng. Thêm 3 dòng sau vào tệp parallax.js. Đây là mã đầy đủ:

jQuery(function( $ ){
// Enable parallax and fade effects on homepage sections
$(window).scroll(function(){
scrolltop = $(window).scrollTop()
scrollwindow = scrolltop + $(window).height();
$(".home-section-1").css("backgroundPosition", "0px " + -(scrolltop/6) + "px");
if( scrollwindow > $(".home-section-3").offset().top ) {
// Enable parallax effect
backgroundscroll = scrollwindow - $(".home-section-3").offset().top;
$(".home-section-3").css("backgroundPosition", "0px " + -(backgroundscroll/6) + "px");
}
if( scrollwindow > $(".home-section-5").offset().top ) {
// Enable parallax effect
backgroundscroll = scrollwindow - $(".home-section-5").offset().top;
$(".home-section-5").css("backgroundPosition", "0px " + -(backgroundscroll/6) + "px");
}
});
/* THIS IS THE NEW JS CODE WHICH IS USING FOR SMOOTH SCROLLING EFFECT */
$.localScroll({
duration: 750
});
});

Cách thêm mũi tên lên trong phần trang chủ 5

Chỉnh sửa mã sau của tệp front-page.php:

genesis_widget_area( 'home-section-5', array(
'before' => '<div class="home-odd home-section-5 widget-area" id="home-section-5"><div class="wrap">',
'after' => '</div></div>',
) );

Qua

genesis_widget_area( 'home-section-5', array(
'before' => '<div class="home-odd home-section-5 widget-area" id="home-section-5"><div class="wrap">',
'after' => '<p class="up-arrow"><a href="#site-container"></a></p></div></div>',
) );

Bây giờ thêm mã mới bổ sung này bên trên genesis (); hàm số

add_filter('genesis_attr_site-container', 'gd_add_id_in_site_container');
function gd_add_id_in_site_container( $attributes ){
   $attributes['id'] = 'site-container';
   return $attributes; 
}

Sao chép CSS đã sửa đổi từ phần BƯỚC 4 .