Genesis Parallax

When you want to test the source I' m about to show you, you need a working kid topic, because this is where all the Genesis topic developing coding goes. The parallax effect has become more and more widespread in recent years (for good reason) and is frequently requested by customers, while some of the best topics and web design of recent years routinely contain different kinds of parallax effect.

Choosing which one to use is a tricky issue, because if you're looking for the "best" one can get swamped by thousands of parallax jQuery, JavaScript -only, CSS-only, etc. parallax effect. To keep things easy, I've selected a plain and light (scaled down 6.50 KB version) Parallax. js plug-in.

As soon as we have finished downloading the scripts, we need to place them correctly in the subfolder of the topic, preferrably in the js/ directory to keep the tree clean:'wp_enqueue_scripts','gs_custom_enqueue_parallax_script' ;'parallax','/js/parallax.min. js','jquery' ; Note that parallax scripts depend on using jumpers. There' a standard register_sidebar( $args); WordPress functions, but Genesis provides genesis_register_sidebar(); functions that do the same.

id''home-1','name''home section 1 (parallax)','gs-custom-theme','description''Home section 1 (parallax)','gs-custom-theme', ; id''home-2','name''home section 2 (no-parallax)','gs-custom-theme','description''Home section 2 (no parallax)','gs-custom-theme', ; id''home-3','name''home section 3 (parallax)','gs-custom-theme','description''Home section 3 (parallax)','gs-custom-theme', ;

id''home-4','name''home section 4 (no-parallax)','gs-custom-theme','description''Home section 4 (no-parallax)','gs-custom-theme', ; id''home-5','name''home section 5 (parallax)','gs-custom-theme','description''Home section 5 (parallax)','gs-custom-theme', ; id''home-6','name''home section 6 (no-parallax)','gs-custom-theme','description''Home section 6 (no-parallax)','gs-custom-theme', ; Since we chose to have six sections on the homepage, we also need six customized control sections.

The three of them steer the wallpapers and the three the colours. The following_custom_theme_front_section','title''Front Page Options','priority' ;'gs_custom_theme_setting_background_image_1','default' ''. sanitary_callback''gs_custom_theme_sanitize_bgi', ;,,'gs_custom_theme_theme_background_image_1','label''Background Image 1st','gs-custom_theme','settings''gs_custom_theme_setting_background_image_1','section''gs_custom_theme_front_section','priority' ;

sanitary_callback''gs_custom_theme_sanitize_bgi', ;,,,'gs_custom_theme_theme_ground_image_2','label''Background Image 2nd','gs-custom_theme_s','settings''gs_custom_theme_setting_image_de_back_image_2','section''gs_custom_theme_front_section','priority' ; sanitize callback' 'gs_custom_theme_sanitize_bgi', ; background_image_3','label''Background Image 3nd','gs-custom_theme','settings''gs_custom_theme_setting_background_image_3','section''gs_custom_theme_theme_theme_sur_fond','priority' ; the ' gs_custom_color_bg_setting_1','label''background color 1st','gs-custom-theme','settings''gs_custom_theme_setting_color_background_1','section''gs_custom_theme_front_section','priority' ;

2','étiquette''couleur de fond 2','gs-thème_personnalisé','paramètres''gs_thème_personnalisé_couleur_fond_couleur_2','section''gs_theme_custom_theme_front_section','priority' ; The following are the following:'gs_custom_color_bg_setting_3','label''background color 3rd','gs-custom-theme','settings''gs_custom_theme_setting_color_background_3','section''gs_custom_theme_front_section','priority' ; I don't think we need to tell why sanitisation is important, but given the templated design, we need sanitisation features for pictures and colours.

Before we do that, let's reorder the items a little, removing the standard mark-up and hole lay-out functions in genesis_after_header()action hook. Genesis_loop', Genesis_do_loop' ; Genesis_after_header', Genesis_do_nav' ; Genesis_header_right', Genesis_do_nav' ; Genesis_markup_site-inner','__return_null' ; Genesis_markup_content-sidebar-wrap_output','__return_false' ; For example,'Genesis_markup_content','__return_null' ;'genesis_after_header','gs_custom_theme_home_content_sections'; take a look at the example of how we can use colours and pictures that are adjusted in the customizer:

Also take a look at the parallax feature - it comes with parallax. js and changes the parallax effect velocity. It' up to you now: What is your favourite parallax effect?